Scaling to Fit

This example scales the viewport to fit the device screen, reguardless of the aspect ratio. For a more thorough treatment, see the Scaling the Game Guide. Art delivered at 576x1024 has a ratio of 0.5625, a 1024 max texture size scaled up to 720x1280 has the same ratio. 576x1024 * 1.25 = 720x1280

Import the device module

import device;

Import the ImageView class

import ui.ImageView as ImageView;

Import the SpriteView class

import ui.SpriteView as SpriteView;

All screen coordinates are in this 576x1024 space, art should be delivered at this size.

var boundsWidth = 576,
    boundsHeight = 1024,
    baseWidth = boundsWidth,

baseHeight is calculated as 864.

    baseHeight = device.screen.height * (boundsWidth / device.screen.width),
    scale = device.screen.width / baseWidth,

right_boundry is used for screen wrapping.

    rightBoundary = baseWidth,
    leftBoundary = 0,
    vx = 0;

Class: GC.Application

exports = Class(GC.Application, function () {

  this.initUI = function () {

Scale the root view

    this.view.style.scale = scale;

Create the background image, its size is 576x1024.

    var background = new ImageView({
      superview: this.view,
      x: 0,
      y: 0,
      width: baseWidth,
      height: baseHeight,
      image: "resources/images/background.jpg",
      zIndex: 0
    });

Create a sprite using a directory full of images as frames.

    var sprite = new SpriteView({
      superview: background,
      x: baseWidth/2,
      y: baseHeight - 400,
      width: 300,
      height: 300,
      url: "resources/images/sdkBot/sdkBot",
      defaultAnimation: 'idle',
      autoStart: true,
      zIndex: 1
    });

The sprite’s movement is determined by its position relative to the mouse position relative.

    this.view.on('InputSelect', function (evt, pt) {

Localize the mouse position to sprite; this is one-level deep.

      var x0 = sprite.style.x + sprite.style.width/2,
          y0 = sprite.style.y + sprite.style.height/2;

If the sprite is clicked, stop movement and return to the idle animation.

      if (sprite.containsLocalPoint({x: pt.x - sprite.style.x, y: pt.y - sprite.style.y})) {
        if (sprite.isPlaying) {
          vx = 0;
          sprite.resetAnimation();
        }
      } else if (pt.x < sprite.style.x + sprite.style.width/2) {

Walk left

        vx = -2;
        sprite.stopAnimation();
        if (sprite.style.flipX) { sprite.style.flipX = false; }
        sprite.startAnimation('walk', {loop: true});

      } else {

Walk right

        vx = 2;
        sprite.stopAnimation();
        if (!sprite.style.flipX) { sprite.style.flipX = true; }
        sprite.startAnimation('walk', {loop: true});
      }
    });

Called every animation frame.

    GC.app.engine.on('Tick', function () {

Add horizontal movement

      sprite.style.x += vx;

Apply screen wrapping to the sprite.

      if (sprite.style.x > rightBoundary) {
        sprite.style.x = leftBoundary - sprite.style.width;
      } else if (sprite.style.x + sprite.style.width < leftBoundary) {
        sprite.style.x = rightBoundary;
      }
    });
  };
});