TexturePacker Atlas loader extension

A place to post your custom classes and engine extensions to share with the community.

TexturePacker Atlas loader extension

Postby StuartTresadern » Wed Dec 04, 2013 12:21 am

A simple class extension to allow the loading of Atlas Textures from TexturePacker. Currently only supports basic textures, no rotation, trimming. I will probably update this in the future to support at least rotation.
Usage:

1) Include the TexturePackerAtlas.js in your gameClasses folder and don’t forget to reference it in your ClientConfig.js.

2) Create your texture atlas in TexturePacker and export the image atlas (probably best in most cases as PNG) and the image data. Select JSON (ARRAY) as the output format. Copy both files into your assets folder.

3) Edit the exported TexturePacker data file and add var anynameyourwant = to the beginning of the file. (Names should be unique and not used within your current project).

For example:
Code: Select all
{"frames": [


Would become

Code: Select all
var treeAtlasPack = {"frames": [


4) In your app you can now load the textures:

Code: Select all
mytexture1 = new TexturePackerAtlas('treeAtlasPack','./assets/images/trees.png','./assets/images/trees.js');


The initializer takes 3 parameters,

Atlas name, this is the name you assigned to the texture data in step 3
imageUrl, the url to the image
dataUrl, the url to the texture data

You can load multiple atlas files simply by giving each data file a unique variable name.

5) You can either attach the texture to an entity by cell index or by using the cell Id, the filenames are coverted from the TexturePacker Json file are used to populate the cell Id values.

Code: Select all
Var ent1 = new IgeEntity()
   .id(‘sprite1’)
   .depth(1)
   .texture(mytexture1)
   .cell(1)  // note 1 based array of textures , or use .cellById(‘tree (11)’)
        ...

Example: we can reference the first sprite in the Atlas texture using
Code: Select all
.cell(1)
or
Code: Select all
.cellById(‘tree (10)’)


Code: Select all
var treeAtlasPack = {"frames": [

{
   "filename": "tree (10)",
   "frame": {"x":0,"y":0,"w":496,"h":615},
   "rotated": false,
   "trimmed": false,
   "spriteSourceSize": {"x":0,"y":0,"w":496,"h":615},
   "sourceSize": {"w":496,"h":615}
},
Attachments
TexturePackerAtlas.zip
Texture Packer Atlas Extension
(1.76 KiB) Downloaded 835 times
User avatar
StuartTresadern
 
Posts: 59
Joined: Sun Dec 01, 2013 5:23 pm
Location: Germany

Re: TexturePacker Atlas loader extension

Postby rob » Wed Dec 04, 2013 6:16 pm

Awesome! Nice one mate :)
CEO & Lead Developer
Irrelon Software Limited
http://www.isogenicengine.com
User avatar
rob
Site Admin
 
Posts: 316
Joined: Tue Oct 22, 2013 5:08 pm

Re: TexturePacker Atlas loader extension

Postby robaldred » Wed Feb 05, 2014 10:46 am

Hey Stuart, I just wanted to say thanks for sharing this. Looks brilliant I think I'll be using it in my next game.
I don't work for Irrelon. All comments are my own.
I would strongly encourage anyone building production projects with Isogenic to buy a premium licence, it costs very little and will help towards continued development of the engine. Irrelon have spent thousands of hours developing this wonderful platform with many features found in AAA game engine.
User avatar
robaldred
 
Posts: 243
Joined: Wed Oct 23, 2013 8:09 pm
Location: Manchester, England

Re: TexturePacker Atlas loader extension

Postby robaldred » Tue Apr 15, 2014 9:45 am

Hey guys, just a quick one.
I've refactored TexturePackerAtlas at bit.

I experienced issues where the image would be loaded but the data was not yet processed and the game would initialise causing errors with calls to cellById
where the cell ids were not yet available.
This is more apparently on slower connections.

I have adjusted the load order so that the data is loaded as part of the _loadImage method, instead of the _textureLoaded method.
The _textureLoaded method now only processes the TexturePacker data once both data and image are loaded.

This means that it hooks into the loading events properly and doesn't overrun.

Thanks
Rob
Attachments
TexturePackerAtlas.js.zip
Refactored class to improvement loading
(1.79 KiB) Downloaded 799 times
I don't work for Irrelon. All comments are my own.
I would strongly encourage anyone building production projects with Isogenic to buy a premium licence, it costs very little and will help towards continued development of the engine. Irrelon have spent thousands of hours developing this wonderful platform with many features found in AAA game engine.
User avatar
robaldred
 
Posts: 243
Joined: Wed Oct 23, 2013 8:09 pm
Location: Manchester, England

Re: TexturePacker Atlas loader extension

Postby StuartTresadern » Tue Apr 15, 2014 9:48 am

Thanks Rob, was on my to do list :)
User avatar
StuartTresadern
 
Posts: 59
Joined: Sun Dec 01, 2013 5:23 pm
Location: Germany

Re: TexturePacker Atlas loader extension

Postby HumptyDumpty » Wed Jun 04, 2014 11:24 am

Hi guys,

This class looks awesome - unfortunately I'm having a few issues implementing it (I started using isogenic this morning so I 'm quite new to the whole thing) I am getting the following error message:

Uncaught IGE *error* [TexturePackerAtlas] : URL-based Tiled data is only available client-side. If you want to load Tiled map data on the server please include the map file in your ServerConfig.js file and then specify the map's data object instead of the URL.

It's accusing me of trying to load Tiled map data on the server? :O I sincerely have no clue what is going on here?
HumptyDumpty
 
Posts: 5
Joined: Wed Jun 04, 2014 11:00 am

Re: TexturePacker Atlas loader extension

Postby StuartTresadern » Wed Jun 04, 2014 11:33 am

Hi, can you post some code so we can see what you are trying to do ?
User avatar
StuartTresadern
 
Posts: 59
Joined: Sun Dec 01, 2013 5:23 pm
Location: Germany

Re: TexturePacker Atlas loader extension

Postby robaldred » Wed Jun 04, 2014 12:19 pm

This would only happen if ige.isClient is false.

The isClient flag is determined in the core engine.
It does a basic check for node.

Code: Select all
this.isServer = (typeof(module) !== 'undefined' && typeof(module.exports) !== 'undefined');
this.isClient = !this.isServer;


If this happens client side you might have something else setting the global var module, which is causing a conflict.

If you are server side, you need to pass the data as an object to the TP loader.
Please have a look at example 13.7-server-load-tiled, that shows how you load assets like maps and tile data server side, by loading it as part of the ServerConfig.js and passing the object to the initialiser.

Note: Textures shouldn't be loaded server side. Infact the IgeTexture class will stop you from doing so.
I don't work for Irrelon. All comments are my own.
I would strongly encourage anyone building production projects with Isogenic to buy a premium licence, it costs very little and will help towards continued development of the engine. Irrelon have spent thousands of hours developing this wonderful platform with many features found in AAA game engine.
User avatar
robaldred
 
Posts: 243
Joined: Wed Oct 23, 2013 8:09 pm
Location: Manchester, England

Re: TexturePacker Atlas loader extension

Postby HumptyDumpty » Wed Jun 04, 2014 1:12 pm

Right sorry about the very vague question, I just wasn't sure what code in particular to post, I looked through the TexturePackerAtlas code and noticed the ige.isclient but I am running client side (haven't even written a server.js yet) - which is what confused me,

you might have something else setting the global var module, which is causing a conflict.
could you elaborate on that ? where would I have screwed this up

What I have done is start with the isoimages example and then modify that to include new art, etc. adding different menus, event listeners, making it non-isometric and generally moving along quite smoothly.

I have been through the index.js, clientconfig, client and I can't figure out where I might have screwed that up.

In the loadTextures method I have the following:

Code: Select all
loadTextures: function() {

        this.gameTexture.map = new IgeTexture('./assets/themap.jpg');
        uiAtlas = new TexturePackerAtlas('uiAtlas', './assets/uiAtlas.png', './assets/uiAtlas.js');
        elAtlas = new TexturePackerAtlas('elAtlas', './assets/elAtlas.png', './assets/elAtlas.js');

    },


Other information I can add is I don't have a server.js/serverconfig because I was writing everything completely client-side (I was just experimenting with the engine)

I changed the if(ige.isclient) to if(true) to see what would happen if I forced it to run:

Code: Select all
IGE *log* [IgeEngine:ige] : Texture image (./assets/themap.jpg) loaded successfully IgeClass.js:101
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:63342/Sites/undefined./assets/uiAtlas.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:63342/Sites/undefined./assets/elAtlas.js
IGE *log* [IgeEngine:ige] : All textures have loaded IgeClass.js:101
IGE *log* [IgeInputComponent] : Setting up input event listeners... IgeClass.js:101
IGE *log* [IgeEngine:ige] : Starting engine... IgeClass.js:101
IGE *log* [IgeEngine:ige] : Engine started IgeClass.js:101
Stack:     at IgeClass.log (http://localhost:63342/Sites/ige/engine/core/IgeClass.js:83:31)
 ----     at IgeClass.IgeObject.extend.cellById (http://localhost:63342/Sites/ige/engine/core/IgeEntity.js:856:10)
 ----     at IgeClass.extend.setupUi (http://localhost:63342/Sites/client.js:179:14)
 ----     at http://localhost:63342/Sites/client.js:32:26
 ----     at IgeClass.IgeEntity.extend.start (http://localhost:63342/Sites/ige/engine/core/IgeEngine.js:913:6)
 ----     at IgeClass.<anonymous> (http://localhost:63342/Sites/client.js:24:8)
 ----     at IgeClass.extend.emit (http://localhost:63342/Sites/ige/engine/core/IgeEventingClass.js:234:29) IgeClass.js:83
IGE *error* [IgeUiRadioButton:uiSelect] : Error encountered, stopping engine to prevent console spamming... IgeClass.js:91
IGE *log* [IgeEngine:ige] : Stopping engine... IgeClass.js:101
Uncaught IGE *error* [IgeUiRadioButton:uiSelect] : Could not find the cell id "uiSelect" in the assigned entity texture a4310b30bad720000, please check your sprite sheet (texture) cell definition to ensure the cell id "uiSelect" has been assigned to a cell! IgeClass.js:96


and that's the error log, it's loading the the textures that don't use the atlas/spritesheet fine but not the TextureMapAtlas.

Another thing that's bothering me is if I go into any of the examples and put the following code in:
Code: Select all
if (ige.isClient) {
            ige.log("Client");
        }else { ige.log("Server");}


It always logs server to the console. So for some reason all the examples are running client-side ? There's obviously something much more fundamental that I am missing about Client side versus Server side code ?
HumptyDumpty
 
Posts: 5
Joined: Wed Jun 04, 2014 11:00 am

Re: TexturePacker Atlas loader extension

Postby robaldred » Wed Jun 04, 2014 3:26 pm

Ahh sorry, that's my fault... I think.
If you're using my updated version, Stuart has pointed out that it requires ige._textureRoot
However that isn't in the prototype or stable release, you'll need the latest Dev.

Hence why the URLs have undefined spliced in the middle.

I have a 2nd refactor which fixes another issue which I discovered.

Heres the latest version I'm using:
http://speedy.sh/HdKgA/TexturePackerAtlas.js

Here's the same version but without the textureRoot requirement.
http://speedy.sh/FceZ2/TexturePackerAtlas.js
I don't work for Irrelon. All comments are my own.
I would strongly encourage anyone building production projects with Isogenic to buy a premium licence, it costs very little and will help towards continued development of the engine. Irrelon have spent thousands of hours developing this wonderful platform with many features found in AAA game engine.
User avatar
robaldred
 
Posts: 243
Joined: Wed Oct 23, 2013 8:09 pm
Location: Manchester, England

Next

Return to Custom Code

Who is online

Users browsing this forum: No registered users and 1 guest
cron