Bitmaps, Text buttons and Image buttons

How to select targeted device

When starting to build any mobile game, you have to think about platform or a specific device you’re willing to create the game for. Thankfully, Moscrif IDE allows you to select any from the supported devices easily from the top bar.

Because Moscrif is cross-platform, the goal always should be to make the game available for every supported device. Because the displays and resolutions are so different, some process of image resizing is always needed.

For the sake of this tutorial, we are going to work only with the iPhone 4 with 640x940 screen.

When a new device hits the market, it is always added to the IDE allowing you to always develop for the newest products.

Running the project

Once the desired platform along with the device is selected, you can easily run or publish the project with the big IDE’s buttons in the top left corner.

Working with bitmaps

User experience always matters and there is probably nothing more appealing than pretty graphics. Moscrif uses Bitmap class to handle the static images and currently supports the most common picture formats .jpg and .png with alpha channel support allowing transparency.

Loading the image into memory

The picture has to be loaded into memory before we are able to work with it. This can be easily done with a single line of code:

var pic = Bitmap.fromFile("app://moscrif_logo.png");

The ‘app’ prefix is used to interlink our project with files from the project’s directory.

Drawing the picture

To draw the picture onto the screen, drawBitmap method of Canvas class is used taking 3 arguments:

1.     
2. the loaded image    
3. left position on the screen    
4. top position on the screen

There is also fourth parameter, that is optional and null by default. This is used for the paint used to draw the bitmap.

canvas.drawBitmap(this.pic, System.width / 2 - this.pic.width / 2, System.height / 2 - this.pic.height / 2);

To draw the bitmap in the middle of the screen no matter of the targeted device, simple calculation is used to always get the right top and left arguments.

Setting the background

To use the loaded picture as a background, the above function can be easily used. However, there is more advanced method how to work with backgrounds and this includes working with the Scene base class.

Even though same canvas.drawBitmat function is used at the end, the usage of scenes allows us to use transitions and more advanced methods to handle graphics.

// background image loaded from file
var background = Bitmap.fromFile("app://background.jpg"); // resize backgorund image to always fit the selected device
this._background = MyScene.background;
this._background = this._background.resize(System.width, System.height);

Text buttons

Text buttons are the most basic and simple way how to interact with the user. The TextButton base class allows displaying simple text on the screen in a form of a button without the need of working with graphics.

The usage of text buttons is really straightforward. The object works with parameters like the string you want to display, colour, font-size, position or the behaviour when the button is clicked.

In order to work with text buttons, Paint object has to be defined first to hold the attributes like style or colour to draw the text and textButton base class has to be included in the project.

After an instance of text button object is created, we simply add it onto the scene.

var btnQuit = new TextButton({text: "First text button", paint: textBold, x:System.width/2,y:250});
scene.add(btnQuit);

Controlling the click event

What would any button without some behaviour when it is actually clicked be? Adding basically anything you want to respond to the click event is more than straightforward.

btnQuit.onClick = function() {
           MyGame.quit();
        };

When out Quit button is clicked, the quit method of our game object is called to quit it.

Image buttons

Image buttons are yet other option how to interact with the user. These buttons provide advanced functionality when compared to basic text buttons such as the clicking affect that is usually associated with some graphics change.

Before we can start using the image buttons, the base class has to be included into our project first.

// base class for image buttons include "lib://game2d/imageButton.ms"

Creating the image button

Some neat graphics change, or animation when the click takes the place are the reason why Image buttons are more popular than pure Text buttons.

The constructor takes several arguments, as follows:

1.     
2. the image    
3. x axis (for positioning the button on the screen)    
4. y axis (for positioning the button on the screen)    
5. frame width    
6. frame height

var button = new ImageButton({image: image_btn, x:System.width/2, y: 500, frameWidth: image_btn.width, frameHeight: image_btn.height / 2});

What are the frames?

By frame just understand a part of the image. In Moscrif, you can easily divide the image into 2 parts (frames). The first frame is used when the image is displayed on screen, when the second is used when the button is clicked.

Controlling the click event

The click event is handled the same way as clicking on the Text button is. The OnClick function is filled with all the code responsible for the actions taken after the button is clicked.

button.onClick = function()
        {
            // here comes your code
        }

Summary

After reading this tutorial you should be able to use simple graphics along with text and image buttons in your mobile game. All these building elements are crucial to attract the user and interact with him.

We hope you are getting more familiar with the Moscrif SDK and we are looking forward to provide more advanced tutorials.