Search the Community

Hello, apologize if my question is a little generic. I'm trying to move from createJS to PixiJS. In createJS, I usually create bitmap texts starting from .png images, where each image corresponds to a single char. Using texturePacker, I create a spriteSheet .png file and json data, in which each frame is a char. Then I can use the spritesheet object to create directly a bitmap text, like the example below: var data = { "images": [ "digit.png" ], "frames": [ [1, 1, 52, 58, 0, 0, -5], [1, 61, 38, 62, 0, 0, -3], [1, 125, 48, 68, 0, 0, 0], [1, 195, 44, 62, 0, 0, -3], [1, 259, 54, 64, 0, 0, -2], [1, 325, 52, 68, 0, 0, 0], [1, 395, 48, 57, 0, 0, -5], [1, 454, 50, 60, 0, 0, -4], [1, 516, 44, 58, 0, 0, -5], [1, 576, 48, 57, 0, 0, -6], [1, 635, 24, 32, 0, 0, -34] ], "animations": { "a": { "frames": [0] }, "b": { "frames": [1] }, "c": { "frames": [2] }, "d": { "frames": [3] }, "e": { "frames": [4] }, "f": { "frames": [5] }, "g": { "frames": [6] }, "1": { "frames": [7] }, "2": { "frames": [8] }, "!": { "frames": [9] }, "?": { "frames": [10] } } } var spriteSheet = new createjs.SpriteSheet(data); var bitmapText = new createjs.BitmapText("Hello World!", spriteSheet); This is the whole process (very easy). I was wondering if I can achieve something similar in Pixi.js where it seems that a .fnt file is required.

Hello, I have TexturePackerPro v4.3.3 that I bought a few years ago (maybe 4 years). I cannot load a sprite sheet that I made using this tutorial: How to create sprite sheets & animations for PixiJS 6 I tried this example from the documentation: https://pixijs.download/dev/docs/PIXI.AnimatedSprite.html const sheet = PIXI.Loader.shared.resources["assets/spritesheets/spritesheet.json"].spritesheet; console.log(sheet); The animation object is empty: Source: spritesheet-pixi-js.zip src/client/main.js import * as PIXI from "pixi.js" // create a Pixi application let app = new PIXI.Application({ width: 800, height: 450 }); // add the canvas that Pixi automatically created for you to the HTML document document.body.appendChild(app.view); let background, animatedCapguy; const capguyFrames = [ "assets/sprites/capguy/walk_01.png", "assets/sprites/capguy/walk_02.png", "assets/sprites/capguy/walk_03.png", "assets/sprites/capguy/walk_04.png", "assets/sprites/capguy/walk_05.png", "assets/sprites/capguy/walk_06.png", "assets/sprites/capguy/walk_07.png", "assets/sprites/capguy/walk_08.png" ]; // load the sprite, call setup() when completed // app.loader // .add("assets/spritesheets/spritesheet.json") // .load(setup); PIXI.Loader.shared .add("assets/spritesheets/spritesheet.json") .load(setup); function setup() { // get a reference to the sprite sheet you've just loaded: // let sheet = PIXI.loader.resources["assets/spritesheets/spritesheet.json"]; // let sheet = app.loader.resources["assets/spritesheets/spritesheet.json"]; const sheet = PIXI.Loader.shared.resources["assets/spritesheets/spritesheet.json"].spritesheet; console.log(sheet); // initialize background sprite // background = new PIXI.Sprite(resources["assets/sprites/background.png"].texture); background = new PIXI.Sprite(sheet.textures["background.png"]); app.stage.addChild(background); // scale stage container that it fits into the view app.stage.scale.x = app.view.width / background.width; app.stage.scale.y = app.view.height / background.height; // create an animated sprite // animatedCapguy = new PIXI.AnimatedSprite.fromFrames(capguyFrames); animatedCapguy = new PIXI.AnimatedSprite(sheet.animations["capguy/walk"]); // configure + start animation: // animatedCapguy.animationSpeed = 1 / 6; // 6 fps // animatedCapguy.position.set(0, background.height - 350); // almost bottom-left corner of the canvas // animatedCapguy.play(); // app.stage.addChild(animatedCapguy); // app.ticker.add(delta => gameLoop(delta)); // set speed, start playback and add it to the stage animatedCapguy.animationSpeed = 0.167; animatedCapguy.position.set(0, background.height - 350); // almost bottom-left corner of the canvas animatedCapguy.play(); app.stage.addChild(animatedCapguy); app.ticker.add(delta => gameLoop(delta)); } function gameLoop(delta) { animatedCapguy.x = (animatedCapguy.x + 5 * delta) % (background.width + 200); } public/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script> <script type="importmap"> { "imports": { "pixi.js": "https://cdn.skypack.dev/[email protected]" } } </script> <!-- <script type="module"> import { Vec2 } from "planck-js"; const vec = Vec2(1, 2) console.log(vec); </script> --> <script type="module" src="js/bundle.js"></script> </body> </html> rollup.config.js export default { input: "./src/client/main.js", output: { file: "public/js/bundle.js" } }

I am trying to do something very simple with PIXI and Typescript. I decided to switch to using texture packer from loading individual png files and ran into this issue. The issue is when trying to access the texture that is loaded through the spritesheet json file I get a promise error. The code is very simple and I have tried various ways of doing this with no luck. This example is the simplest and uses the example from CodeAndWeb (Texture packer devs site) but in an attempt to translate it to typescript and separated the functionality a bit. Any advice is highly appreciated. Thanks. import { Container, Sprite, Graphics, Texture, Spritesheet } from "pixi.js"; import * as PIXI from "pixi.js"; // This example is based on the following // https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-and-animations-with-pixijs5 export class Game extends Container { static GAME_WIDTH = 320; static GAME_HEIGHT = 568; private static _instance: Game; public app: PIXI.Application | undefined; constructor() { super(); window.onload = (): void => { this.createRenderer(); this.addAssets(); this.startLoadingAssets(); }; console.log('Game Constructed'); } public static getInstance(): Game { if (!Game._instance) { Game._instance = new Game(); } return Game._instance; } private addAssets(): void { PIXI.Loader.shared.add('game', '../assets/game.json'); console.log('Assets added'); } private startLoadingAssets(): void { PIXI.Loader.shared.onComplete.add(() => { this.onAssetsLoaded(); }); // PIXI.Loader.shared.onComplete.add(this.onAssetsLoaded); PIXI.Loader.shared.load(); console.log('Loading assets'); } private onAssetsLoaded(): void { let sprite = new PIXI.Sprite(PIXI.Texture.from("backBoard.png")); // let sheet = PIXI.Loader.shared.resources["../assets/game.json"]; // let sprite = new PIXI.Sprite(sheet.texture['backBoard,png']); // this.app?.stage.addChild(sprite); console.log('AssetsLoaded'); } private createRenderer(): void { this.app = new PIXI.Application({ backgroundColor: 0x001320, }) document.body.appendChild(this.app.view); console.log('Renderer Created'); } public initialize(): void { console.log('Game initialized'); } } json looks like this {"frames": { "backBoard.png": { "frame": {"x":1,"y":1,"w":318,"h":442}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":318,"h":442}, "sourceSize": {"w":318,"h":442} }, "buttonDisabled.png": { "frame": {"x":321,"y":340,"w":30,"h":30}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":30,"h":30}, "sourceSize": {"w":30,"h":30} }, "buttonDown.png": { "frame": {"x":353,"y":344,"w":30,"h":30}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":30,"h":30}, "sourceSize": {"w":30,"h":30} }, "buttonSmallDisabled.png": { "frame": {"x":395,"y":224,"w":22,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":22,"h":22}, "sourceSize": {"w":22,"h":22} }, "buttonSmallDown.png": { "frame": {"x":395,"y":248,"w":22,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":22,"h":22}, "sourceSize": {"w":22,"h":22} }, "buttonSmallUp.png": { "frame": {"x":395,"y":272,"w":22,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":22,"h":22}, "sourceSize": {"w":22,"h":22} }, "buttonUp.png": { "frame": {"x":321,"y":372,"w":30,"h":30}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":30,"h":30}, "sourceSize": {"w":30,"h":30} }, "coin.png": { "frame": {"x":368,"y":311,"w":31,"h":33}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":31,"h":33}, "sourceSize": {"w":31,"h":33} }, "logo.png": { "frame": {"x":321,"y":213,"w":125,"h":45}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":125,"h":45}, "sourceSize": {"w":125,"h":45} }, "meter_big.png": { "frame": {"x":321,"y":100,"w":92,"h":47}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":92,"h":47}, "sourceSize": {"w":92,"h":47} }, "meter_small.png": { "frame": {"x":368,"y":213,"w":43,"h":25}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":43,"h":25}, "sourceSize": {"w":43,"h":25} }, "meterDisplay.png": { "frame": {"x":321,"y":149,"w":89,"h":49}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":89,"h":49}, "sourceSize": {"w":89,"h":49} }, "meterDisplayBig.png": { "frame": {"x":321,"y":1,"w":97,"h":97}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":97,"h":97}, "sourceSize": {"w":97,"h":97} }, "meterMinus.png": { "frame": {"x":368,"y":258,"w":25,"h":25}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":25,"h":25}, "sourceSize": {"w":25,"h":25} }, "meterPlus.png": { "frame": {"x":368,"y":285,"w":24,"h":24}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":24,"h":24}, "sourceSize": {"w":24,"h":24} }, "peg.png": { "frame": {"x":399,"y":200,"w":11,"h":22}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":11,"h":22}, "sourceSize": {"w":11,"h":22} }, "target_guide.png": { "frame": {"x":321,"y":200,"w":11,"h":76}, "rotated": true, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":11,"h":76}, "sourceSize": {"w":11,"h":76} }}, "meta": { "app": "https://www.codeandweb.com/texturepacker", "version": "1.0", "image": "cheenko.png", "format": "RGBA8888", "size": {"w":419,"h":444}, "scale": "1", "smartupdate": "$TexturePacker:SmartUpdate:507f67780e7f85c65d491493063f25f9:181b9d624fffd3a88b16c67d21e19ad7:3dbd62212b1a89304e8d06008f40f33d$" } } Code Sandbox link https://codesandbox.io/s/empty-hooks-9g8j6?file=/src/index.ts

Hi All, The body.gameObject is null during collisionstart event when using TexturePacker and PhysicsEditor json files Cannot read property 'setTint' of null The setTint call works (and gameObject is valid) when I load the two images directly like this.load.image('ship', 'images/ship.png'); Do I need to modify this code in some way so I can use TexturePacker and PhysicsEditor? var config = { type: Phaser.AUTO, width: 800, height: 600, parent: 'phaser-game', physics: { default: 'matter', matter: { debug: true, gravity: { y: 0 } } }, scene: { preload: preload, create: create } }; var game = new Phaser.Game(config); var ship; var ball; function preload() { // Load sprite sheet generated with TexturePacker this.load.atlas('sheet', 'images/sprite-sheet.png', 'images/sprite-sheet.json'); // Load body shapes from JSON file generated using PhysicsEditor this.load.json('shapes', 'images/sprite-shapes.json'); } function create() { this.matter.world.setBounds(0, 0, game.config.width, game.config.height, 0, false, false, false, false); var shapes = this.cache.json.get('shapes'); ship = this.matter.add.sprite(0, 300, 'sheet', 'ship', { shape: shapes.ship }); ball = this.matter.add.sprite(600, 300, 'sheet', 'ball', { shape: shapes.ball }); ship.setVelocityX(10); this.matter.world.on('collisionstart', function (event) { console.log("collisionstart"); console.log(event.pairs.length); console.log(event.pairs[0].bodyA); console.log(event.pairs[0].bodyB); event.pairs[0].bodyA.gameObject.setTint(0xff0000); // gameObject is null here (Cannot read property 'setTint' of null) event.pairs[0].bodyB.gameObject.setTint(0x00ff00); // gameObject is null here (Cannot read property 'setTint' of null) }); } sprite-shapes.json sprite-sheet.json

I have a spritesheet of 7 equal size sprites (50x50). When I try to call a specific frame ('6') to assign it to a variable, i get half of sprite 5 and half of sprite 6 showing. I'm using Texturepacker Pro with, I think, the correct settings, so why am I getting half of the frame instead of the full frame? figured it out: i had to add some boundary around the sprite in the original load line.

Hello, I tried to run my JSONArray texture pack using the default phaser.min.js and texturepacker and upon adding an image to a state. it threw an error saying cannot set size of null/ undefined. I checked and double checked the code. There were no problems with it. So i changed the engine to phaser-arcade-physics.min.js and this time it worked. The problem now seems to be that it doesn't recognize the function this.scale.setScreenSize(true) inside the BOOT.js file. Which worked in phaser.min.js. I can see the phaser-arcade-physics.min.js is the updated file of the two. But which version of phaser.min should be used with the final game? Also which version of phaser is compatible with both texture atlas and scale.setScreenSize? Also if i manually change the code of phaser-arcade-physics.min.js to recognize scale.setScreenSize(true) how should i go about it? TT

Hello all! I have hit a roadblock and I need help :/ All I want out of this is one thing: I press a cursor key, and an animation plays. Three of my animations work perfectly, and two only play the first frame of the animation when the keys are pressed (down && left) || (down && right). Any insight to what I hope is just a simple typo? Thanks for your time! EDIT: The frames that are not working are not the same size as the frames that do work, they are about twice the width, could that have something to do with it? var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload(){ //loading the background game.load.image('background', 'background.png'); //loading three ball images game.load.image('redBall', 'redBall.png'); game.load.image('blueBall', 'blueBall.png'); game.load.image('greenBall', 'greenBall.png'); //loading the atlas game.load.atlas('player', 'henAnimation/henAnimation.png', 'henAnimation/henAnimation.json'); } var cursors; var player; function create(){ //adding the background game.add.sprite(0, 0, 'background'); //adding player player = game.add.sprite(200, 200, 'player'); //cursor animations-stop, right, and left work perfectly player.animations.add('stop', Phaser.Animation.generateFrameNames('', 1, 3, '.png', 4), 10, true); player.animations.add('right', Phaser.Animation.generateFrameNames('', 4, 5, '.png', 4), 10, true); player.animations.add('left', Phaser.Animation.generateFrameNames('', 6, 7, '.png', 4), 10, true); //only load the first frame of the animation player.animations.add('rightlick', Phaser.Animation.generateFrameNames('', 8, 10, '.png', 4), 10, true); player.animations.add('leftlick', Phaser.Animation.generateFrameNames('', 11, 13, '.png', 4), 10, true); cursors = game.input.keyboard.createCursorKeys(); } function update(){ if (cursors.left.isDown) { player.animations.play('left'); } else if ((cursors.left.isDown) && (cursors.down.isDown)) { player.animations.play('leftlick'); } else if (cursors.right.isDown) { player.animations.play('right'); if ((cursors.right.isDown) && (cursors.down.isDown)) { player.animations.play('rightlick'); } } else { player.animations.play('stop'); } }

Hello! I finally decided to try to use TexturePacker. This tool looks promising. Now I am just rewriting tons of my code. Here's the question, I hope some of you, friends, might be able to help me: My old code: var background = game.cache.getImage(backgroundName); something.drawImage(background, 0, 0, background.width, background.height, 0, 0, gameWidth, gameHeight); Can I do the same thing, but with background image being placed into texture atlas which will also include multiple other images? How can I do ' var background = game.cache.getImage(backgroundName);', but with texture atlas use? It seems methods like getFrameData return only some info strings.

I have started work on Photoshop script that exports layer data to a JSON file that can be imported at runtime by Phaser to recreate the design using images from a sprite sheet. This is still work in progress as I will be cleaning this up and adding more features such as bitmap text support and animated spritesheets. Add separation from the design from the game code. No more manually placing images. Make changes in Photoshop and see them right away in the running game. Does anyone else have a similar tool or process for updating and placing their images in Phaser? I used to use Flash and a FSFL script, but this new setup skips the Flash import process. The pipeline I use is as follows: 1. Photoshop using Generator and PhotoshopPhaserExport.jsx 2. TexturePacker auto creates a spritesheet from the Generator created images using a smart folder (Watch your atlases sizes in real time!) 3. Phaser imports the single spritesheet and the data JSON file for all the states as one file and creates each state when it is loaded 4. I didn't add it to my demo, but I use live.js to auto refresh the game when any changes are made 5. I use VirtualHostX to test locally across multiple devices at once, combined with live.js, they all refresh automatically when the game is updated Photoshop PSD Notes: Use Aa single Photoshop PSD for the whole game with a folder for each state, the name of the folder should match the state name in the code Any images that need to be exported as an image is a smart object with the extension .png , with Generator turned on in Photoshop, all those images will export in real time! Create additional instances of the smart objects can have a unique index as the extension instead of png so they share the same source image, for example blueBox.png, can have more instances named blueBox.1, blueBox.2 ect. The attached zip has a quick demo project, psd, and the Photoshop script that exports the JSON data. This concept is based on some of steps from this post bellow and is still very much work in progress. http://www.html5gamedevs.com/forum/14-phaser/?do=add projectNameZip.zip

Hi, I am having problem loading texturepacker .json file on android device. Pixi code: var loader = Loader.add('images/sprites.json').once('complete', onAssetsLoaded).load(); Here is the error message: chromium: [INFO:CONSOLE(0)] "XMLHttpRequest cannot load content://com.company.test.AVC.files/assets/images/sprites.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, https.", source: content://com.company.test.AVC.files/assets/index.html (0) My app is packed into apk using Corona SDK. (I packed html projects before w/o problems) This is my first Pixi project displayed inside Corona's WebView... Are there known issues between Corona and Pixi?

Hi I'm building my first Phaser game at the moment as a trial after coming originally from an Actionscript background, and then working a lot with Haxe/Flambe for the last couple of years. Most of the things I've tried and tested so far have worked out fine, but I'm struggling with finding a way of having a large complex sprite use multiple texture atlases. I'm using TexturePacker and have output a multipack using the JSON (Hash) format which names the files name0.png, name1.png etc. but I can't find a way to access these in Phaser. I have smaller, single atlas sprites working no problem, but for my main character there are too many animations to fit on a single texture. Is there a way to handle multipacks in Phaser, or will I have to resort to trying to break the sprite into separate single atlases with individual anim loops in separate files, and then switch between them in code? Many thanks Billy

Hello, I'm having some trouble animating a sprite atlas. I apologize if this is something I'm doing wrong in TexturePacker but I can't seem to get it to animate right in Phaser. I loaded the atlas using game.load.atlasJSONHash() and it IS flipping through all the frames. The problem, however, is that the textures seem to re-center on the sprite based on the width of the particular frame. The running animation for my sprite worked perfectly because the width and height of each frame stayed the same, but when my sprite extends his sword out from his body and expands his size, his texture is re-centered. This causes his whole body to appear to shift over slightly. It almost seems as if I need to adjust the anchor point for the sprite at each frame. I hope that explanation makes sense. Here are some pictures of my spritesheets. It is worth noting that the slash animation works as intended if I don't perform the trimming and I leave all the frames the same size. TRIMMED: NOT TRIMMED: Any help would be greatly appreciated. Really enjoying Phaser thus far!

Hi, is it possible to count all the elements ('frames' childern) in an atlas object like: this.game.load.atlas('var', 'path.png', 'path.json') or does it needs to parse the texturePacker Json?

In (re)acquainting myself with Pixi for some hobby projects, I put together a simple example and walkthrough of scaling to fit device dimensions, using hi-res resources, animating a sprite, doing some basic parallax scrolling with tiling sprites, and assembling spritesheets with TexturePacker: http://www.rocketshipgames.com/blogs/tjkopena/2015/09/basic-scaling-animation-and-parallax-in-pixi-js-v3/ I hope it's of use to somebody, and would love to hear any comments about any errors or sub-optimal code. Thanks!

Hi, I'm new to PIXI and thus far really like working with it. I posted this issue in response to a previous, unrelated issue, so I thought making a new topic made more sense. To summarize my project, I'm I'm overlaying one sprite sheet animation with another, which works perfectly except for loading so many json and sprite files. I'm currently working on optimizing that, but I'm not completely comfortable with the loader class just yet. Maybe someone can make a suggestion as to more efficient coding. Currently the following code is called on click of a thumbnail of which there are three, each loading a pair of sprite sheets overlaying each other. It works, but I feel there must be a cleaner way of doing this without clearing the loader and reloading every time the user goes between the thumbnail options. Currently I'm making two arrays each containing multiple JSON files with sprite sheet data. This works, but I'm having to call two separate functions for each load event. I tried assigning an ID to each "add" method, but accessing it that way through an error, which I suspect is due to the URL's being in an array. My questions are: Is there a way to load all of the assets on page load, then access them via user click so as not to wait for the loader? I assumed once they were loaded I wouldn't need to worry about it again, but got an error about reloading existing assets, hence the inclusion of "loader.reset();". Finally, is there a method of taking care of all of the frames in one load event rather than calling two for each set of sprite sheets and JSON I'm loading? I'm guessing adding an ID to the "add" methods on the loader would be involved. The following code is working, but I feel I'm missing something and it could be far cleaner and more efficient. var loader = new PIXI.loaders.Loader(); // draw spritesheets to canvas var animate = function() { requestAnimationFrame(animate); renderer.render(stage); }; function loadModels(modelName, spriteNumber, frameNumber) { var faceAssetsToLoad = []; var lipsAssetsToLoad = []; for (var i = 0; i < spriteNumber; i++) { faceAssetsToLoad[i] = './img/spritesheets/' + modelName + '/face/' + modelName + '_' + i + '.json'; lipsAssetsToLoad[i] = './img/spritesheets/' + modelName + '/lips/' + modelName + '_' + i + '.json'; } loader.reset(); loader.add(faceAssetsToLoad).load(onFaceAssetsLoaded); loader.add(lipsAssetsToLoad).load(onLipsAssetsLoaded); function onFaceAssetsLoaded() { var faceFrames = []; for (var i = 0; i < frameNumber; i++) { var val = i < 10 ? '0' + i : i; if (val > 99) { faceFrames.push(PIXI.Texture.fromFrame('' + modelName + '_00' + val + '.jpg')); } else { faceFrames.push(PIXI.Texture.fromFrame('' + modelName + '_000' + val + '.jpg')); } } faceMovie = new PIXI.extras.MovieClip(faceFrames); faceMovie.position.x = 0; faceMovie.position.y = 0; faceMovie.anchor.set(0); faceMovie.animationSpeed = 0.417; stage.addChild(faceMovie); faceMovie.play(); animate(); } function onLipsAssetsLoaded() { var lipsFrames = []; for (var i = 0; i < frameNumber; i++) { var val = i < 10 ? '0' + i : i; if (val > 99) { lipsFrames.push(PIXI.Texture.fromFrame('' + modelName + '_00' + val + '.png')); } else { lipsFrames.push(PIXI.Texture.fromFrame('' + modelName + '_000' + val + '.png')); } } lipsMovie = new PIXI.extras.MovieClip(lipsFrames); lipsMovie.alpha = 0.6; lipsMovie.position.x = 0; lipsMovie.position.y = 0; lipsMovie.anchor.set(0); lipsMovie.animationSpeed = 0.417; lipsMovie.tint = currentShadeHex; stage.addChild(lipsMovie); lipsMovie.play(); animate(); } } // click event which starts the loader $('#modelThumbs li').on("click", function() { var ID = this.id; switch (ID) { case "1": loadModels("1", 58, 521); break; case "2": loadModels("2", 26, 233); break; case "3": loadModels("3", 34, 304); break; } }); I know there's a lot going on there, but any help would be great. This framework is awesome, btw. For the sake of dispelling any talk from my team about using createjs for this project, I built a createjs version for comparison. The Pixi version blew the doors off the createjs version. thanks, Rich

Am I missing something? New guy on the block here, and I'm trying to learn to use sprite sheets with pixi.js When it comes to sprite sheets, It seems like Pixi is pretty tight with Texture Packer. In fact, I haven't been able to find any up-to-date info on using Pixi without Texture Packer. This is important to me because I am trying to learn more than just pixi.js, but 2d animation in general, and I'm broke Anyhow, I did download Texture Packer, was warned about the trial (after which I'll have to pay(!)?), and went to publish my first sprite sheet, when I was greeted by this - implying that the free version ofTexture Packer does not support pixi.js... ...hence, my questions: -Will I have to pay for Texture Packer to use sprite sheets in pixi.js? -Assuming there is a workaround for this, once my trial is over, will I then have to pay to continue using sprite sheets in pixi.js? -Are there any other ways to work with sprite sheets in pixi.js, and which are most supported? -Does pixi.js have future plans of supporting any other technologies for use with sprite sheets?

Hey GameDevs, I'm using TexturePacker to make a sprite atlas. When I use the 'MaxRects' setting it makes an optimized sprite sheet, rotating some of the images to tuck them all in nicely. But when I run my game I receive this message from the console: Phaser.Loader - textureatlas[spritesheet]: Texture Error: frame does not fit inside the base Texture dimensions [object Object]and each sprite appears as the whole sprite sheet. However, if I set Algorithm to 'Basic' instead of 'MaxRects' the resulting sheet contains all the images without rotation, and the sheet works perfectly in my game. But the sprite sheet image dimensions are way bigger than they need to be and there is a lot of wasted space. Has anyone come across this? Is there a line of code in Phaser I can use to get around this issue? Thanks for your help!

Hi Folks, EDIT: At first sorry for my Mistake. I dont meant Tiled, i meant TexturePacker!! I am completely new in the matter and have a question about *Texturepacker. I wanted to create a JSON file (jsonHash) for an animation in Phaser. In Phaser example, the description of a frame looks like this: { "filename": "blueJellyfish0001", "frame": {"x":484,"y":836,"w":63,"h":65}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":1,"y":0,"w":66,"h":66}, "sourceSize": {"w":66,"h":66}}I do not get displayed by my own example, the file name. Look here: "002.png":{ "frame": {"x":2,"y":34,"w":30,"h":30}, "rotated": false, "trimmed": false, "spriteSourceSize": {"x":0,"y":0,"w":30,"h":30}, "sourceSize": {"w":30,"h":30}, "pivot": {"x":0.5,"y":0.5}},OK i can "trim Sprite Name", then i become "002" without the filetype: "002":{ "frame": {"x":2,"y":34,"w":30,"h":30}, ...Does anyone have a clue how I can create a file as described in Example Phaser? { "filename": "blueJellyfish0001",......Thank you