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 First of all. I m so glad to see Panda on the road again :-) I have just bought the full version and playing around with Spritesheets developed in Spine 3.6.52 professional. It seems like mesh is not supported in panda 2 version 1.5.0. When I export from spine as a spritesheet with mesh animations it won´t show the spritesheet, If i remove the Mesh animation it shows the animation fine: game.module( 'game.main' ) .require( 'plugin.spine' ) .body(function() { //game.addAsset('panda.png'); game.addAsset('sheep.atlas'); game.addAsset('sheep.json'); game.createScene('Main', { init: function() { var player = new game.Player(); player.sprite.addTo(this.stage); } }); game.createClass('Player', { init: function() { //this.sprite = new game.Sprite('panda.png'); this.sprite = new game.Spine('sheep.json'); this.sprite.position.x = 200; this.sprite.position.y = 800; this.sprite.play('idle', true); } }); });

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

Is there any way to manually add frames from an atlas to an animation by specifying x,y,length,width? I don't want to bother with json/xml files, they're frustrating to work with,

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?

I fairly new to Pixi....and I'm running into some performance issues while trying to animate a large image sequence. I'm trying to animate a movie-clip from a sequence of images, 540 images at 1280 x 720 resolution. This is a lot of assets so I've combined them into 45 large sprite-sheet images (12 sub-images in each sheet), with each sprite-sheet having its own json file. I have to be able to call and render any specific image in the sequence very quickly as I change a variable i've made elsewhere in the code, var =id; I have loaded all 45 json files into the AssetLoader Class and built a stage..... function buildStage(){ stage = new PIXI.Stage(0x66FF99); renderer = PIXI.autoDetectRenderer(window.innerWidth,window.innerHeight, {view:document.getElementById("mycanvas")}); loadSpriteSheet();} var assetsToLoad=[]; loadSpriteSheet = function() { for( var spriteNbr = 0; spriteNbr<46; spriteNbr++){ assetsToLoad [spriteNbr]= 'http://myCDN...url'+spriteNbr+'.json';} loader = new PIXI.AssetLoader(assetsToLoad, true); loader.load();}; // I call the image to the screen and renderer like so... every time i change the value of "id"defined elsewhere, the function showImage() is called. The value of "id" also corresponds to the name of each sub image that needs to be called from the sprite-sheet json file. Example... file 0.json contains 12 images/ frames with names 0-11, while file 1.json contains 12 images/ frames with names 12-23, etc... function showImage(id){ var slice2 = PIXI.Sprite.fromFrame(id); slice2.position.x = 0; slice2.position.y = 0); stage.addChild(slice2); renderer.render(stage); } Ok so this works, but very very poorly. As I call showImage() every time and rapidly change id the animation is very choppy. Many frames are skipped the faster i change id and call the function. I've tried incorporating requestAnimationFrame(), which doesn't seem to help. I have also set this up using the MovieClip() class as a test and it works horribly. The animation plays but very choppy and lots of lag again, and even some frames "shaking". Very weird. Here is the code for that in that scenario i delete the showImage() function and substitute with the fallowing, just trying to play all the frames.... var frames = []; function animate(){for (ii=0; ii<541; ii++){frames [ii] = [ii];} var tile = PIXI.MovieClip.fromFrames(frames);tile.position.x = 0;tile.position.y = 0; // tell PIXI.MovieClip, which frame will be shown tile.play();stage.addChild(tile);requestAnimationFrame(animateTile);} function animateTile(){renderer.render(stage);requestAnimationFrame(animateTile);} Again this plays but very bady... Any suggestions of how to fix this would be much appreciated. Should I be using sprite batches or maybe displayObjectContainer perhaps? I heard that SpriteBatch() is only useful if you have a single texture. What could I do to make things run fast and smooth? Thanks for any help in advance.

Hi guys! anyone knows how to make an animation of one sprite with multiple spritesheets? Regards, Nicholls

Our company has been doing this Free Sprite of the Week thing for a little while, so I thought I'd let you know about it, as it's probably useful to some people here. The idea is that one of the animated characters, creatures, etc. that are normally for sale, is given away for free, and there is a new one each week. It seems to be working well for now, and if people don't abuse it, we intend to keep doing this for some time. This week it's an unicorn... and everyone loves unicorns, so you should absolutely get it! If you don't love unicorns, then there's something wrong with you, really There are also other free sprites if you look in the Market area of the website, and some of them (no, all of them) are really cool The ones that aren't free are still very cheap, especially now, since it's all a new thing and literally everything is 50% off for another week or so. The characters with a + next to their names are "premium" ones, that have a much higher resolution, higher frame rate, a larger number of camera angles, and a more complete animation set. The animation sets have been made in a way that makes them suitable to any type of game, from platforming to point-n-click adventures, to isometric RPG's, etc. Just as an example of what one of these animation sets includes, most of the + characters have the following animations seen from 12 different angles (8 isometric and 4 straight-on ones): Idle, Angry_01, Angry_02, Assemble, Bow_01, Bow_02, Bow_Curtsey, Box_PickUp, Box_Pull, Box_Push, Button_Push, Celebrate_01, Celebrate_02, Climb, Crouch, Crouch_Walk, Dance, Death_Backwards, Death_Backwards_Get_Up, Death_Forward, Death_Forward_Get_Up, Door_Pull, Door_Push, Fall, Fight_Stance, Give_Item, Hang_Ledge, Hang_Ledge_Left, Hang_Ledge_Right, Hang_Wall, Hang_Wall_Left, Hang_Wall_Right, Happy_01, Happy_02, Item_Pick_Up, Jump_Up, Jump_Flip, Kick_Flying_Kick, Kick_High, Kick_Low, Kick_Mid, Kick_Spin, Land, Lever_Big_Pull, Lever_Pull, Magic_Raise, Magic_Sky, Magic_Throw, Magic_Thrust, Point_Down, Point_Forward, Point_Forward_Down, Point_Forward_Up, Point_Up, Pull_Up_Ladder, Pull_Up_Ledge, Pull_Up_Wall, Punch_High, Punch_Low, Punch_Mid, Punch_Spin, Reach_01, Reach_02, Run, Sad, Sitting_Cross_Legs, Sitting_Talking, Sitting_Down, Slide_Down, Slide_Left, Slide_Right, Smash, Standing, Standing_Fold_Arms, Standing_Hands_On_Hips, Standing_Look_About, Standing_Up, Stand_To_Climb, Stand_To_Fight, Step_Backwards, Swim, Talk, Throw, Walk, Wave, What Hopefully you'll find something useful in there. Also, if you have any requests for something that you'd like to see, or want stuff to be made exclusively for your games, this is sometimes possible, so if you want just send me a message and I'll forward it to the people that do these things (I only write code and know nothing about art and animation).

Hi guys. This is more of a workflow question, but what the heck. Anyway, I came from flash. Who didn't? I'm on CS6 so I can export spritesheets for my assets. So I have all this .fla files. There are a lot of them. If I one by one export spritesheets, how would I go about combining them? And if you have general workflow tips, that would be great! Thanks.