Appcelerator Blog

The Leading Resource for All Things Mobile

Creating a Slot Machine Game with Platino

2 Flares 2 Flares ×

This blog post was written by Peach Pellen (@peachpellen) from Lanica and it’s about creating your first cross-platform mobile game using Titanium and Platino. Find more tutorials like this one at Lanica website.

This is a tutorial designed to help new game developers create a simple slot machine game using Lanica’s Platino Game Engine.

The end result will look something like this, and the process will teach you about creating a scene in Platino, spritesheets, basic Javascript, variables, touch events, displaying and updating text, and dragging objects.

The graphics

There are several places to source graphics for your games, both paid and free, however when prototyping the two sites I’ve found most useful are Openclipart and OpenGameArt.

All of the assets used in this tutorial are available on GitHub.

You will need:

– The background image, 480 x 320 pixels, or wider.

– A main image with spaces for the reels and a line for the lever.

– A ball to use as the handle on the lever

– A simple, 2 frame spritesheet to use as the spin indicator light

– Most importantly, a reels sheet, with frames for your spinning slot machine reels

What I’d suggest here is that you grab the assets from the GitHub project, but you follow this tutorial to create at least one spritesheet for yourself. Of course, you can also use the existing assets as a template to create your own graphics.

The reason it’s important to know how to create a spritesheet is because sprites are arguably the most important part of any 2D game. If you see an animation on screen, chances are it’s a spritesheet. A character who can run, jump, attack, etc. is one example. Another is what we are doing here, using an animation to show slot machine reels spinning.

The images below show a smaller spritesheet, first as standard, and then showing how each frame is numbered –

As you can see, a standard spritesheet in Platino starts at frame 0 and plays from left to right.

The sheet above shows a black grid, which lots of people use to help them position everything. You can do this by creating a new layer in Photoshop, or your chosen program, so that you can easily remove it when done.

To create your reel sheet, the most important graphic for this game, you should select some images from one of the sites linked to above (I like OpenClipart for this sort of thing) and choose 5 different images to use on your reels. In my case, I’ve chosen a cherry, bell, 7, watermelon and the standard bar.

A spritesheet is created one frame at a time. In this case, we want a sheet with 14 frames, and each frame is 116 pixels wide and 338 pixels high, so the spritesheet is actually 812 x 676 pixels.

Here is what the first frame of the animation looks like on its own;

And here it is in a complete sheet, to give you a point of reference;

Before proceeding with creating your first game in Platino, you will need each of these assets. If you are struggling with creating a sprite sheet in Photoshop, (or your tool of choice,) you can use my spritesheet in its own layer, then simply add your own images over the top and delete the original.

Creating sprites can be very fiddly, because being even 1 pixel off can make a noticeable visual difference when the animation is playing, so it’s important to play close attention as you position everything.

If you aren’t comfortable using an image editing program to put your sheets together, you also have the option of using Animo Sprites, which will allow you to import all your frames and then position them automatically for you.

Writing the code

Now that you have your assets ready, we will write some code to show all of these visual elements on the screen, as well as add some text for the coin count. We will also set the game to run in landscape orientation, (“sideways” rather than upright,) and load some sounds.

Before you start writing any code, you will need to make sure you have the Platino modules installed. If you haven’t done that yet, there’s an installation video tutorial here.

Once it is installed you will be able to select it in the module section in tiapp.xml.

Next, you will create a folder under your new app’s “Resource” directory, called “graphics”, and place the assets created in the previous section inside it.

Now, you are ready to start writing some code inside app.js!

We begin with this block of code;

// require Platino
var platino = require("co.lanica.platino");
// Create a new window and make the app landscape
var gameWindow = Ti.UI.createWindow({ orientationModes: [Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT] });
// create game view
var game = platino.createGameView();
// create a game scene
var scene = platino.createScene();
//add your scene to game view

As you can see from the comments, we first require Platino, then create a window called “gameWindow” and make sure the app is set to tun in landscape mode only.

We then create a game view to hold our scenes, called “game”.

Finally, we create our first scene, simply called “scene”. In most cases your scenes would have names such as “menu”, “level 1″, “options”, etc. but our slot machine game is only going to use one scene so naming is not as important.

From here, we move on to declaring some variables, like so;

// User is allowed to spin
var canSpin = true;
// Variable for the original Y of the lever
var oY;
// Variable for keeping track of coins
var coins = 100;
// Load sounds to play when lever is pulled and when coins are won
var slotSound  = Ti.Media.createSound({url:'sounds/slots.mp3'});
var coinSound  = Ti.Media.createSound({url:'sounds/coins.m4a'});

Note how I am trying to comment each section? That’s a really good habit to get into. If you keep good commenting habits you will be able to look back at your code in 6 months and actually be able to follow it.

Here we define “canSpin”, which lets us know whether or not the user is allowed to spin, making sure they can’t start a new spin before the reels have stopped.

We also have “oY”, which I named such because I was too lazy to write out “originalY”. It is for the original Y position of the lever, so we can return it to the right spot after the user has pulled it.

Next is “coins”, where we start the user off with 100 coins to spend.

Finally, we load two sounds, one for spinning the reels and one for winning coins. These sounds come from App FX, a comprehensive collection of 4,000 royalty-free sound elements, effects and audio cues designed by Blastwave FX. (More about this at the bottom of this post.)

Now we’re got our variables set up and our sounds loaded, we can start adding our graphics to the game!

// Background
var bg = platino.createSprite({image:"graphics/bg.png"});
// Reel spritesheets
var reel1 = platino.createSpriteSheet({image:"graphics/reelSpin.png", x:28, y:5, height:338, width:116});
var reel2 = platino.createSpriteSheet({image:"graphics/reelSpin.png", x:144, y:5, height:338, width:116});
var reel3 = platino.createSpriteSheet({image:"graphics/reelSpin.png", x:260, y:5, height:338, width:116});
// Dimmers at top and bottom of screen
var borders = platino.createSprite({image:"graphics/mask.png"});
// Add the lever
var lever = platino.createSprite({image:"graphics/ball.png", x:404, y:50});
// Add coin text
var coinText = platino.createTextSprite({text:"Coins: "+coins, fontSize:20, width:150, height:50, x:25,y:10});
// Add spin text and light
var spinText = platino.createTextSprite({text:"Spin:", fontSize:20, width:150, height:50, x:300, y:10});
var spinLight = platino.createSpriteSheet({image:"graphics/greenLight.png", width:35, height:35, x:350, y:5});

This block of code first creates “bg”, the background image, then adds it to the scene so it will display when the game is loaded. You will use scene.add() for every visual element of your game. We add the background first so that it will be behind all our other graphics.

Next we add all three reels – but rather than using platino.createSprite(), we use platino.createSpriteSheet(). The difference is that unlike the background, the reels are created from spritesheets so we can animate them. All animated sprites are created using platino.createSpriteSheet().

We then add our borders/mask image the same way we added the background, along with the lever.

After that, we add some text. The text is created using platino.createTextSprite(), then setting the text itself, size and position, then adding it to the scene as we do with all graphics.

Then we add another sprite using the platino.createSpriteSheet() API we used on the reels. This is for a light to indicate whether or not the user is allowed to spin, so it doesn’t animate per se, but this gives us an easy way to quickly switch between the “off” and “on” light images when desired.

// List of slot frames with complete images
var frames = [0,2,4,6,8,10,12];
// Add transform for the lever
var transform  = platino.createTransform();
transform.duration = 1000;
transform.y = 50;

Here, we create another variable called “frames”. It contains the numbers, 0, 2, 4, etc. up to 12. This is to help us keep track of which frames of the reel sprites are OK to stop on. (We can’t have a reel stop halfway between images, that would be cheating.)

We then create a transform using platino.createTransform(). In this case, we name it “transform”, although you could call it anything you want. We set the duration as 1000 milliseconds, or 1 second, and the Y coordinate of the transform as 50. This means that whatever sprite we apply this to will move to a Y of 50 over a period of 1 second. In this case, we are creating it to return the lever to its resting position after it has been pulled.

 game.addEventListener("onload", function(e) {
    game.TARGET_SCREEN = {width:480, height:320};
  // set screen size for your game (TARGET_SCREEN size)
        var screenScale = game.size.height / game.TARGET_SCREEN.height;
        game.screen = {width:game.size.width / screenScale, height:game.size.height / screenScale};
        game.touchScaleX = game.screen.width  / game.size.width;
        game.touchScaleY = game.screen.height / game.size.height;
    // Start the game
// Add objects and open game window
gameWindow.add(game);{fullscreen:true, navBarHidden:true});

Now, this final piece of code will allow you to run your game in the simulator. It won’t have any interactivity until we add functions, but it will load the app and show all of the visuals we added above. It will also resize everything to display correctly on whatever device you are using. (The default size, game.TARGET_SCREEN, is set to 480 wide by 320 high.)

Please keep an eye out for the next part of this post, coming next week, where we will finish the game by adding coins, spinning the reels and playing our sound effects, which were provided by Pro Sound Effects.

If you’re looking for sound effects for your own games, they currently have a special offer available;

Is your App like a silent film? Use sound elements and audio cues to improve user experience, interface navigation, overall engagement and simple entertainment! App FX is a comprehensive collection of 4,000 royalty-free sound elements, effects and audio cues designed by Blastwave FX. Give your App the gift of sound! Special introductory pricing of $99 per seat (through 12/31/13, reg. $199) includes perpetual, unlimited usage in your apps.

2 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 2 Email -- 2 Flares ×

1 Comment

  1. Frangeris Peguero

    Very interesting post, this is so useful, thanks a lot, #tryingthis

Comments are closed.

Sign up for updates!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
2 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 2 Email -- 2 Flares ×