Gamesalad Recipe 002: Graphics and Animation



This recipe will teach you about the various ways to import graphics and create animations within Gamesalad and also discuss a few of the different ways of creating the source graphics for your games. As with all the recipes, a video and source files are available at the end of the article.

A source graphic is the image or images you create outside of Gamesalad in software like Adobe Photoshop, Adobe Illustrator, Maxon Cinema 4D, and any others that you import into Gamesalad and use in your games.

I have created some source images and animations for this tutorial, download the source files before you start so you can use them as we more through this recipe. These images are yours to use as you see fit, you can use them in any of your future projects you like free of charge. If you do use them I would appreciate a mention in the credits of your project if you would be so kind.

Before we get into animations and how to create them, lets learn about importing and using graphics in Gamesalad.

Individual graphics (and frames of animation) should be created in even numbered pixels ratios that are devisable by 4. If you keep your elements within these dimensions they should always look good on screen and be optimized for use in Gamesalad:

8 x 8 pixels
16 x 16 pixels
32 x 32 pixels
64 x 64 pixels
128 x 128 pixels
256 x 256 pixels
512 x 512 pixels
1024 x 1024 pixels

Following these ratios you can also safely create images as 32 x 64 pixels, 8 x 256 pixels, 1028 x 512 pixels, etc.

Images created for Gamesalad should always be RGB, 72dpi PNG files. Ideally the PNG files should be saved as 24 bit files, however if you need transparency on your images you will have to use 32 bit files. Gamesalad will automatically convert images to PNG format for you when you import them, but I recommend saving them yourself as PNG so you have complete control over the graphic setting of the images. If you are targeting a retina device the images must be created at twice the physical size you want them to display at on screen. So if you wanted your graphic to be 64 pixels x 64 pixels when it’s displayed on a retina iPad you need to create your source image at 128 pixels x 128 pixels.

Step one:

Let’s start a new iPad landscape project in Gamesalad just like we did in recipe 001, make sure to click the Resolution Independence button. Feel free to fill in the Project Info if you’d like, then click the Scene button and open up the Scene Editor of the Initial Scene.

In the Library palette click the Images button. Right now the window should be empty and show two additional buttons at the top, Project and Purchased and a button named Purchase Images… at the bottom. If you click the Purchase Images… button you are taken to the Gamesalad Marketplace where you can purchase images and other assets (templates, sounds, music, etc.) for your project. Any assets you purchase from the marketplace will be displayed when you click the Purchased button above.

For now make sure the Project button is clicked and from the Gamesalad recipe 002 Source Files folder that you downloaded drag the three brick files into this window. The files are named brick-end.png, brick-floor.png, and brick-wall.png. All three images should now show in the Images window. At the bottom of the window next to the Purchased Images… button is a slider, drag this right and left to see how the preview of the images you just added are magnified.

If you don’t want to drag and drop your graphics into this window, you can also click the ‘+’ button in the lower left corner and you will be presented with a standard Open dialog box. If you want to delete an image from your project simply highlight the image you want to delete and click the ‘-’ button or press the Delete key on your keyboard.

Note that Gamesalad used the file name of the graphics without the .png extension to automatically name the graphics for you.

Since I created these brick tile in Photoshop at 128 x 128 pixels and my project is using Resolution Independence, they will display in Gamesalad and on the iPad as 64 x 64 pixel images.

Let’s create our first actor with a graphic, click and drag the image titled brick-floor up into the Inspector window, you’ll see how the actor is automatically created and the brick-floor image is used as its image.

This actor will be a repeating tile that you can drag to any size and it will look like bricks. Double click the brick floor actor to open its editor. First check the size by clicking the down arrow next to Size, the Width and Height should be 64. As I mentioned above the source file for this actors image is 128 x 128 pixels but since you clicked Resolution Independence it is used in Gamesalad at 1/2 size. Under the Physics settings set your Bounciness to 0 and turn Movable off (these settings will make the actor an im-movable platform).

Show the Graphics settings by clicking the arrow next to Graphics. There are a lot of options under here, the two we need to change are Horizontal Wrap and Vertical Wrap. From the drop down menu for both of these choose Tile. As you might suspect, this will tile the image both horizontally and vertically when used.

Adding the brick floor.

Adding the brick floor.

Let’s try it out, click the Back button to return to the Scene Editor and drag the brick-floor actor into your scene. Click the actor within the scene to expose its resize handles, drag the handles around to see how the bricks tile within the new shape. Once you’ve seen how this works, double click the actor within the scene to open it’s instance editor. Any changes you make within and instance editor of an actor apply ONLY to that specific instance of the actor and not the prototype actor. The protype actor is the ‘main’ actor in the Inspector window. Click the arrow next to Size and make the Height of this instance 64. This makes it exactly one tile deep. Now drag this block of tiles to the bottom of your scene and pull the width to make a floor across the whole bottom like this.

Step two:

Adding the brick walls.

Adding the brick walls.

Now drag the brick-wall image from the Library window up into the Inspector window too add a new actor to your scene. Double click this new actor and change the Bounciness to 0 and turn Moveable off. Within the Graphics settings set it’s Vertical Wrap and Horizontal Wrap to Tile. The image for this actor was created specifically to tile only vertically to make a repeating wall tile. Drag this actor to the scene and pull the center top resize handle up to see how it tiles. If you resize the actor horizontally you’ll see that it doesn’t look correct when you pull it wider than 64 pixels. Now make a wall on the right and left side of your scene so it looks like this.

You may need to adjust with the placement of the walls some so they line up correctly with the floor bricks, you can use the arrow keys on your keyboard to move actors one pixel at a time.

Step Three:

Now lets create our last brick pieces. Instead of dragging the brick-end image to the Inspector window, this time click the ‘+’ button in the lower left corner of the Inspector window. This adds a new ‘blank’ actor to the window. Now click and drag the brick-end image onto this new actor and let go. This will apply the image to the ‘blank’ actor and set it’s size automatically to the size of the image (64 x 64 pixels). Double click the name ‘Actor 1’ and re-name it to brick-end-right. Set the Bounciness to 0 and turn off Moveable. This will be a end piece for the right side of a brick floor, now lets creat the left end piece. Hold down your Option (Alt) key and drag this new actor to the right, a blue line should appear in the window, let the actor go and it will be copied. Re-name this copy to brick-end-left and open it’s editor. Since you made a copy of the brick-end-right actor this new actor will have all of the settings you set under the Physics options already. Under the Graphics options click the box next to Flip Horizontally. You could create two separate images for the left and right ends of the brick floor but why bother when they are mirror images of each other. You can also flip images vertically in Gamesalad.

Step Four:

Adding more bricks.

Adding more bricks.

Lets finish the brick part of our scene. Drag a new brick-floor actor into the scene and double click it to edit the size of it’s instance, set the Width to 192 and the Height to 64. These numbers will always be multiples of 64 since that is the size of one brick tile in our scene, this floor piece is 3 tiles wide so that is 64 x 3 = 192.

You could leave this tile alone but to me I don’t like ends that just seem to stop and not complete the brick look. To complete the look, drag a brick-end-right actor and place it on the right side of the new floor, and a brick-end-left actor and place it on the left end.

Adding the ends to the brink floor.

Adding the ends to the brink floor.

Finish building the bricks in the scene by following this screen shot. I’ve marked the brick pieces so you can see how I built the complete scene.

I created all of the brick tiles using Adobe Photoshop, you could use Gimp or any other graphics editor to create similar tiles. The floor tile was created so it tiles smoothly both horizontally and vertically, the wall piece was created to only tile vertically and the end pieces are not meant to tile at all. These were all created so they fit together as seemless bricks in the final scene. As you can see planning and creating your graphics for a game can be quite involved but it’s also very rewarding once you seem them all in action!

Finishing off the bricks in the scene.

Finishing off the bricks in the scene.

Step Five:

Now lets create an image for the wood plank bridge you see in this screen shot below.

From the Gamesalad recipe 002 Source Files folder, drag the image named planks.png directly into the scene area of your editor. You’ll see when you let the image go it is automatically added to both the Library and Inspector windows. This is yet another way to add an element to your project.

Open the planks actor editor and set it up as another platform by setting the Bounciness to 0 and turning Moveable off. Within the Graphics setting choose Tile for Horizontal Wrap and Fixed for Vertical Wrap. Return to the scene editor and select the new planks actor, try pulling the re-size handles around. You’ll see it tiles seemlessly horizontally but does not tile vertically. That is exactly how we want it to act since it is going to be used as a bridge piece. Resize the actor so it is only 32 pixels high and drag it into place so your screen looks like the one above. If you set the height of this actor as something more than 32 pixels, the extra ‘dead’ space above and below the image will still be treated as part of the platform.

Adding the wooden bridge image.

Adding the wooden bridge image.

I used Adobe Illustrator to create this bridge first as an EPS vector file, then I imported it into Photoshop and did a little clean up on the image and exported it as a PNG file for use in Gamesalad. Inkscape is a good free alternative to Illustrator.

Step Six:

Okay, that’s enough of the static graphics for now, let’s add our first animation! Let’s make a spinning coin goal for the player to get too. In the Gamesalad recipe 002 Source Files folder is a sub folder called coin frames, there are ten images within this folder that will make up our animation. When creating animations you should name your frames of animation sequentially so they are imported into Gamesalad correctly.

It’s a good idea to get in the habit of keeping your source files organized, just like naming all of your behaviors and rules in recipe 001. You can see in the folder you downloaded that I have clearly named all of the files and organized them in a common sense way.

A fairly organized directory of graphics for this recipe.

A fairly organized directory of graphics for this recipe.

Drag all of the coin images into the Library window and create a new actor using the coin01 image, double click the actor to open its editor. For now don’t make any edits to the attributes settings, but find the Behavior titled Animate and drag it into the behaviors editor. You’ll likely need to click the Behaviors button in the Library palette to show the list of behaviors. After adding the animate behavior, return to the image section of the palette and drag the images coin01-coin10 (in order) into the animate behavior you just added. Leave the rest of the settings alone, here is how the behavior should look:

Animation behavior and frames for the coin actor.

Animation behavior and frames for the coin actor.

Click the Back button, drag the new coin actor into the Scene and Preview it. You should now see the coin actor rotating within the scene. If the frames of animation seem out of order you can return to the animate behavior and drag the frames around to change their order.

I used Maxon Cinema 4D to create this animation. There are many 3D modeling and animation packages you can use to create this kind of art, Blender is a free option.

Now that you have placed the coin, drag it to the lower left corner of the scene and we’ll use it as the goal for our player.

The final animated coin added to the scene.

The final animated coin added to the scene.

Return to the animate behavior of the coin for a moment and lets look at the other settings available. The Speed is just that, increase this number to make the animation play faster or decrease it to slow it down. FPS stands for frames per second, so since we have 10 frames in our coin animation, it will take 1 second to play when the FPS of this behavior is set to 10. The maximum FPS you can set in the behavior is 30. If you check the Loop check box the animation will loop endlessly, if you un-check it the animation will only play once. If you are looping your animation the Restore actor image when done check box does nothing, however if you are not looping the animation turning this on will make the animation finish with the actors main image.

Step Seven:

In the last step the frames of the coin animation were created outside Gamesalad, lets use the programing power of Gamesalad to create our next animation!

Drag the images fan-blade.png and fan-cover.png from the Gamesalad recipe 002 Source Files folder into the Library/Images window. Now drag them both up to the Inspector window to create two new actors. Turn Moveable off, under the Physics settings for the fan-cover actor, this will just help optimize your game since we know the cover will never move. Do not turn moveable off for the fan-blade or our animation will not work.

Open the actor editor for the fan-blade actor and find the Behavior called Rotate in the list, remember the behaviors are listed alphabetically so it will be near the bottom of the list. Drag the rotate behavior into the actor behavior window and for Direction click the Clockwise button. You can leave the speed set to 90, increasing this number will make the fan spin faster. Click the Back button and drag the fan actor into your scene and press Preview. The fan should be spinning clockwise at a slow pace, this is how easy it can be to animate objects in Gamesalad! You don’t need fancy 3D animation software to make your games come to life!

Animated fans added to the scene.

Animated fans added to the scene.

To complete the fan object, drag a fan-cover actor onto the scene and place it directly on top of the fan you just placed. I like my fan-blade image reduced just slightly so it is totally covered by the fan-cover. Open the fan-blade actor editor and change its size to be 112 x 112. When you click Preview again you’ll see the image in your scene has changed size to match the actor prototype you just updated.

To complete the industrial setting we have started here, add two more fan elements to your scene to match the image above/left.

If you happened to drag the fan-covers into the scene before you dragged the fan-blades, your graphics may be layered wrong. If the blades are covering the covers, click the Scene button in the Inspector palette then click the Layers tab. Click the arrow next to Background to see all of the elements in your current scene.

The Layers palette in Gamesalad.

The Layers palette in Gamesalad.

In this tab you can control the order in which the elements of your scene are drawn. The items at the bottom of the list are drawn below the items at the top of the list. Right now the three fan-cover actors should be at the very top of the list, if they are not, drag them there and you’ll see they appear above the fan-blades now in your scene.

We’ll spend more time in the layers palette in other recipes. Click the Game button to return to the actors inspector.

Step Eight:

Okay now for some real fun, lets animate the main character!

Drag all of the player frames from the Player Frames folder inside the Gamesalad recipe 002 Source Files into the Images palette. There are frames already created for a falling animation, walking animations and standing still. Drag the image named player-standing to the Actors window inside the Inspector to create our main character. Open this new actor and make your attributes and behaviors window match this screen shoot.

Main character Attributes and base Behaviors.

Main character Attributes and base Behaviors.

This character set up pretty much matches the main character that was built in recipe 001, without the jump behavior.

Note that I have tagged all the brick actors and the plank actors as ‘floor’. This was covered in recipe 001 as well if you need a review.

Drag your new character into the scene in the ‘air’ above the two fans on the right side, and click Preview. The character should drop to the planks and be controllable. If it is not working correctly, re-check your settings against the screen grab above.

Now lets add the animation and bring this little guy to life!

The falling or standing animations for the main character.

The falling or standing animations for the main character.

Return to the actor editor and lets add a new rule, this rule is going to keep track of whether the character is falling or is standing on the ground. Click Creat Rule and make it read Actor receives eventoverlaps or collides – with – actor with tagfloors. Drag a Change Image behavior into the rules window and drag the player-standing image into the box you are presented with, or you can choose the name from the drop down menu as well. Now click the arrow next to Otherwise to open this portion of the window. Drag an Animate behavior into this area, and drag the two player-falling frames into this window. You can add more frames of animation here to make things run smoother, but for the purpose of this recipe I’ve kept all my frames to a minimum just to show the concepts. See the image above for how the new rule should look.

The main characters walking right and walking left behaviors.

The main characters walking right and walking left behaviors.

What this rule is saying is, if the player is standing on the ground show the player standing image, or if the player is not on the ground (it must be falling) play the falling animation. Click the Preview button again too see your handy-work. Pretty sweet right?!

Now lets add our walking animations. Back in the character editor, open the Move Right rule (you did name them didn’t you?) and drag an Animate Behavior under the Move Behavior that is already there. Drag the three frames of player-walking-right animation here. You can re-arrange them in the window if you don’t drag them in the correct order. Hold down the Option (alt) key and drag a copy of your second frame to make a fourth frame. Since the second and fourth frames are the same walking step you can just use a copy of the image instead of importing another duplicate image. Repeat this step for the Move Left Behavior using the player-walking-left images. Check the image above/left to see how your behaviors should look.

Now click Preview and take your fully animated character for a spin! Try out the walking left and right keys to make sure the animation works as expected and walk off the edges of the platforms toward the coin. The character should do it’s falling animation as it drops down a level. Pretty awesome right?!

Now we have just one little thing left to do, complete the goal of the level.

Step Nine:

Setting up the coin as a goal.

Setting up the coin as a goal.

Return to the characters actor editor and add another Rule to the list of behaviors. Set it up to say Actor receives eventoverlaps or collides – with – actor of typecoin01 (or whatever you named your coin). Now drag a Timer Behavior into this rule and set it up to say After1seconds, and click Run to Completion on. Now drag a Reset Scene Behavior into the timers window.

We’ll take a closer look at timers and what you can do with them in more detail in other recipes.

This will wait 1 second after the player touches the coin and reset the scene to do it all over again. When you are making a full game you would likely use a Change Scene behavior here to go to the next level.

Finishing off the coin as a goal.

Finishing off the coin as a goal.

Now open the editor for the coin and we’ll make it disappear when the player touches it. Add a Rule and set it to say Actor receives eventoverlaps or collides – with – actor of typeplayer-standing (or whatever you named your player). From the list of behaviors, drag a Destroy Behavior into the rules window.

Now give it another play through and pick up the coin, 1 second after you do the scene will reset and you can do it all again!

Great job! In this recipe you’ve learned the basics of images and animations in Gamesalad along with a few new behavior types. You imported images, learned some different settings to control how they are drawn and learned how to create several different kinds of animations.

Graphic Style:

You’ve probably noticed that the images I used in this recipe are several different kinds of styles. Cartoon for the character and the planks, 3D rendered for the coin, realistic for the fans and pixel art for the bricks. My goal here was to show you how you can create art in different packages and in different ways to use in Gamesalad. But when it comes to actually developing a game you really should pick a consistant art style and stick to it. All cartoon, all 3D rendered etc. If you mix art styles it can make a game look cheap and pieced together. Take a look at some successful games and you’ll see they use a consistant art style, Angry Birds is all cartoon, Minecraft is all pixel art, and Temple Run is all 3D rendered. There is no one art style that is successful, but whatever art style fits your game and your audience you should stick to it and use that same style for all the elements of your game from menus and interface to in-game actors.

You can download the Gamesalad source files here:

Here is a video overview of this tutorial:

That’s it for this recipe stayed tuned for more.

46 comments


  • Ryan

    hey
    Good Job Helping us!
    i want to ask you if i can take the source file for my game that i will publish?

    February 11, 2013
    • How do i get the graphics for my game

      August 29, 2015
      • Hi Glenn, you can purchase graphics from various online site, hire someone to create graphics for you or learn how to create them yourself, there are lots of great tutorials available online.

        October 12, 2015
  • Ryan

    if i can use*

    February 11, 2013
    • Hi Ryan,

      Yes you can use the source files anyway you want too in your own game. I do ask that if you use my images you give me a little credit on your credits screen, no need to give me credit if you copy and past parts of the code though. However please do not re-sell the images themselves on a stock art site or anything like that, they are meant to be free for use to anyone who wants them.

      February 11, 2013
  • Excellent

    May 8, 2013
  • Brian

    Resolution independence is not helping with the look of the brick-floor. I followed the tutorial and still the image is acting native. The size is just adjusting how much of the image is showing. Was wondering if there has to be some other setting set up?

    May 12, 2013
    • Hi Brian, when you say ‘resolution independence is not helping’, what do you mean exactly? Those brick tiles are created at 128 x 128 pixels so with resolution independence on they would come into GS at 64 x 64 pixels.

      May 13, 2013
  • Chris

    Not sure if this is mentioned in the written version but the order of the rules affects how the character animates, if the “fall” rule isn’t the last one listed then the character will not face the player when you stop pressing the left or right key, instead he faces the last left.

    Just thought I’d mention this cause I spent a while wondering why mine wasn’t facing the camera :)

    June 2, 2013
    • Hey Chris, good point! The order of the rules can make a difference in Gamesalad so you do have to be aware of that!

      June 3, 2013
  • Celine

    Hi Jamie,

    Thanks for posting up these Gamesalad tutorials, especially for someone like me whose got only a month-long semester break to learn everything in one shot quickly. I find it really easy to follow, even though I’m not a Mac user (Windows user heheh), but I managed to work my way around the different interfaces.

    Anyway, was wondering, how do you create all these graphics? Is it possible to use Microsoft Paint to make all these graphics? I’m not going for eye-catching graphics or anything, just something simple and usable for my future projects. Can you perhaps provide a small tutorial to demonstrate how you create and export your graphics in a usable form. Would appreciate you reply.

    Thanks!

    June 7, 2013
    • Hi Celine, I’m glad to hear you’re able to make sense out of these even though your not using the Mac version. I was afraid they might be hard to follow for Windows users.

      For my graphics I normally use a combination of Adobe Illustrator and Photoshop. I’m sure you can use Microsoft Paint but as a Mac user I’m not real familiar with that. The main thing to keep in mind as that you’ll want to save/export your images as .png files since that is the native format GS uses. I’d like to do some art tutorials in the future but if your under your semester break time contraint there are already some really great ones posted here by another GS user: http://2dgameartforprogrammers.blogspot.com/

      I highly recommend checking his tutorials out!

      June 7, 2013
  • Steve

    Thank you for the great tutorial! I am having trouble saving my PNGs in Photoshop without getting a white halo around the images. In Photoshop, I am using Save For Web, PNG-24, Transparency, and I still get the white halo when I drag the image into GameSalad. Do you have any suggestions? Thank you!

    June 18, 2013
    • Steve

      I’ll answer my own question for others who may be having this trouble. In the Windows version of GameSalad, the images do not show up as transparent without the halo. In the Mac version, it worked fine.
      Also, in the Windows version, if you import your graphics and they are 128×128 pixels, the graphics will stay that size even if you check Resolution Independence. But in the Mac version, they will be resized to 64×64 pixels.

      June 19, 2013
      • Hi Steve, thanks for the info on the Windows version. I wonder about the white halo, have you tried using the “defringe” option in Photoshop to shave off a few pixels from the edge of your graphics?

        June 20, 2013
  • Matthew

    Hey Jamie…! I just recently found your tutorials and i think they are fantastic! … I have a question. In my game I have a character whose idle position faces right or left…. when setting up a run cycle I figured out how to get the “Run Right” animation no problem because the default idle faces right. But when I have the character run Left it animates a little weird and then defaults to the “Idle Right” pic… So… How can I set it up so that after running left he idles left?

    September 5, 2013
    • Hi Matthew, If your left and right cycles are mirror images of each other I’d just set the value of self.Graphics.Flip Horizontally to true when facing left and back to false when facing right. This can be found in the expression editor for your character under the Graphics choices. Hope that helps!

      September 6, 2013
  • steve a

    Hi Jamie, Great tutorials! Extremely helpful!

    I am having a little trouble with actor tags. When i set the collide rule with floor in step eight, I select “actor with tag” and i get “no value”. I’ve explored GameSalad and still am not sure where to assign tags for the actors. please help!

    September 21, 2013
    • Hi Steve, if you are using the Macintosh version of GS you assign Tags in the Actors Tab. There is a column on the left that only lists “All”, at the bottom of that column is a Plus button, click it to add a new tag and drag your actor(s) to that tag to assign it.

      If you’re using the Windows version you can add your Tags right in the Actors window when you create the actors. If you are using Windows you might want to watch my comparison of the Macintosh and Windows interfaces here.

      September 24, 2013
  • Stephanie

    Hi Jamie,

    Your tutorials are awesome, and being a Windows user, your side-by-side comparison really helped make sense off the differences. However, I am faced with a difficult issue. I have set my character to run with an added animation, and a jump which features its own image/animation. When I jump straight up, the jump image/animation is perfect. However, when I try to jump in an arched way, like in your recipe’s 4 and 6 (or in Super Mario Bros.), the jump image/animation only lasts for a second, and then the character running animation starts back up while the actor is still falling back towards the floor. I have received some suggestions on how to fix this, by creating a new boolean variable called “onFloor” and creating some constraints to the new variable, but I am getting very confused. I have tried the suggestion I was given, and it didn’t work. So I don’t know if I am doing something wrong and just not understanding completely, or if it just isn’t possible in GameSalad with what I am attempting to achieve. How would you address this situation and could you possibly recommend a fix?

    October 2, 2013
    • Stephanie

      Ok, with your recipe 4 tutorial, I was able to figure out my problem, however, now I am faced with the issue of:

      If the actor jumps in a left or right direction, and the arrow key is let go in the middle of the jump, or if the actor gets hung up on a corner of a platform in front of it, the actors jump animation remains, instead of returning to the resting actor image when it is clearly on the platform.

      How do I fix this, because I am having a total brain fart on it and haven’t a clue.

      October 2, 2013
    • Stephanie

      I guess it was this tutorial that I followed to fix my first issue. My mistake. :-)

      October 2, 2013
      • Hi Stephanie, so have you got your jump working at this point or not? If you still need advice let me know.

        October 2, 2013
  • Stephanie

    Hey Jamie, Thanks so much for your help. What I am looking for is the jump animation technique of the Super Mario Bros. type jump. Ive been able to get them to jump left and right in the arc that I want, but I can’t seem to get the jumping animation to stop when I land on a platform, or if the button is no longer being pressed the animation just freezes in the position and falls towards the floor, and if it hits the edge or gets caught on a corner of a platform, the animation just freezes in the jumping animation and falls back towards the floor. How I have the general jump movement itself set up is exactly as you have it in recipe 4:

    ~General Jump Motion~
    If: Space Key is down AND self.JumpCount>0, then:
    change attribute: self.Jumping to true
    change attribute: self.JumpCount to self.JumpCount-1
    Change Image: Right Jump
    Animate Right Jump
    change attribute: self.motion.linearVelocity.x to 500

    And then this is what I have set for the Jumping Movement Rule
    If: self.Jumping is true

    Then:

    ~Right Movement Rule~
    If: Right Arrow Key is down, then:
    Change Image: Right Jump
    Animate Right Jump
    change attribute: self.motion.linearVelocity.x to 200

    ~Left Movement Rule~
    If: Left Arrow Key is down, then:
    Change Image: Right Jump
    Animate Right Jump
    change attribute: self.motion.linearVelocity.x to -200

    And then, my collision rules are as follows:

    ~General Collide Rule~
    Collide with Actor Tag: Floors

    ~Flag that I’ve touched Floors Rule~
    When: Actor Collides with Actor tag-Floors
    Then:
    -Change Attribute: self.Jumping to false
    -Change Attribute: self.JumpCount to 1

    And then my general Left and Right Movements are:

    ~General Right~
    If Right Arrow Key is up, then set self.motion.linearVelocity.x to 0
    Otherwise: Change image to right facing
    Animate walk
    change attribute: self.motion.linearVelocity.x to 200

    ~General Left~
    If Left Arrow Key is up, set self.motion.linearVelocity.x to 0
    Otherwise: Change image to left facing
    Animate left facing walk
    change attribute: self.motion.linearVelocity.x to -200

    Do I have something amiss here? Is there just too much going on, or is there something else I need to do to achieve the Mario style jump and land motion?

    October 2, 2013
    • Stephanie

      Well more or less how you have it. 😉

      October 2, 2013
    • Hi Stephanie, are you able to share your game with me? If I were able to play it maybe I could get a better feel for what is/is not working properly. If you’re interested in sharing you can email me at the link on the bottom of this page.

      October 17, 2013
  • Garrett

    I am having the same problem as another person that posted. When I bring in the images as actors, the X and Y size of them is 128×128. Upon resizing them to 64×64, they still appear too large and not properly scaling… Any ideas? I am on a newer version of course, and also on Windows. So maybe a different setting needs to be set? Thank you!

    October 16, 2013
    • Hi Garrett, So you’re creating your graphic at 128 x 128 and then sizing it in the game to 64 x 64, correct? Is it not showing in the game as 64 x 64 then or something else? You can set the physical size of an actor in it’s editor by adjusting the size settings. You can also adjust it’s size through Change Attribute Behaviors as well during gameplay. If this doesn’t help maybe you can show me some screen grabs of the problem.

      October 17, 2013
  • Josh

    Hey Jamie I have a question similar to Matthew’s? Well thanks to your to him I figured out how to make character Idle Left when the left key But when I hold it know it trys to do the right walk animation any ideas on how to fix it?

    November 13, 2013
  • Hi, On your step 8 screenshot in graphics and animation tutorial, character attributes are different in the windows version. Can we get a screenshot or the same tutorial using the windows version for the character attributes?
    I am stuck, there is not an – actor receives event attribute that i see. Any help appreciated.

    Thnx

    December 21, 2013
  • Hey!!

    can you please tell me what do you use to create does awsome pictures for your game.
    THank You

    January 24, 2014
    • Hi Zee, I typically use a combination of Adobe Photoshop and Illustrator to create my graphics.

      January 27, 2014
  • Adam Crawford

    When I make an image in GameSalad, then put it on an actor, the image goes on top of the actor instead of replacing it. Is there any way to fix it?

    June 18, 2014
  • suraj

    my actor is not colliding with the plank , and i cant figure out whats wrong please help me jamie.

    June 24, 2014
    • suraj

      fixed it. thanks for the tutorials though they are awsome :)

      June 25, 2014
      • I’m glad to hear you got it working and thank you! :)

        June 26, 2014
  • Hi Jamie,
    I was wondering if I could use your images from the recipe, as they are great. I will of course give you credit.
    Thanks,
    Eoin

    August 13, 2014
    • Hi Eolin, yes those images are free to use. You’ll note they are available for download separately if you’d like from the Free Stuff section of my website.

      August 24, 2014
  • Randy

    Jamie, how do I make an object (or actor or whatever) fall after a set amount of time. The concept of my game is to basically catch falling items. How do I go about doing this?

    September 28, 2014
    • Hi Randy, one way to do it would be to add a Timer Behavior to your actors and say something like:

      After 1 second (or whatever you want)

      Move actor (in the direction you want)

      Of course there lots of other ways to accomplish this too, it would depend on your exact game what the ‘best’ way is to do it. Hope that helps some.

      September 30, 2014
  • hey Jamie thanks for the wonderful tutorials…
    I have an animation using your Tutorial 004 motion technique.

    I have a couple questions. First I can’t seem to figure out a simple way to have the character run left (Besides just mirroring all the images and bringing it in as a separate animation) if theres a simple way to to that let me know.

    Also, When I jump my character and It lands while I’m holding left or right the image gets stuck on one of the animation frames until I jump and land again. Any way to fix that?

    Also… how would you recommend setting up a sort of advanced animation for say , running, jumping, falling, landing, idling?… I’m trying to get my character to play certain frames while running… but then play other frames while jumping… but play others while falling and landing. I’m sort of confused. Any help would be appreciated.

    March 28, 2015
    • oh wow! HAHA! I guess I asked this question a while ago and didn’t even realize it. Well I had figured out a ton of progress last year but then my hard drive failed and I lost everything for the last 6 years. So now I am starting over basically… I guess its great that I managed to find your tutorials twice!

      March 28, 2015
    • I managed to figure out the mirroring under the flip horizontal boolean attribute
      Thanks! I knew there was a way to do that!

      But I’m still trying to figure out how to have these animations and images not overwrite each other while jumping falling and landing… and it weirdly gets stuck on frames when more than one directional key is pushed at once… and I have to jump to reset it

      March 28, 2015
  • Tim

    Hi Jamie. I love your tutorials by the way and we use them in my Video Game and Programming classes. My students enjoy it. We are all running into an issue with the graphics simply not doing what you say they will in terms of Resolution Independence. We are using PCs by the way and not Macs which could very well be the problem but I thought I’d ask you first. What’s happening is when we bring the brick file over into the build area it is NOT resizing from 128 to 64. It’s staying 128 px by 128 px. Do you know why? Thanks

    September 8, 2016
    • Hi Tim, make sure you have the Resolution Independance option chosen. If that still does not work, it may be a Windows issue, I use the Mac version and things work as expected. If it still doesn’t work, keep in mind you can manually resize actors images in the actors attributes section by changing their size (height and width) manually. It’s a bit extra work but it has the same effect.

      September 8, 2016

Leave a comment


Name*

Email(will not be published)*

Website

Your comment*

Submit Comment

© Copyright Mostly Creative - Theme by Pexeto