Playground.js

Out-of-box access to essentials like mouse, keyboard, sound and well designed architecture that you can expand to your needs.

Need instant help? Join our official slack

Core feature

Playground lets you establish a new application and bind essential events in one shot.

var app = playground({

  width: 640,           /* force width */
  height: 480,          /* force height */
  scale: 2,             /* force scale */
  smoothing: false,     /* antialiasing */

  /* silently preload assets before main loader */

  preload: function() { },

  /* assets from preloader available, push some more for main loader */

  create: function() { },

  /* called when main loader has finished  - you want to setState here */

  ready: function() { },

  /* called after container/window has been resized */

  resize: function() { },

  /* called each frame to update logic */

  step: function(dt) { },

  /* called each frame to update rendering */

  render: function(dt) { },

  /* states related events (called only for application */

  createstate: function() { },
  enterstate: function() { },
  leavestate: function() { },

  /* keyboard events */

  keydown: function(data) { },
  keyup: function(data) { },

  /* pointer events (mouse + touch) */
  
  pointerdown: function(data) { },
  pointerup: function(data) { },
  pointermove: function(data) { },
  pointerwheel: function(data) { },

  /* mouse trap */
  
  mousedown: function(data) { },
  mouseup: function(data) { },
  mousemove: function(data) { },

  /* finger trap */

  touchstart: function(data) { },
  touchend: function(data) { },
  touchmove: function(data) { },

  /* gamepad events */

  gamepaddown: function(data) { },
  gamepadup: function(data) { },
  gamepadmove: function(data) { }

});

Loaders

create: function() {
  this.loadData("maps", "units");
  this.loadImages("soldier", "tank", "base");
  this.loadSounds("fire", "medikit", "music");
}

States

ready: function() {
  this.setState(Game);
}

Read more in documentation.