Skip to content

Commit

Permalink
close #13 + fix ImageManager multiple load
Browse files Browse the repository at this point in the history
  • Loading branch information
@Inateno
Inateno committed Nov 5, 2017
1 parent 20ea535 commit 108c0f3
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 39 deletions.
22 changes: 15 additions & 7 deletions js/engine/MainLoop.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,17 @@ define( [
, 'DE.GameObject'
, 'PIXI'
, 'DE.Events'
, 'DE.TextRenderer'
, 'DE.SpriteRenderer'
],
function(
Time
, gamepad
, GameObject
, PIXI
, Events
, TextRenderer
, SpriteRenderer
)
{
var MainLoop = new function()
Expand All @@ -22,17 +26,15 @@ function(
this.createLoader = function()
{
this.loader = new GameObject( {
renderers: [
new PIXI.Text( "Loading...", new PIXI.TextStyle( {
renderer: new TextRenderer(
"Loading...", { textStyle: {
fill : 'white',
fontSize : 35,
fontFamily : 'Snippet, Monaco, monospace',
strokeThickness: 1,
align : "center"
} ) )
// ,new SpriteRenderer( { spriteName: "loader" } )
// loader
]
} }
)
} );
this.loader.renderer.y += 150;
Events.on( 'ImageManager-pool-progress', function( poolName, progression )
Expand All @@ -43,7 +45,12 @@ function(
{
MainLoop.loader.renderer.text = "100%";
} );
}
};

this.updateLoaderImage = function( loader )
{
this.loader.addRenderer( new SpriteRenderer( { spriteName: loader[ 0 ], scale: loader[ 2 ].scale } ) );
};

this.loop = function()
{
Expand All @@ -65,6 +72,7 @@ function(
{
MainLoop.loader.x = j.pixiRenderer.width * 0.5;
MainLoop.loader.y = j.pixiRenderer.height * 0.5;
MainLoop.loader.update( Time.currentTime );
j.directRender( MainLoop.loader );
}

Expand Down
18 changes: 18 additions & 0 deletions js/engine/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,24 @@ function(

DE.ImageManager.init( params.images.baseUrl, params.images.pools );

DE.emit( "change-debug", DE.config.DEBUG, DE.config.DEBUG_LEVEL );

// load the loader sprite image
params.loader = params.loader || {};
var loader = [
"loader"
, params.loader.url || "loader.png"
, {
totalFrame : params.loader.totalFrame || 16
,interval : params.loader.interval || 45
,animated : params.loader.animated !== undefined ? params.loader.animated : true
,scale : params.loader.scale || 1
}
];
DE.Events.once( "ImageManager-loader-loaded", function() { DE.MainLoop.updateLoaderImage( loader ); } );

DE.ImageManager.load( loader );

params.onReady();

DE.emit( "change-debug", DE.config.DEBUG, DE.config.DEBUG_LEVEL );
Expand Down
117 changes: 86 additions & 31 deletions js/engine/utils/ImageManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@
@Inateno
*/

/**
* An audio tool over howler, provide some simple middleware + direct access to howler sounds
* @namespace Audio
*/
/**
* An advanced resource loader. Can load pool of resources, or unload it.
* Handle images, ready to use spritesImages, json sheets, json particles files or custom files
Expand Down Expand Up @@ -46,11 +42,18 @@ function( PIXI, config, Events )
this.baseUrl = "img/";

this.spritesData = {}; // store data for SpriteRenderer
this._waitingPools = []; // cannot load multiple pool in // have to queue
this._waitingPools = []; // cannot load multiple resources / pools // have to queue
this._waitingSolo = []; // cannot load multiple resources / pools // have to queue

// when you load multiple times resources with the same loader
//, it goes over 100%, this "fix" this bug
this._nLoads = 0

/**
* main init function, create pool and set baseUrl in an object, used to load things later
* call ImageManager.loadPool( poolName ) to start loading things
* @protected
* @memberOf ImageManager
*/
this.init = function( baseUrl, pools )
{
Expand Down Expand Up @@ -98,43 +101,54 @@ function( PIXI, config, Events )

/**
* load a complete pool in memory
* @public
* @memberOf ImageManager
*/
this.loadPool = function( poolName, customEventName )
this.loadPool = function( poolName, customEventName, resetLoader )
{
var self = this;

if ( this.pools[ poolName ].length == 0 )
{
if ( this.pools[ poolName ].length == 0 ) {
setTimeout( function()
{
self.onComplete( poolName, customEventName );
self._onComplete( poolName, customEventName );
}, 500 );
return;
}

if ( PIXI.loader.loading ) {
console.log( "WARN ImageManager: PIXI loader is already loading stuff, this call has been queued" );
// console.log( "WARN ImageManager: PIXI loader is already loading stuff, this call has been queued" );
this._waitingPools.push( { name: poolName, customEventName: customEventName } );
return;
}

if ( resetLoader ) {
PIXI.loader.reset();
this._nLoads = 0
}

PIXI.loader.add( this.pools[ poolName ] )
.on( "progress", function( loader, resource ) {
self.onProgress( poolName, loader, customEventName );
self._onProgress( poolName, loader, customEventName );
} )
.load( function() {

PIXI.loader.off( "progress", function( loader, resource ) {
self.onProgress( poolName, loader, customEventName );
} )
self.onComplete( poolName, customEventName );
self._onProgress( poolName, loader, customEventName );
} );
self._onComplete( poolName, customEventName );
} );
};

this.onProgress = function( poolName, loader, customEventName )
/**
* onProgress event
* @private
* @memberOf ImageManager
*/
this._onProgress = function( poolName, loader, customEventName )
{
Events.trigger( "ImageManager-pool-progress"
, poolName
, loader.progress.toString().slice( 0, 5 ) );
, ( loader.progress - 100 * this._nLoads ).toString().slice( 0, 5 ) );
Events.trigger( "ImageManager-pool-" + poolName + "-progress"
, poolName
, loader.progress.toString().slice( 0, 5 ) );
Expand All @@ -143,43 +157,84 @@ function( PIXI, config, Events )
, loader.progress.toString().slice( 0, 5 ) );
};

this.onComplete = function( poolName, customEventName )
/**
* when a load is completed
* @private
* @memberOf ImageManager
*/
this._onComplete = function( poolName, customEventName )
{
console.log( "ImageManager load complete: ", poolName );
Events.trigger( "ImageManager-pool-complete", poolName );
Events.trigger( "ImageManager-pool-" + poolName + "-loaded" );
Events.trigger( "ImageManager-" + customEventName + "-loaded" );

++this._nLoads;

// dequeue waiting pools here
if ( this._waitingPools.length ) {
var pool = this._waitingPools.shift();
this.loadPool( pool.name, pool.customEventName );
}
else if ( this._waitingSolo.length ) {
var solo = this._waitingSolo.shift();
this.load( solo );
}
};

/**
* load a simple object
* load one resource
* @public
* @memberOf ImageManager
*/
this.load = function( data )
{
if ( data.totalFrame )
{
this.spritesData[ data.name ] = {
totalLine : data.totalLine || 1
,totalFrame: data.totalFrame || 1
,startFrame: data.startFrame || 0
,endFrame : data.endFrame || data.totalFrame || 1
,interval : data.interval || 16
,reversed : data.reversed || false
,loop : data.loop !== undefined ? data.loop : true
,animated : data.animated !== undefined ? data.animated : true
var dataLoad = data;

if ( typeof data === "string" ) {}
else if ( data.length && data.push ) {

if ( !data[ 2 ] ) {
data[ 2 ] = {};
}

this.spritesData[ data[ 0 ] ] = {
totalLine : data[ 2 ].totalLine || 1
,totalFrame : data[ 2 ].totalFrame || 1
,startFrame : data[ 2 ].startFrame || 0
,endFrame : data[ 2 ].endFrame || data[ 2 ].totalFrame || 1
,interval : data[ 2 ].interval || 16
,reversed : data[ 2 ].reversed || false
,loop : data[ 2 ].loop !== undefined ? data[ 2 ].loop : true
,animated : data[ 2 ].animated !== undefined ? data[ 2 ].animated : true
,pingPongMode: data[ 2 ].pingPongMode !== undefined ? data[ 2 ].pingPongMode : false
};

dataLoad = { name: data[ 0 ], url: data[ 1 ] + "?v" + config.VERSION };
}

if ( PIXI.loader.loading ) {
// console.log( "WARN ImageManager: PIXI loader is already loading stuff, this call has been queued" );
this._waitingSolo.push( dataLoad );
return;
}
PIXI.loader.add( data ).load( this.onComplete );

var self = this;
PIXI.loader.add( dataLoad ).load( function()
{
// PIXI.loader.reset();

PIXI.loader.off( "progress", function( loader, resource ) {
self._onProgress( poolName, loader, customEventName );
} );
self._onComplete( null, dataLoad.name ? dataLoad.name : dataLoad );
} );
};

/**
* unload a complete pool (clean memory)
* @public
* @memberOf ImageManager
*/
this.unloadPool = function( poolName )
{
Expand Down
10 changes: 9 additions & 1 deletion js/game1/Game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ function( DE )
this.z = 10;
}
}
for ( var i = 0, a, b, c, d, e, f; i < 150; i += 5 )
for ( var i = 0, a, b, c, d, e, f, g; i < 150; i += 5 )
{
a = new DE.GameObject( { _staticPosition: true, x: 100, y: 100, z: i * 0.1, renderer: new DE.RectRenderer( 40, 70, "0x" + i + "DCCFC", { lineStyle: [ 4, "0xFF3300", 1 ], fill: true, x: -20, y: -35 } ) } )
a.scroller = scroller;
Expand All @@ -211,6 +211,14 @@ function( DE )
f.scroller = scroller;
f.addAutomatism( "scroller", "scroller" );
scene.add( a, b, c, d, e, f );

if ( i % 10 == 0 ) {
g = new DE.GameObject( { _staticPosition: true, x: 960, y: 980, zindex: 10, z: i * 0.1, renderer: new DE.RectRenderer( 10, 30, "0xFFFFFF", { x: -5, y: -15 } ) } )
g.scroller = scroller;
g.addAutomatism( "scroller", "scroller" );

scene.add( g );
}
}

scene.add( Game.ship );
Expand Down
1 change: 1 addition & 0 deletions js/game1/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,5 +55,6 @@ function( DE, Game, inputs, audios, dictionary, images, achievements )
, 'about': { 'gameName': "Engine Dev Game 1", "namespace": "noting", 'author': "Inateno", 'gameVersion': "0.1" }
, 'saveModel': { "nShoots": 0 }, 'saveIgnoreVersion': true
, 'ignoreNebula': true
// , 'loader': { interval: 10, scale: 2 }
} );
} );

0 comments on commit 108c0f3

Please sign in to comment.