mirror of
https://github.com/photonstorm/phaser
synced 2024-11-23 21:24:09 +00:00
Adding in Image parsing.
This commit is contained in:
parent
5073489a1c
commit
393791706e
3 changed files with 31 additions and 42 deletions
|
@ -9,8 +9,6 @@ var BaseLoader = function ()
|
||||||
{
|
{
|
||||||
// To finish the loader ...
|
// To finish the loader ...
|
||||||
//
|
//
|
||||||
// 1) Image Tag loader
|
|
||||||
// 2) Events (or Signals?) for the various stages
|
|
||||||
// 3) Progress update
|
// 3) Progress update
|
||||||
// 4) JSON loader
|
// 4) JSON loader
|
||||||
// 5) XML Loader
|
// 5) XML Loader
|
||||||
|
@ -19,6 +17,8 @@ var BaseLoader = function ()
|
||||||
|
|
||||||
this.events = new EventDispatcher();
|
this.events = new EventDispatcher();
|
||||||
|
|
||||||
|
this.forceImageTags = false;
|
||||||
|
|
||||||
// Move to a 'setURL' method?
|
// Move to a 'setURL' method?
|
||||||
this.baseURL = '';
|
this.baseURL = '';
|
||||||
this.path = '';
|
this.path = '';
|
||||||
|
@ -230,22 +230,9 @@ BaseLoader.prototype = {
|
||||||
this.events.dispatch(new Event.LOADER_COMPLETE_EVENT(this));
|
this.events.dispatch(new Event.LOADER_COMPLETE_EVENT(this));
|
||||||
},
|
},
|
||||||
|
|
||||||
getLoadedFiles (group = '', output = []) {
|
getLoadedFiles: function ()
|
||||||
|
{
|
||||||
var output = [];
|
return this.storage.slice();
|
||||||
|
|
||||||
// Return an array of all files that have state = COMPLETE (which means loaded + processed)
|
|
||||||
|
|
||||||
for (let file of this.storage)
|
|
||||||
{
|
|
||||||
if (file.state === FILE.COMPLETE && file.tag === group && (type !== '' && file.type === type))
|
|
||||||
{
|
|
||||||
output.push(file);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return output;
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
reset: function ()
|
reset: function ()
|
||||||
|
|
|
@ -57,11 +57,12 @@ File.prototype = {
|
||||||
// ProgressEvent
|
// ProgressEvent
|
||||||
onLoad: function (event)
|
onLoad: function (event)
|
||||||
{
|
{
|
||||||
console.log('image loaded');
|
// console.log('image loaded');
|
||||||
console.log(event);
|
// console.log(event);
|
||||||
|
|
||||||
// this.onStateChange(LOADING);
|
// this.onStateChange(LOADING);
|
||||||
|
|
||||||
|
this.process();
|
||||||
|
|
||||||
this.resetXHR();
|
this.resetXHR();
|
||||||
|
|
||||||
this.callback(this, true);
|
this.callback(this, true);
|
||||||
|
@ -69,8 +70,8 @@ File.prototype = {
|
||||||
|
|
||||||
onError: function (event)
|
onError: function (event)
|
||||||
{
|
{
|
||||||
console.log('image error');
|
// console.log('image error');
|
||||||
console.log(event);
|
// console.log(event);
|
||||||
|
|
||||||
this.resetXHR();
|
this.resetXHR();
|
||||||
|
|
||||||
|
@ -87,14 +88,16 @@ File.prototype = {
|
||||||
console.log(this.percentComplete + '% (' + this.bytesLoaded + ' bytes)');
|
console.log(this.percentComplete + '% (' + this.bytesLoaded + ' bytes)');
|
||||||
},
|
},
|
||||||
|
|
||||||
onProcess: function ()
|
process: function ()
|
||||||
{
|
{
|
||||||
console.log('process the image');
|
// Override by an extending class
|
||||||
},
|
},
|
||||||
|
|
||||||
onComplete: function ()
|
onComplete: function ()
|
||||||
{
|
{
|
||||||
console.log('image completed and added to the loader store');
|
console.log('File completed, ready to add to the Loader store');
|
||||||
|
|
||||||
|
this.state = CONST.FILE_COMPLETE;
|
||||||
},
|
},
|
||||||
|
|
||||||
// Called by the Loader, starts the actual file downloading
|
// Called by the Loader, starts the actual file downloading
|
||||||
|
@ -106,8 +109,6 @@ File.prototype = {
|
||||||
|
|
||||||
this.src = GetURL(this, baseURL);
|
this.src = GetURL(this, baseURL);
|
||||||
|
|
||||||
console.log('LOADING2', this.src);
|
|
||||||
|
|
||||||
this.xhrLoader = XHRLoader(this, globalXHR);
|
this.xhrLoader = XHRLoader(this, globalXHR);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,22 +1,14 @@
|
||||||
// var FILE_CONST = require('../const');
|
|
||||||
|
|
||||||
|
var CONST = require('../const');
|
||||||
var File = require('../File');
|
var File = require('../File');
|
||||||
|
|
||||||
// Different images based on device-pixel ratio
|
|
||||||
// And maybe on screen resolution breakpoints
|
|
||||||
|
|
||||||
// 2 options - can either return the File object, so they can listen to it specifically
|
|
||||||
// Or can return the Loader, so they can chain calls?
|
|
||||||
|
|
||||||
var ImageFile = function (key, url, path)
|
var ImageFile = function (key, url, path)
|
||||||
{
|
{
|
||||||
if (path === undefined) { path = ''; }
|
if (path === undefined) { path = ''; }
|
||||||
|
|
||||||
if (!key)
|
if (!key)
|
||||||
{
|
{
|
||||||
console.warn('Loader: You tried to load an Image, but no key was given');
|
throw new Error('Error calling \'Loader.image\' invalid key provided.');
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!url)
|
if (!url)
|
||||||
|
@ -28,17 +20,26 @@ var ImageFile = function (key, url, path)
|
||||||
url = path.concat(url);
|
url = path.concat(url);
|
||||||
}
|
}
|
||||||
|
|
||||||
var file = new File('image', key, url, 'arraybuffer');
|
File.call(this, 'image', key, url, 'blob');
|
||||||
|
|
||||||
return file;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
ImageFile.prototype = Object.create(File.prototype);
|
ImageFile.prototype = Object.create(File.prototype);
|
||||||
ImageFile.prototype.constructor = ImageFile;
|
ImageFile.prototype.constructor = ImageFile;
|
||||||
|
|
||||||
ImageFile.prototype.onProcess = function ()
|
ImageFile.prototype.process = function ()
|
||||||
{
|
{
|
||||||
|
this.state = CONST.FILE_PROCESSING;
|
||||||
|
|
||||||
|
this.data = new Image();
|
||||||
|
|
||||||
|
this.data.onload = function ()
|
||||||
|
{
|
||||||
|
window.URL.revokeObjectURL(this.src);
|
||||||
|
|
||||||
|
this.onComplete();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.data.src = window.URL.createObjectURL(this.xhrLoader.response);
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = ImageFile;
|
module.exports = ImageFile;
|
||||||
|
|
Loading…
Reference in a new issue