Upgrading Games From 0.3 to 0.4

yanshcherbakovatredspace edited this page Jun 15, 2016 · 9 revisions

Upgrading Games Built in 0.3 to 0.4

Step 0

Prior to conducting any work to upgrade a game, take a moment to go through the changes that were introduced in 0.4. This will provide a foundational understanding of what steps will be required.

In some cases, not all steps will be applicable to the particular game. Some games may require additional steps, depending on which modules/methods are used and how they were affected/changed in 0.4.

Overview of the changes in version 0.4

This SpringRoll update overhauls the loading system to make it easier to load multiple assets, to provide better more consistent asset caching, to provide convenience loading for complex asset types, and to converge the Task Module, async functions, AssetManagers and the Loader. Other major changes:

  • SpringRoll and SpringRoll's fork of PixiJS updated to v3.0.7 of PixiJS.
  • Animator has been reworked - Animator no longer lives in a display, but displays register classes to be animated. springroll.easeljs.Animator and springroll.pixi.Animator have been deprecated.
  • The asset loading and panel scaling of springroll.easeljs.BaseState has been moved to springroll.State.
  • Created a new module pixi-spine which contains all the Spine related animation tasks for Pixi.js


  • Introduced better warn messaging for deprecated methods and properties
  • Added load method to the Application, this method can be used to load an individual asset (e.g., app.load(url, callback); or multiple assets (e.g., app.load(assetsArray, callback);) (core)
  • Added unload method to the Application to unload an asset or assets by name (e.g., app.unload('AssetName') or multiple assets app.unload('AssetName1', 'AssetName2')) (core)
  • Added getCache method to the Application to get an asset from the loader cache by name (e.g., app.getCache('AssetName')) (core)
  • Added setTimeout and setInterval to Application, which mirror the window methods by the same name except that they respect the paused state of the Application running. Both return a springroll.DelayedCall object. (core)
  • Added springroll.pixi.AdvancedMovieClip, which is a class that uses BitmapMovieClip data to make a display object for animation solely with Animator. (pixi-animation)
  • Added cacheByRect to EaselJS Container. (easeljs-display)
  • Added preload and scaling properties to springroll.State (states)
  • Added parallel events for the existing methods exit, enter, enterDone, exitStart, cancel on springroll.State, also added loading and loaded events (states)
  • Added the Animation module, which adds the Animator to the Application as the animator property. (animation)
  • Added a wildcard animation name, "*" for playing an entire timeline through Animator. (animation,easeljs-animation,pixi-animation).
  • Added waitForLoadingComplete boolean to StateManager causing onTransitionIn to not play until onTransitionLoading is on the last frame of it's loop (states)
  • Added progress event to Application for listening to the preloading process (core)
  • Added progress event to State and StateManager for listening to the preload process (states)
  • Added a new Application option responsive, which is a boolean that defaults to false. If this option is enabled, the resizing resizes the <canvas>'s width and height attributes (previously the default behavior). If the option is disabled, the resizing resizes the CSS width and height properties (new default behavior). Adding the UI module will automatically enable responsive. (core, ui)


  • Displays now extend springroll.EventDispatcher and dispatch events enabled, enabled, disabled, visibility, visible, hidden (core, easeljs-display, pixi-display, native-display)
  • Deprecated EventDispatcher.mixIn, use mixin(obj, EventDispatcher); instead (core)
  • Removed the Task module, consider using app.load to download multiple assets asynchronously (core)
  • Removed the EaselJS Utilities library (easeljs-utils)
  • Removed the AssetManager. Functionality has been replaced by Application's load, unload and getCache methods. (easeljs-ui, pixi-ui)
  • Introduced method to HintsPlayer called funcDone() which is the manually call when a func hint has been completed (hints)
  • Changed the API for springroll.CombinedCallback to make it easier to use. It is now springroll.CombinedCallback.create(actualCallback, expectedNumberOfCalls). (core)
  • The first parameter for DragManager should now be the display being used, not the Stage. Additionally, it can be omitted (new DragManager(startCallback, endCallback)) to have it use Application.instance.display. (easeljs-ui, pixi-ui)
  • The Pixi Button's button callbacks have been replaced with events, using Pixi v3's event system. springroll.pixi.Button now has BUTTON_PRESS, BUTTON_OVER, and BUTTON_OUT static properties that are the event values. (pixi-ui)
  • The Animator no longer supports Pixi MovieClips, instead supporting springroll.pixi.AdvancedMovieClip. (pixi-animation)
  • All Pixi loading functionality has been replaced with tasks for Applications load function.
  • Moved some functionality from SpringRoll's fork of Pixi to mixins in Pixi Display module. (pixi-display)
  • gotoAndCacheByBounds on Easeljs MovieClip now prefers frameBounds if available. (easeljs-display)
  • gotoAndCacheByBounds and cacheByBounds no longer have a default buffer of 15px, and now have an optional scale parameter. (easeljs-display)
  • Deprecated manifest option on the springroll.easeljs.BaseState constructor and replaced with preload option in the parent class springroll.State (easeljs-display)
  • Renamed assetsLoaded to preloaded on springroll.easeljs.BaseState (easeljs-display)
  • Symbols with the name of background on BasePanels aren't automatically added to the ScaleManager. Also the methods addBackground and removeBackground have been deprecated. Instead background images should have a scaling property of "cover-image", e.g., app.scaling.addItem(background, 'cover-image') (ui, easeljs-states)
  • Deprecated the method names pauseSound, unpauseSound, and unpauseAll on Sound and replaced with pause, resume, and resumeAll (sound)


  • Upgraded to PIXI v3 (pixi-display, pixi-animation, pixi-ui)
  • Fix Animator issue when calling update after/concurrently with destroy (easeljs-animation)
  • States Module: fixed Transition 'Loading' sequence (states)
  • Fixed issues with VOPlayer (sound)
  • Fixed iOS Safari issue where arguments.length is an iterable property in strict mode (core)
  • Fixed ScaleManager not calculating item bounds and margins correctly for flipped (scale < 0) items. (ui)

Step 1

In your IDE or text editor, open the file bower.json and point springroll to 0.4 so your bower looks like the example below:

	"name": "project",
	"version": "0.0.1",
	"dependencies": {
		"normalize-less": "*",
		"springroll": "~0.4",
		"bellhop": "*",
		"soundjs": "https://github.com/SpringRoll/SoundJS.git",
		"pixi.js": "https://github.com/SpringRoll/pixi.js.git"
	"ignore": [

If you use npm-check-updates, you may run the following cli commands in sequence:

ncu -u -m bower;
bower update;

This command will also update other bower packages to the latest version. If you're using Springroll with plugins such as Keyboard updating using npm-check-updates is easier.