Part 4 – First Steps – Graphics

Introduction to Mobile Game Development

Written July, 2015, by Rachel J. Morris

Creative Commons License Introduction to Mobile Game Development by Rachel J. Morris is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Based on a work at http://www.moosader.com/learn/ccckc/introduction-to-mobile-game-development/.

Return to the main page


Let’s get acquainted with how Gideros programs flow, and how we can load in art and audio, and draw or play them in our program.

In Gideros Studio, create a new project. Set the Location to wherever you would like. Make sure that the Create directory for project checkbox is selected.  Enter a project Name, then hit OK.

project

Everything will be blank at first – not even a place to write code. That is because our project is empty and we need to add the files we want to the project.  In the Project Explorer, right-click on the project (mine is “Super Basics“), and click Add New File…

newfile

Name the file main.lua and hit OK. Double-click the main.lua file to open it.

The file’s name could be anything, and you can have multiple source files in your project, but I usually make the starting point of my program named main.lua.

Let’s begin with a simple line of code and running it:

print( "Super Basic Hello!" )

Hit Run, and while your Gideros Runner will not display anything, the Output window at the bottom of Gideros Studio will show our message.

hello

You can use print statements to have messages appear throughout the run of your program, but only in the Output window. They don’t show up in your actual game. Therefore, they can be useful for light-weight debugging. You can see what steps your program is executing by adding a print statement at different points in your code.

Now, let’s work on some more interesting things…

Drawing an image

Before we draw an image in our program, we need to add the image to our project. Put an image file in your project folder from your Windows Explorer, or the equivalent for your operating system.

content

Then, in Gideros Studio, right-click on the project and click Add Existing Files… Select your image file and hit OK.

You might also right-click on the project and click New Folder to create an images folder, so your project can stay a bit cleaner.

images

Now, within our code, the first thing we will need to do is load the image file. This might be confusing at first, but Gideros has both a Texture class of objects, and a Bitmap class of objects.  The Texture is the raw image, loaded from your computer.  The Bitmap is more like a game sprite. It has a position and dimensions, and can be moved around.

A Bitmap should point to a Texture that it will be drawn as.  Many Bitmaps may point to the same Texture (for example, if you have the same enemy type show up multiple times), but you should not load the same image into multiple Textures. If you do this, your device is just loading the same .png or .jpg or whatever into memory over and over – it’s a waste.  One image gets one Texture.  One texture may be the assigned image of many Bitmaps.

To load a new Texture item, we use the Texture.new function:

texture_player = Texture.new( "images/girl4.png" )

Note that, I’m loading in “images/girl4.png” because I have an images folder within my Super Basics project. The path reflects where the image is in the project, not on your hard drive (The image is in “Super Basics/content/” on my hard drive).

Next, we need to make a Bitmap, and assign it a Texture:

player = Bitmap.new( texture_player )

And, finally, in order to have our Bitmap actually appear on the screen, we need to add it to the stage. We can make a Bitmap that isn’t drawn right away – we will add and remove it from the stage as-needed.

stage:addChild( player )

Now if we run the project, our Bitmap will show up in the top-left of the screen.

running

That was easy enough – Load in the image via Texture, create a player object via Bitmap, and display it on the screen via stage.

There are a lot more things that we can do with a Bitmap, so let’s try some things out.  You can also read the documentation to learn all about Bitmaps.

Set Position

We can place the Bitmap anywhere we would like, using the setPosition function.  setPosition takes two arguments – these can either be numbers or variables that are storing numbers.  The two arguments are the x-coordinate and the y-coordinate. There is also an optional third argument for the z-coordinate, but we are not going to worry about that for now.  You can set the sprite’s position like this:

player:setPosition( 100, 200 )

setPosition

You could detect where the player is tapping on the screen – some (x, y) coordinates – and move the Bitmap to that location.

Or, you could move the Bitmap across the screen on its own, a little at a time every cycle, by adding or subtracting from the x or y coordinate.

Or you could just set the position where the Bitmap starts at the beginning of your game.

Set Rotation

You can rotate the Bitmap in a circle with the setRotation function. The argument it takes is the angle (in degrees, from -360 to 360)

player:setRotation( 45 )

rotate

Set Scale

You can squish and stretch the Bitmap, both by width and by height, with the setScale function. It looks like this:

player:setScale( 4, 2 )

setScale

Set Alpha

You can also make your Bitmap semi-transparent with the setAlpha function. Passing in a value of 1 means 100% visible. Passing 0.5 means 50% visible.

player:setAlpha(  0.5 )

setAlpha

Can you think of other games that might have used these effects? One effect I can think of is the blinking of an enemy as it is about to fade away after being defeated!

Whee!

That’s the basics of using graphics. We will do more with this later, after we cover some other basics!


On the class GitHub page, there are two projects with sample code for graphics:

Also check out the related Gideros documentation:

Print Friendly