MATLAB Examples

Interactive Example

Contents

In this example, we will iteratively build up a Game that has a scrolling background, one Sprite with user interaction, and one reactive Sprite that has its own animations. This game may not be particularly entertaining or meaningful from a user-standpoint, but demonstrates several powerful concepts for the game developer to employ.

Create a Scrolling Background

Start a new Game and apply a background image:

G = SpriteKit.Game.instance('Title','Interactive Demo','Size',[600 320]);
bkg = SpriteKit.Background('demo/img/worldtopo.png');

Notice that the background is automatically tiled to fill the entire window. The Game size of [600 320] was predetermined so that we can scale the background to our liking and make it fit neatly in the window:

bkg.Scale = 1.8;

Define an action subfunction for gameplay to scroll the background by one pixel at a time:

function action
    bkg.scroll('right',1);
end

Create a Sprite

Setup the Sprite with 4 "seasons":

s = SpriteKit.Sprite('seasons');
s.initState('spring','demo/img/spring.png',true);
s.initState('summer','demo/img/summer.png',true);
s.initState('autumn','demo/img/autumn.png',true);
s.initState('winter','demo/img/winter.png',true);

s.Scale = 3;
s.State = 'spring';

Adding Simple User Interactions

Create a function to execute on each key press:

function keypressfcn(~,e)
    switch e.Key
        case 'a'
            s.State = 'spring';
        case 's'
            s.State = 'summer';
        case 'd'
            s.State = 'autumn';
        case 'f'
            s.State = 'winter';
    end
end

And hook this up to the Game through its onKeyPress property:

G.onKeyPress = @keypressfcn;

Now we have a Sprite on a scrolling background, whose State will change when the 'A','S','D', or 'F' key is pressed.

Using the Arrow Keys to Move the Sprite

Add a new pertinent property directly to the Sprite handle:

addprop(s,'accel');
s.accel = [0 0];

Add the following block inside of the action function so that it coasts to a smooth stop:

% decay to [0 0] accel
s.accel = s.accel*0.97; % lose %3 of its acceleration
L = s.Location;
L = L + s.accel;
s.Location = L;

and add on to the switch in keypressfcn as such for the initial impulse:

case 'uparrow'
    s.accel = s.accel + [0 10];
case 'downarrow'
    s.accel = s.accel - [0 10];
case 'leftarrow'
    s.accel = s.accel - [10 0];
case 'rightarrow'
    s.accel = s.accel + [10 0];

Now we can also move the Sprite using the arrow keys.

Bounce off of the Walls

Add borders to the window,

addBorders(G);

and account for these collisions in the action so that the sprite changes State and reflects off of the walls:

[collide,target] = SpriteKit.Physics.hasCollision(s);
if collide
    switch target.ID
        case 'topborder'
            s.State = 'spring';
            s.accel(2) = -abs(s.accel(2));
        case 'bottomborder'
            s.State = 'autumn';
            s.accel(2) = abs(s.accel(2));
        case 'leftborder'
            s.State = 'winter';
            s.accel(1) = abs(s.accel(1));
        case 'rightborder'
            s.State = 'summer';
            s.accel(1) = -abs(s.accel(1));
        end
    end
end

Adding another Sprite to Interact With

Setup another Sprite, which will be our "whack-a-mole":

mole = SpriteKit.Sprite('mole');
mole.initState('on','demo/img/membrane6.png',true);
mole.State = 'on';
mole.Location = [100 100];

Inside action, let's keep mole constantly rotating:

mole.Angle = mole.Angle-1;

And add another case to the collision switch to detect collisions on the mole. On contact, we'll relocate it to a random place in the Game.

case 'mole'
    newLoc(1) = randi([25 G.Size(1)-25]);
    newLoc(2) = randi([25 G.Size(2)-25]);
    mole.Location = newLoc;

Note that the above GIF may appear "choppy" compared to the actual MATLAB output.