API Docs for: 0.1.0
Show:

File: cangaja/atlas/atlas-texturepacker.js

                        /**
                         *  @description
                         *  CG.AtlasTexturePacker class supports loading xml and json files from . . . TexturePacker ;o)
                         *  No trimming at the moment, keep TexturePacker settings simple! The rotation option of TexturePacker
                         *  will be dropped in future releases!
                         *  AtlasTexturePacker parses xml/json and generates new CG.AtlasImage objects in the MediaAsset manager.
                         *  These atlasimages are only handled within Sprite, Particle and Button class.
                         *
                         *
                         *
                         ```
                        
                         // Preloader
                         Game.asset.addImage('media/img/texturepacker.png', 'texturepacker') // image of texturepacker
                         .addXml('media/img/texturepacker.xml', 'texturepacker-xml') // xml version of texturepacker
                         .addJson('media/img/texturepacker.json', 'texturepacker-json') // json version of texturepacker
                         .startPreLoad()
                        
                        
                        
                         // create texturepacker object
                         var tp = new CG.AtlasTexturePacker()
                        
                         // load texturepacker json file
                         tp.loadJson(Game.asset.getJsonByName('texturepacker-json'))
                        
                         // or load texturepacker xml file
                         //tp.loadXml(Game.asset.getXmlByName('texturepacker-xml'))
                        
                        
                         // add images of texturepacker to Game.asset
                         Game.asset.images.push.apply(Game.asset.images, tp.getAtlasImages())
                        
                         ```
                        
                         *
                         *  @class CG.AtlasTexturePacker
                         *  @extends Class
                         */
                        CG.Class.extend('AtlasTexturePacker', {
                            /**
                             * @constructor
                             * @method init
                             * @return {*}
                             */
                            init: function () {
                                //ejecta and cocoonjs has no DOMParser!
                                if (typeof ejecta === 'undefined' && !navigator.isCocoonJS) {
                                    this.xml = ''
                                    this.xmlDoc = ''
                                    this.parser = new DOMParser() || {}
                                }
                                /**
                                 * @property imagename
                                 * @type {String}
                                 */
                                this.imagename = ''
                                /**
                                 * @property width
                                 * @type {Number}
                                 */
                                this.width = 0
                                /**
                                 * @property height
                                 * @type {Number}
                                 */
                                this.height = 0
                                /**
                                 * @property atlasimages
                                 * @type {Array}
                                 */
                                this.atlasimages = []
                                return this
                            },
                            /**
                             * @description load a xml file from TexturePacker
                             * @method loadXml
                             * @param {string/object} xmlfile path or mediaasset object with data of TexturePacker xml
                             * @return {*}
                             */
                            loadXml: function (xmlfile) {
                                //from asset
                                if (typeof xmlfile == 'string') {
                                    this.xml = loadString(xmlfile)
                                } else {
                                    this.xml = xmlfile.data
                                }
                        
                                this.xmlDoc = this.parser.parseFromString(this.xml, 'text/xml')
                        
                                this.imagename = this.xmlDoc.getElementsByTagName('TextureAtlas')[0].getAttribute('imagePath')
                                this.width = parseInt(this.xmlDoc.getElementsByTagName('TextureAtlas')[0].getAttribute('width'))
                                this.height = parseInt(this.xmlDoc.getElementsByTagName('TextureAtlas')[0].getAttribute('height'))
                        
                                var sprites = this.xmlDoc.getElementsByTagName('sprite')
                                for (var i = 0, l = sprites.length; i < l; i++) {
                                    var atlasimage = new CG.atlasimage({
                                        image: sprites[i].getAttribute('n'),
                                        xoffset: parseInt(sprites[i].getAttribute('x')),
                                        yoffset: parseInt(sprites[i].getAttribute('y')),
                                        width: parseInt(sprites[i].getAttribute('w')),
                                        height: parseInt(sprites[i].getAttribute('h'))
                                    })
                                    if (sprites[i].getAttribute('r') == 'y') {
                                        atlasimage.rotation = 90
                                        console.log('!!! support for rotated images in atlas files would be dropped in future versions !!!')
                                    }
                                    atlasimage.atlasimage = this.imagename
                                    atlasimage.source = 'xml'
                                    atlasimage.atlasname = this.imagename.split(/(\\|\/)/g).pop().split('.')[0] //image name only for name
                        
                                    this.atlasimages.push(atlasimage)
                                }
                                return this
                            },
                        
                            /**
                             * @description load a json file from TexturePacker
                             * @method loadJson
                             * @param {string/object} jsonfile path or mediaasset object with data of TexturePacker json
                             * @return {*}
                             */
                            loadJson: function (jsonfile) {
                                //from asset
                                if (typeof jsonfile == 'string') {
                                    this.json = JSON.parse(loadString(jsonfile))
                                } else {
                                    this.json = jsonfile.data
                                }
                                //meta info from json file
                                this.imagename = this.json.meta.image
                                this.width = this.json.meta.size.w
                                this.height = this.json.meta.size.h
                        
                                //loop thru all images
                                for (var i = 0, l = this.json.frames.length; i < l; i++) {
                                    var image = this.json.frames[i]
                                    var atlasimage = new CG.AtlasImage({
                                        image: image.filename,
                                        xoffset: image.frame.x,
                                        yoffset: image.frame.y,
                                        width: image.frame.w,
                                        height: image.frame.h
                                    })
                                    if (image.rotated === true) {
                                        atlasimage.rotation = 90
                                        console.log('!!! support for rotated images in atlas files would be dropped in future versions !!!')
                                    }
                                    atlasimage.atlasimage = this.imagename
                                    atlasimage.source = 'json'
                                    atlasimage.atlasname = this.imagename.split(/(\\|\/)/g).pop().split('.')[0] //image name only for name
                        
                                    this.atlasimages.push(atlasimage)
                                }
                                return this
                            },
                        
                            /**
                             * @description get all TexturePacker images (Use array.push.apply(array, anotherarray) to append to Game.asset)
                             * @method getAtlasImages
                             * @return {array} returns all atlasimages of TexturePacker file to use with Game.asset
                             */
                            getAtlasImages: function () {
                                return this.atlasimages
                            }
                        })