Differences

This shows you the differences between two versions of the page.

Link to this comparison view

gdevelop:tutorials:catch_the_cat [2015/10/18 19:20]
gdevelop:tutorials:catch_the_cat [2015/10/18 19:20] (current)
Line 1: Line 1:
 +Welcome to the catch the cat tutorial!
 +In this tutorial you'll create a game where you click on a cat to earn points.
 +Don't click on asteroids though. They'​ll end the game!
 +You can draw your own sprites if you want, but I have drawn some you can use.
 +You can even use the sprites bundled with Gdevelop, but i'm using these.
 +Also this game works on android. So we can play it on our phones or tablets or what not.
 +It also works in our browser too so we don't need a phone or tablet.
 +{{ gdevelop:​tutorials:​asteroid_sprite.png |}}
 +{{ gdevelop:​tutorials:​background_sprite.png |}}
 +{{ gdevelop:​tutorials:​wall_sprite.png |}}
 +{{ gdevelop:​tutorials:​cat_sprite.png |}}
 +So first off create a folder in your desired place. I'm putting mine on my desktop for easy finding.
 +Call it "Catch the cat" or something. Place your sprites in there. Right click my pictures up there and click "save as"
 +Then put them in it. It should look like this.
 +{{ gdevelop:​tutorials:​1.png |}}
 +Now that that's done. Start up Gdevelop. Click on it from your start menu or desktop icon.
 +
 +Alright click on the "​new"​ button in the ribbon.
 +
 +
 +{{ gdevelop:​tutorials:​2.png |}}
 +
 +
 +Select HTML5/​android game and put the game wherever you want. I'm putting mine in my catch the cat folder.
 +Also click empty project.
 +
 +
 +{{ gdevelop:​tutorials:​3.png |}}
 +
 +
 +Alright now we need to make the cat.
 +So right click the objects button in the corner, and select "new object"​ call it whatever you want. I'm calling mine "​cat_sprite"​.
 +
 +
 +{{ gdevelop:​tutorials:​4.png |}}
 +
 +
 +Next double click it and click the + in the top right corner to add a picture. I used my cat. Then drag it to the frames section towards the bottom.
 +
 +
 +{{ gdevelop:​tutorials:​5.png |}}
 +
 +
 +Next do the walls.
 +When you do the walls click "tiled sprite"​ When you edit it. It should look like this afterwards.
 +
 +
 +{{ gdevelop:​tutorials:​6.png |}}
 +
 +
 +Next drag your objects into the scene.
 +Because this is a tiled sprite. You can drag those tiny white squares around to make it whatever size you want.
 +Surround the room with these walls.
 +
 +
 +{{ gdevelop:​tutorials:​7.png |}}
 +
 +
 +Next Do the exact same thing for the background sprite.
 +I'm stretching it across the whole scene.
 +
 +
 +{{ gdevelop:​tutorials:​8.png |}}
 +
 +
 +Oops... I guess it covered up everything..
 +That's alright! Right click the background and click "​properties"​.
 +Set the Z order to -10. It should be behind everything now.
 +
 +
 +{{ gdevelop:​tutorials:​9.png |}}
 +
 +
 +Alright now time to make our kitty do something.
 +Maybe save it first? I know I did. It's in the top left corner under "​file"​
 +Now right click our cat in the object'​s editor and click "add behavior"​
 +Select that physics one from the list.
 +Right click the cat again and select "other properties"​.
 +Click "Click to edit" Set it like I did in the picture.
 +
 +
 +{{ gdevelop:​tutorials:​10.png |}}
 +
 +
 +Next add the physics behavior to the walls. Edit the properties and tick the "​static object"​
 +I guess you could test the game now. The cat should bounce around.