Interactive Example

Create a Scrolling Background
Create a Sprite
Adding Simple User Interactions
Using the Arrow Keys to Move the Sprite
Bounce off of the Walls
Adding another Sprite to Interact With

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.