How We Establish Collision Zones in Tiled

Recently we have recoded Vikings and have decided to implement maps we built in Tiled. This has been advantageous for many reasons including being able to build larger maps with less art assets. It has also allowed us to establish collision zones by setting a specific layer to be the collision layer. Let me explain this in a a more visual fashion!

Screen Shot 2015-07-27 at 2.36.45 PM

Here is a screenshot from the newest version of Vikings (which is still very much under construction). If you look at the picture you can see we’ve outlined our collide-able objects for testing. You can also see that we’ve outlined the cave walls with squares and triangles that define where the collision zones are. I was able to define these collision zones in Tiled by setting properties:

Screen Shot 2015-07-27 at 2.52.18 PM

As you can see I had my terrain tiles laid out and I gave each piece of each nine tile a property by clicking on the plus at the bottom of the program. I labeled each property “shape” and gave it a number. The number represents what kind of shape it is:


I labeled each square piece of the nine tile with a 1. That way when you code the game you can say that each tile that is labeled 1 will show up as a collide-able object. I’ve labeled my triangle corner piece 4,5,2 and 3 because they each have unique characteristics but will behave just like the squares.

Using this approach can open up a variety of possibilities for 2D game developers. You can make any shape you would like and at any size! If you code things right you could even have mineable levels or ones that explode, fall apart, or reshape.

Hopefully this short tutorial has been of some help to you, and if you have any questions, praise or jibes please leave them in the comments below!

Binary Cocoa Explodes Into 20,000 Particles

Blender is an amazing tool with capabilities that extend far beyond my meek imagination. Without having a teacher to tell you how to use the tools you kind of have to do some guesswork and dedicate a couple hours to discovering them. Or you could watch a YouTube video and follow the steps they take, and garner Blender knowledge as you go along. This proved to be a success when I followed the steps for making a dissolving text animation from watching a video from tutor4u. Here is what I was able to create:

Boom! Our company name explodes into 20,000 cocoa colored particles. Delicious.

This turned out to be a great practice that helped me understand how to use the camera and adjust the power of the lamp. You too can make your own exploding text by following the steps shown in this video.

As for other Binary Cocoa related things we would like to acknowledge that we are still alive and making games. Collider is on it’s way to Steam and Vikings has some new maps and an almost total art and code overhaul. BOCO has been picking up some attention as well as Hexapod Defense Force and we are very grateful. Thanks for keeping us alive!

How to Make Terrains in Tiled Map Editor

Hey there, humans! Know what’s really cool about using the Tiled Map editor? You don’t have to place every single terrain tile by hand like a goon (like I was doing). Instead you can follow these handy steps to building large terrains within a matter of minutes instead of countless hours. This should save you one or two head slams to the wall.

1. Draw your terrain tile map. For your tile map you are going to draw nine land tiles and four corner tiles. There are several ways you can arrange these but I like to use the format shown in the picture below. The land tiles are the nine to the left and the corner tiles are the four to the right. Each tile should be EXACTLY the same amount of pixels high as they are wide, otherwise it might appear to look off. For this demonstration I have made all of my tiles 100 pixels high by 100 pixels wide.



The hardest part of drawing a terrain is probably figuring how to draw the corners. Here is what my corner pieces look like:


Note how the grass is in the center of the corners. This represents the top, bottom, left and right corner edges that you will need to complete your terrain map. The easiest way to draw this is to sample the surface colors of your land tiles and put them right in the center of your four corner tiles.

2. Drag your map into Tiled and select the terrain button. You can find this button on the bottom right:

Screen Shot 2015-07-13 at 11.35.55 AM

3. Click the plus button to create a new terrain. Name it something you’ll remember

Screen Shot 2015-07-13 at 11.39.21 AM

4. Outline your terrain. Use the blue outlining tool that will automatically appear when you mouse over your map. Click and mark it like so:

Screen Shot 2015-07-13 at 12.01.03 PM

5. Select the terrain tab and your terrain. Once you have it selected go ahead and draw your terrain on the grid! Try making some interesting shapes and layers to make it have some depth. Here is what mine ended up looking like:

Screen Shot 2015-07-13 at 12.08.24 PM

6. Add some eye candy. Adding objects makes the map look much more interesting:

Screen Shot 2015-07-13 at 12.22.50 PM

Okay! Now we are on our way to making something interesting. I didn’t put as much time as I would have liked into the drawing of these assets, but hopefully this inspires you enough to go out and draw something awesome. Check back in the next upcoming weeks as we go over how to implement maps into games, among other interesting topics. If you have any questions or topic suggestions leave us a message in the comments below!