Skip to content

Commit b0c853a

Browse files
photonstormphotonstorm
committed
Added in normal map support
1 parent 9b7d6d0 commit b0c853a

5 files changed

Lines changed: 150 additions & 84 deletions

File tree

‎src/loader/filetypes/AtlasJSONFile.js‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ var MultiFile = require('../MultiFile.js');
1515
/**
1616
* @classdesc
1717
* An Atlas JSON File.
18+
* https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-for-phaser3?source=photonstorm
1819
*
1920
* @class AtlasJSONFile
2021
* @extends Phaser.Loader.MultiFile
@@ -51,26 +52,28 @@ var AtlasJSONFile = new Class({
5152
var image = new ImageFile(loader, key, textureURL, textureXhrSettings);
5253
var data = new JSONFile(loader, key, atlasURL, atlasXhrSettings);
5354

54-
MultiFile.call(this, loader, 'atlasjson', key, [ image, data ]);
55+
if (image.linkFile)
56+
{
57+
// Image has a normal map
58+
MultiFile.call(this, loader, 'atlasjson', key, [ image, data, image.linkFile ]);
59+
}
60+
else
61+
{
62+
MultiFile.call(this, loader, 'atlasjson', key, [ image, data ]);
63+
}
5564
},
5665

5766
addToCache: function ()
5867
{
5968
if (this.isReadyToProcess())
6069
{
61-
var fileA = this.files[0];
62-
var fileB = this.files[1];
63-
64-
if (fileA.type === 'image')
65-
{
66-
this.loader.textureManager.addAtlas(fileA.key, fileA.data, fileB.data);
67-
fileB.addToCache();
68-
}
69-
else
70-
{
71-
this.loader.textureManager.addAtlas(fileB.key, fileB.data, fileA.data);
72-
fileA.addToCache();
73-
}
70+
var image = this.files[0];
71+
var json = this.files[1];
72+
var normalMap = (this.files[2]) ? this.files[2].data : null;
73+
74+
this.loader.textureManager.addAtlas(image.key, image.data, json.data, normalMap);
75+
76+
json.addToCache();
7477

7578
this.complete = true;
7679
}

‎src/loader/filetypes/AtlasXMLFile.js‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -49,26 +49,28 @@ var AtlasXMLFile = new Class({
4949
var image = new ImageFile(loader, key, textureURL, textureXhrSettings);
5050
var data = new XMLFile(loader, key, atlasURL, atlasXhrSettings);
5151

52-
MultiFile.call(this, loader, 'atlasxml', key, [ image, data ]);
52+
if (image.linkFile)
53+
{
54+
// Image has a normal map
55+
MultiFile.call(this, loader, 'atlasxml', key, [ image, data, image.linkFile ]);
56+
}
57+
else
58+
{
59+
MultiFile.call(this, loader, 'atlasxml', key, [ image, data ]);
60+
}
5361
},
5462

5563
addToCache: function ()
5664
{
5765
if (this.isReadyToProcess())
5866
{
59-
var fileA = this.files[0];
60-
var fileB = this.files[1];
61-
62-
if (fileA.type === 'image')
63-
{
64-
this.loader.textureManager.addAtlasXML(fileA.key, fileA.data, fileB.data);
65-
fileB.addToCache();
66-
}
67-
else
68-
{
69-
this.loader.textureManager.addAtlasXML(fileB.key, fileB.data, fileA.data);
70-
fileA.addToCache();
71-
}
67+
var image = this.files[0];
68+
var xml = this.files[1];
69+
var normalMap = (this.files[2]) ? this.files[2].data : null;
70+
71+
this.loader.textureManager.addAtlasXML(image.key, image.data, xml.data, normalMap);
72+
73+
xml.addToCache();
7274

7375
this.complete = true;
7476
}

‎src/loader/filetypes/ImageFile.js‎

Lines changed: 40 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,23 +36,23 @@ var ImageFile = new Class({
3636
function ImageFile (loader, key, url, xhrSettings, frameConfig)
3737
{
3838
var extension = 'png';
39-
var normalMap;
39+
var normalMapURL;
4040

4141
if (IsPlainObject(key))
4242
{
4343
var config = key;
4444

4545
key = GetFastValue(config, 'key');
4646
url = GetFastValue(config, 'url');
47-
normalMap = GetFastValue(config, 'normalMap');
47+
normalMapURL = GetFastValue(config, 'normalMap');
4848
xhrSettings = GetFastValue(config, 'xhrSettings');
4949
extension = GetFastValue(config, 'extension', extension);
5050
frameConfig = GetFastValue(config, 'frameConfig');
5151
}
5252

5353
if (Array.isArray(url))
5454
{
55-
normalMap = url[1];
55+
normalMapURL = url[1];
5656
url = url[0];
5757
}
5858

@@ -70,9 +70,15 @@ var ImageFile = new Class({
7070
File.call(this, loader, fileConfig);
7171

7272
// Do we have a normal map to load as well?
73-
if (normalMap)
73+
if (normalMapURL)
7474
{
75-
// var
75+
var normalMap = new ImageFile(loader, key, normalMapURL, xhrSettings, frameConfig);
76+
77+
normalMap.type = 'normalMap';
78+
79+
this.setLink(normalMap);
80+
81+
loader.addFile(normalMap);
7682
}
7783
},
7884

@@ -105,9 +111,36 @@ var ImageFile = new Class({
105111

106112
addToCache: function ()
107113
{
108-
var texture = this.cache.addImage(this.key, this.data);
114+
console.log('addToCache', this.key, this.type);
109115

110-
this.pendingDestroy(texture);
116+
var texture;
117+
118+
if (this.linkFile && this.linkFile.state === CONST.FILE_COMPLETE)
119+
{
120+
console.log('linkFile ready');
121+
122+
// Both files are ready
123+
var fileA = this;
124+
var fileB = this.linkFile;
125+
126+
if (fileA.type === 'image')
127+
{
128+
texture = this.cache.addImage(fileA.key, fileA.data, fileB.data);
129+
}
130+
else
131+
{
132+
texture = this.cache.addImage(fileB.key, fileB.data, fileA.data);
133+
}
134+
135+
fileA.pendingDestroy(texture);
136+
fileB.pendingDestroy(texture);
137+
}
138+
else if (!this.linkFile)
139+
{
140+
texture = this.cache.addImage(this.key, this.data);
141+
142+
this.pendingDestroy(texture);
143+
}
111144
}
112145

113146
});

‎src/loader/filetypes/UnityAtlasFile.js‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -49,26 +49,28 @@ var UnityAtlasFile = new Class({
4949
var image = new ImageFile(loader, key, textureURL, textureXhrSettings);
5050
var data = new TextFile(loader, key, atlasURL, atlasXhrSettings);
5151

52-
MultiFile.call(this, loader, 'unityatlas', key, [ image, data ]);
52+
if (image.linkFile)
53+
{
54+
// Image has a normal map
55+
MultiFile.call(this, loader, 'unityatlas', key, [ image, data, image.linkFile ]);
56+
}
57+
else
58+
{
59+
MultiFile.call(this, loader, 'unityatlas', key, [ image, data ]);
60+
}
5361
},
5462

5563
addToCache: function ()
5664
{
5765
if (this.failed === 0 && !this.complete)
5866
{
59-
var fileA = this.files[0];
60-
var fileB = this.files[1];
61-
62-
if (fileA.type === 'image')
63-
{
64-
this.loader.textureManager.addUnityAtlas(fileA.key, fileA.data, fileB.data);
65-
fileB.addToCache();
66-
}
67-
else
68-
{
69-
this.loader.textureManager.addUnityAtlas(fileB.key, fileB.data, fileA.data);
70-
fileA.addToCache();
71-
}
67+
var image = this.files[0];
68+
var text = this.files[1];
69+
var normalMap = (this.files[2]) ? this.files[2].data : null;
70+
71+
this.loader.textureManager.addUnityAtlas(image.key, image.data, text.data, normalMap);
72+
73+
text.addToCache();
7274

7375
this.complete = true;
7476
}

‎src/textures/TextureManager.js‎

Lines changed: 61 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -385,19 +385,20 @@ var TextureManager = new Class({
385385
* @param {string} key - The unique string-based key of the Texture.
386386
* @param {HTMLImageElement} source - The source Image element.
387387
* @param {object} data - The Texture Atlas data.
388+
* @param {HTMLImageElement} [dataSource] - An optional data Image element.
388389
*
389390
* @return {?Phaser.Textures.Texture} The Texture that was created, or `null` if the key is already in use.
390391
*/
391-
addAtlas: function (key, source, data)
392+
addAtlas: function (key, source, data, dataSource)
392393
{
393394
// New Texture Packer format?
394395
if (Array.isArray(data.textures) || Array.isArray(data.frames))
395396
{
396-
return this.addAtlasJSONArray(key, source, data);
397+
return this.addAtlasJSONArray(key, source, data, dataSource);
397398
}
398399
else
399400
{
400-
return this.addAtlasJSONHash(key, source, data);
401+
return this.addAtlasJSONHash(key, source, data, dataSource);
401402
}
402403
},
403404

@@ -412,17 +413,19 @@ var TextureManager = new Class({
412413
* @param {string} key - The unique string-based key of the Texture.
413414
* @param {(HTMLImageElement|HTMLImageElement[])} source - The source Image element/s.
414415
* @param {(object|object[])} data - The Texture Atlas data/s.
416+
* @param {HTMLImageElement} [dataSource] - An optional data Image element.
415417
*
416418
* @return {?Phaser.Textures.Texture} The Texture that was created, or `null` if the key is already in use.
417419
*/
418-
addAtlasJSONArray: function (key, source, data)
420+
addAtlasJSONArray: function (key, source, data, dataSource)
419421
{
420422
var texture = null;
421423

422424
if (this.checkKey(key))
423425
{
424426
texture = this.create(key, source);
425427

428+
// Multi-Atlas?
426429
if (Array.isArray(data))
427430
{
428431
var singleAtlasFile = (data.length === 1); // multi-pack with one atlas file for all images
@@ -440,6 +443,11 @@ var TextureManager = new Class({
440443
Parser.JSONArray(texture, 0, data);
441444
}
442445

446+
if (dataSource)
447+
{
448+
texture.setDataSource(dataSource);
449+
}
450+
443451
this.emit('addtexture', key, texture);
444452
}
445453

@@ -457,10 +465,11 @@ var TextureManager = new Class({
457465
* @param {string} key - The unique string-based key of the Texture.
458466
* @param {HTMLImageElement} source - The source Image element.
459467
* @param {object} data - The Texture Atlas data.
468+
* @param {HTMLImageElement} [dataSource] - An optional data Image element.
460469
*
461470
* @return {?Phaser.Textures.Texture} The Texture that was created, or `null` if the key is already in use.
462471
*/
463-
addAtlasJSONHash: function (key, source, data)
472+
addAtlasJSONHash: function (key, source, data, dataSource)
464473
{
465474
var texture = null;
466475

@@ -480,6 +489,46 @@ var TextureManager = new Class({
480489
Parser.JSONHash(texture, 0, data);
481490
}
482491

492+
if (dataSource)
493+
{
494+
texture.setDataSource(dataSource);
495+
}
496+
497+
this.emit('addtexture', key, texture);
498+
}
499+
500+
return texture;
501+
},
502+
503+
/**
504+
* Adds a Texture Atlas to this Texture Manager, where the atlas data is given
505+
* in the XML format.
506+
*
507+
* @method Phaser.Textures.TextureManager#addAtlasXML
508+
* @since 3.7.0
509+
*
510+
* @param {string} key - The unique string-based key of the Texture.
511+
* @param {HTMLImageElement} source - The source Image element.
512+
* @param {object} data - The Texture Atlas XML data.
513+
* @param {HTMLImageElement} [dataSource] - An optional data Image element.
514+
*
515+
* @return {?Phaser.Textures.Texture} The Texture that was created, or `null` if the key is already in use.
516+
*/
517+
addAtlasXML: function (key, source, data, dataSource)
518+
{
519+
var texture = null;
520+
521+
if (this.checkKey(key))
522+
{
523+
texture = this.create(key, source);
524+
525+
Parser.AtlasXML(texture, 0, data);
526+
527+
if (dataSource)
528+
{
529+
texture.setDataSource(dataSource);
530+
}
531+
483532
this.emit('addtexture', key, texture);
484533
}
485534

@@ -496,10 +545,11 @@ var TextureManager = new Class({
496545
* @param {string} key - The unique string-based key of the Texture.
497546
* @param {HTMLImageElement} source - The source Image element.
498547
* @param {object} data - The Texture Atlas data.
548+
* @param {HTMLImageElement} [dataSource] - An optional data Image element.
499549
*
500550
* @return {?Phaser.Textures.Texture} The Texture that was created, or `null` if the key is already in use.
501551
*/
502-
addUnityAtlas: function (key, source, data)
552+
addUnityAtlas: function (key, source, data, dataSource)
503553
{
504554
var texture = null;
505555

@@ -509,6 +559,11 @@ var TextureManager = new Class({
509559

510560
Parser.UnityYAML(texture, 0, data);
511561

562+
if (dataSource)
563+
{
564+
texture.setDataSource(dataSource);
565+
}
566+
512567
this.emit('addtexture', key, texture);
513568
}
514569

@@ -625,35 +680,6 @@ var TextureManager = new Class({
625680
}
626681
},
627682

628-
/**
629-
* Adds a Texture Atlas to this Texture Manager, where the atlas data is given
630-
* in the XML format.
631-
*
632-
* @method Phaser.Textures.TextureManager#addAtlasXML
633-
* @since 3.7.0
634-
*
635-
* @param {string} key - The unique string-based key of the Texture.
636-
* @param {HTMLImageElement} source - The source Image element.
637-
* @param {object} data - The Texture Atlas XML data.
638-
*
639-
* @return {?Phaser.Textures.Texture} The Texture that was created, or `null` if the key is already in use.
640-
*/
641-
addAtlasXML: function (key, source, data)
642-
{
643-
var texture = null;
644-
645-
if (this.checkKey(key))
646-
{
647-
texture = this.create(key, source);
648-
649-
Parser.AtlasXML(texture, 0, data);
650-
651-
this.emit('addtexture', key, texture);
652-
}
653-
654-
return texture;
655-
},
656-
657683
/**
658684
* Creates a new Texture using the given source and dimensions.
659685
*

0 commit comments

Comments
 (0)