Let’s Make a Game: Snake

Note: this tutorial is out of date. You can use concepts from this tutorial, plus updated ones listed below:

 

snake

The classic game “Snake” is fun because of it’s simplicity and replayability. You start out as a small snake made up of one or two blocks, and you grow longer each time you eat something. You have to avoid colliding with yourself, which becomes progressively harder as your tail grows longer. The entire game only contains a few elements, but you can play it over and over – that makes it a perfect candidate for a “Let’s Make a Game” Tutorial!

Continue reading “Let’s Make a Game: Snake”

Pimp my Game – Using your own Character artwork

Note: this tutorial has been updated here http://gamefroot.com/knowledgebase/animate-and-upload-your-own-character/

 

With Gamefroot we make it easy for the entry level game designer to effortlessly create a game using the default assets, but for the next level of game designer* we offer a lot more customization. You can design your own characters, terrain, in-game items, and backgrounds. You can then upload these assets into Gamefroot to build games that are uniquely your own. In this series of tutorials I’m going to show you how to do all of that to create a masterpiece you can be proud of. *To take advantage of Gamefroot’s customization it is important that you have image editing software and a working knowledge of how to use it.

Continue reading “Pimp my Game – Using your own Character artwork”

Pimp my Game – Create your own game background

Note: this tutorial has been updated here http://gamefroot.com/knowledgebase/create-your-own-background-image/

 

With Gamefroot we make it easy for the entry level game designer to effortlessly create a game using the default assets, but for the next level of game designer* we offer a lot more customization. You can design your own characters, terrain, in-game items, and backgrounds. You can then upload these assets into Gamefroot to build games that are uniquely your own. In this series of tutorials I’m going to show you how to do all of that to create a masterpiece you can be proud of.

*To take advantage of Gamefroot’s customization it is important that you have image editing software and a working knowledge of how to use it.

Gamefroot Backgrounds

In Gamefroot the background is the image that appears behind everything in your game. A good background can create a lot of atmosphere in a game. For example: a game about zombies with a moonlit graveyard for a background will seem dramatic and scary, but the same game with a bright blue sky for a background wouldn’t have the same impact.

 

 

Game backgrounds remain static in games. Background images must be 768 pixels wide by 512 pixels high.

 

Designing your background

Consider the visual style of your game. How do you want the rest of your game to look – in what style have you done the terrain, the items, and the characters? Think about the atmosphere or mood of the level. You can evoke different moods with the colors you use. Think about how detailed you want your background. If your background is too overpowering could that be distracting and ruin the game?

Remember the scale of the characters and the terrain. If there are buildings or some other kind of background terrain in your background, make sure they are appropriately sized so that they seem in the distance if they are supposed to be far away. Also remember that as objects are further into the distance they appear duller and have less contrast.

I thought about all of these things when I was creating an Arabian themed background for the Gamefroot default backgrounds. The visual style we were going for was a kind of detailed pixel art look. It had to suit the characters and terrain that we had already made.

I sketched out a layout of some sand dunes and trees with domed buildings, but testing it out in a game revealed some problems with scale (the trees were way too big).

So I rearranged everything to create a layout that worked a lot better.

Then I went over the whole composition and cleaned it all up. In this background image, as the trees, buildings and mountains reach further into the distance they become more and more faded. To ensure the style of the terrain and the background worked together, I replicated the tree tiles and put them away in the distance. The golden brown colors in the terrain tiles have also been carried through.

Here’s the background in a game. Using a background with tiles and characters that fit the style can make your game feel professional and polished.

 

Be sure to pay a decent amount of attention to making your backgrounds – it definitely pays off.

Uploading and testing your Background

Once you have finished making your background, save it as a PNG, JPG or GIF file. Then load up your level on Gamefroot and open the Level Properties. Click “Choose file” to select an image from your computer.

Once you have selected your background image it will show up as a thumbnail in the level properties. Click “Done” to go back to your level.

Then preview your game to see what your new background image looks like in game. If you are unhappy with it, go back into your image editor and tweak until it looks right.

Multiple levels, multiple backgrounds

If you want a game with multiple levels then you can really show off your artistic ability and create a customized background for each level. This can make your game feel much more varied and immersive. For an example of this, play the Isaac Newton game.

Happy game making!

 

Pimp my Game – Make your own terrain and items

Note: this tutorial has now been updated here http://gamefroot.com/knowledgebase/how-to-draw-your-own-game-objects/

 

With Gamefroot we make it easy for the entry level game designer to effortlessly create a game using the default assets, but for the next level of game designer* we offer a lot more customization. You can design your own characters, terrain, in-game items, and backgrounds. You can then upload these assets into Gamefroot to build games that are uniquely your own. In this series of tutorials I’m going to show you how to do all of that to create a masterpiece you can be proud of. *To take advantage of Gamefroot’s customization it is important that you have image editing software and a working knowledge of how to use it.

Gamefroot terrain tiles and item tiles

The single largest element in most games is the terrain tiles, so making your own terrain tiles is very important in game customization. All tiles in Gamefroot must be 48 pixels high and 48 pixels wide, and they must be PNG or GIF files. You can have objects bigger than a single 48 x 48 tile by making an object out of multiple tiles, or you can make an object smaller than 48 x 48 by leaving transparent space around the object inside the tile.

Designing tiles

Think about the purpose of the tile. Is this an item? Will this tile be an obstacle? Remember that the whole tile will be solid, not just the part of the tile with artwork on it. If it is going to be a background tile then this doesn’t matter – the player won’t be bumping into it.

Also remember that terrain has 2 layers – take advantage of this to make cool layered effects.

Consider the visual style of your game. Draw up your concepts, and test them out with your other game elements to make sure they don’t clash or look weird. When I draw tiles I often work at 400 percent of the actual tile size – that way I can work on the details, and then shrink the artwork down to its proper size and make any tweaks that are needed.

If you are working on pixel art, you can do the opposite – work small and upscale it for the final version.

Once you are happy with your artwork, cut it into 48 x 48 pixel images and save them as either PNG or GIF files (PNG files have better transparency).

 

Uploading and testing your own tiles

Now that you are ready to upload your new tiles, open up Gamefroot and select the Terrain Tab. Click the + button, browse to the image file on your hard drive, and select one or more images to upload.

uploading-terrain-tile1.jpg

upload-terrain-2.jpg

Click Begin Upload and the files will start to upload. Once they have all been uploaded, close this box and your new terrain tiles will appear in “Your Terrain” tab.

upload-terrain-3.jpg

The exact same process above applies to item tiles as well.

Now you can make games entirely out of your own tiles!

Happy game making!