Search the Community

https://github.com/Hocti/PIXIMC you don't need any adobe animate plugin, just use the "generate texture atlas" function in adobe animate then you can read them in to pixi.js by PIXIMC. Here is a pixi.js demo: https://piximc.s3.amazonaws.com/demo/demo_scene.html and the original swf file: https://piximc.s3.amazonaws.com/demo/demo_swf.html I reproduce almost all animation and graphic functions, but it's not my final goal still. I will make some extra functions that adobe doesn't provided: 1) changing MC skin 2) playing with "action" like spine So I can draw some Stickman animations to create game sprites in a super quick way , and maybe find a better illustrator to redraw it as a new skin I hope someone will find it useful.

Hi guys, Recently I intend to keep my game running at the approximately same speed while the player switch to another tab, it means I need to keep my movieClip(animatedSprite) and Tween object(I am using GreenSock) running while losing tab focus, since RAF will stop, I use setInterval to keep updating PIXI.ticker.shared. const ticker = PIXI.ticker.shared; setInterval(() => { ticker.update(); }, 20); However, setInterval's minimum is limited to around 1000ms when the tab focus is blur, so my movieClip‘s update rate is the same, which is much slower. Now, i am thinking to record the deltatime and set the movieClip to specific frame accordingly on each update, then have to deal with the callback like onRepeat or onComplete, Is there a simpler way to achieve this?

In my project I have some animations which made from too many frames, and on machines with weak videocards I am getting error with MAX_TEXTURE_SIZE and animation shows as black rectangle. To avoid that I divided spritesheet with animation into smaller ones, and make movieclip from them. Code looks like this: this.loader = new PIXI.loaders.Loader(); this.loader // load spritesheets with anime .add("b_b_0", 'res/anime/b_b_0.json') .add("b_b_1", 'res/anime/b_b_1.json') ... AssetsManager.prototype.getFrames = function(resName) { var json = this.getJSON(resName); var frames = []; var framesKeys = Object.keys(json.frames).sort(naturalSort); var textures; if(this.commonLoader.resources[resName]) textures = this.commonLoader.resources[resName].textures else if(this.ringLoader.resources[resName]) textures = this.ringLoader.resources[resName].textures; else throw new Error("There is no textures with name " + resName); for(var i = 0; i < framesKeys.length; i++) { frames.push(textures[framesKeys[i]]); } return frames; } //MAX_TEXTURE_SIZE problem WebGL AssetsManager.prototype.getBigMovieClip = function(resName, length) { var frames = []; for (var i = 0; i < length; i++) { frames = frames.concat(this.getFrames(resName + "_" + i)); } var movie = new PIXI.extras.AnimatedSprite(frames); return movie; } and the I use getBigMovieClip("b_b", 2) to get MovieClip made from 2 spritesheets. Everything ok, but I see small lag while movieclip playing and I have no idea how to overcome it. Thanks for any suggestions in advance.

I've been trying to work out how to set the frame rate for a MovieClip animation. I assume this is where the animationSpeed property comes in, but the API documentation is rather vague: What does this mean in terms of frames per second? If I want an animation to play at, say, 15 FPS, what value should the animationSpeed property be?

Is there a way to position every frame with different positions in MovieClip in case where frames are different sizes. As much as I explored, I couldn't find a way, because frames created with new PIXI.Rectangle have only x,y (which is frame position on spritesheet) and width and height.

Hi, I'm banging my head against the desk try to get spritesheets working in PixiJS. When I began the project, v3 was still current so I'm hoping to stick to that version just to get this project out the door. So, rather than use a JSON file, I'm opting to just loop through creating frames from a single image. I've already found a few posts here and elsewhere on how to do it, but the end result is not working. I'm scratching my head as to what I'm missing. All I get is the first frame. I'm loading all textures using the PIXI Loader then basically using this script: var base = PIXI.utils.TextureCache[ "img/spritesheet.png" ]; var aryTextures = []; var frameWidth = 525; var frameHeight = 700; var i = 0; var length = 12; var col; var row; var colMax = 12; for ( i; i < length; i++ ) { row = Math.floor( i / colMax ); col = i - row * colMax; var texture = new PIXI.Texture( base ); var rect = new PIXI.Rectangle( frameWidth * col, frameHeight * row, frameWidth, frameHeight ); texture.frame = rect; aryTextures.push( texture ); } var mc = new PIXI.extras.MovieClip( aryTextures ); mc.loop = false; mc.onComplete = function() { /*do stuff*/ }; myStage.addChild( mc ); mc.gotoAndPlay( 0 ); Still on my first project with PixiJS, so sorry for my noobiness! Thanks!

function createFrames(data) { var frames = []; for(var k=0; k<20; k++) { frames.push(new PIXI.Texture(PIXI.loader.resources['image1.png'].texture.baseTexture, new PIXI.Rectangle(firstFrames[data + k][2], firstFrames[data + k][3], firstFrames[data + k][0], firstFrames[data + k][1]))); } } This is basic way for creating frames for MovieClip from one texture and one spritesheet json. Is there any way to combine two textures to get one frame in which one texture lays on top of the another.

Recently I've been developing small app for raspberry pi with few sets of sprites. I used PIXI.Container as stage for rendering with MovieClip objects inside of it. And it works fine. Then I tried to improve perfomances and changed PIXI.Container to PIXI.ParticleContainer(5000, {uvs: true }); It works fine on pc, but on pi i get error "TypeError: null is not an object (evaluating 'this.parent.transform')" which occurs in this part of pixi DisplayObject.prototype.updateTransform = function () { this.transform.updateTransform(this.parent.transform); // multiply the alphas.. this.worldAlpha = this.alpha * this.parent.worldAlpha; this._bounds.updateID++; }; I tested this part and it's used by PIXI.ParticleContainer and not PIXI.Container and i was wondering can i somehow avoid using this part of code

Is there any way for using one MovieClip object for few animations. If I have function which creates frames named "createFrames()", in first step I would do var animation = new PIXI.extras.MovieClip(createFrames()); So if somewhere in code I need animation with different frames, can I do something like animation = createFrames(); Just create new frames and add it to movieclip object which was created before. I tried with animation._textures = createFrames() , but it's not working. Why this question. Well I thought maybe it'll be better for performance if I avoid creating new MovieClip everytime I need new animation, and it's very often, every few seconds.

Hi all, i'm only a few weeks into pixi having finally left flash and air...i'm having problems with the class structure of JS and sharing assets - I have a button class which takes in two images and switches between them. I want this to work with my loaded spritesheet animations however I can't figure out how to do it.: function Button(bg1,bg2,text) { PIXI.Container.call( this ); this.init = function (background1,background2, text) { /*var frameScreen = ["im.jpg"] var frameArray = []; var framePush = PIXI.Texture.fromImage(frameScreen[0]); frameArray.push(framePush);*/ this.myStat2 = text; buttonTexture1 = PIXI.Texture.fromImage(background1); buttonTexture2 = PIXI.Texture.fromImage(background2); this.button = new PIXI.Sprite(buttonTexture2); this.addChild(this.button); this.button.anchor.x = 0.5; this.button.anchor.y = 0.5; this.interactive = true; this.on('mousedown', this.buttonDown); this.on('touchstart', this.buttonDown); }; this.buttonDown = function(){ if(this.myStat==0){ //butPress('fook') //alert('0 - ' + this.myStat2) this.button.texture = buttonTexture2; //this.button.setTexture(texture02); this.myStat = 1; }else{ //butPress('kook') //alert('1 - ' + this.myStat2) this.button.texture = buttonTexture1; this.myStat = 0; } }; this.changeTexture = function(newTex){ this.button.texture = newTex; } this.init(bg1,bg2,text); } var buttonTexture1; var buttonTexture2; var myStat = 0; var myStat2 = 0; Button.prototype = Object.create(PIXI.Container.prototype); Button.prototype.constructor = Button; from my main class I can send preloaded images fine like so: var testButton = new Button(squareSymbols,'images/squareBGoff_0001.jpg', '1'); testButton.x=400; testButton.y=900; stage.addChild(testButton); but I want to send my sprite animations as button images instead - they are loaded loaded like this and display fine in the main class, problem is I just can't get the button class to get them. Can anyone tell me what I don't understand?: var stage = new PIXI.Container(); var loader = PIXI.loader .add('images/tp/assets.json') .add('images/squareBGon_0001.jpg') .add('images/squareBGoff_0001.jpg') .load(init); alert("images loaded yeah") for (var i = 1; i < 50; i++) { var val = i < 10 ? '0' + i : i; squareSymbols.push(PIXI.Texture.fromFrame('numberSquares_00' + val + '.png')); } }

Hi everyone.I have been trying to make a prototype for a game and I'm wondering if there is any way to switch between sprite animation using MovieClip. var frames = []; for (var i = 0; i < 4; i++) { var val = i < 10 ? '0' + i : i; // magically works since the spritesheet was loaded with the pixi loader frames.push(PIXI.Texture.fromFrame('ladyBug_Walk-0' + (i+1) + '.png')); } this.sprites.ladybugWalk = frames //load frames with:(repeat for ladubugfly and ladybugWalk) var frames = []; var sprites = {}; for (var i = 0; i < 4; i++) { // magically works since the spritesheet was loaded with the pixi loader frames.push(PIXI.Texture.fromFrame('ladyBug_Walk-0' + (i+1) + '.png')); } sprites.ladybugWalk = frames; //create movie clip with: animation02 = new PIXI.extras.MovieClip(assets.sprites.ladybugFly); animation01 = new PIXI.extras.MovieClip(assets.sprites.ladybugWalk); //switch with: aniamtion01.sprite = sprites.animation02; If I do that I get this error: TypeError: undefined is not an object (evaluating 'value.baseTexture.hasLoaded') I've seen the example on the PIXI website in which it changes the sprite on click, but it was a single sprite and not a movie clip. Is there any way to switch the whole animation? If Not, what's the best way to do it? create a new MovieClip, kill the old one, and position it in the same place? Thank you!

I'm loading a huge animation spritessheet ~5000x4000. 1) Asset loader PIXI.loader .add('assets/dance.json')............ 2) Adding to stage var frames = []; for (var i = 0; i < xxx; i++) { var val = pad(i, 3); frames.push(PIXI.Texture.fromFrame('xxx' + val + '.png')); } xxx = new PIXI.extras.MovieClip(frames); xxx.loop = true; xxx.visible = false; stage.addChild(xxx);3) At some point I want to make it visible to user and start playing deerDance['movie'].visible = true;deerDance['movie'].play();When It happens there is and half-second or more a LAG (fps drop or rather everything stops in the scene) and then it plays very well with good fps. Is there any way to avoid this? Pre..load..something. So when it plays it goes smooth? Best, janis

I kinda like the concept, to have one spritesheet file for my whole animation. However I've found in most of the PIXI related animation tutorials the use of loading all the frames as separate files. Is it a bad practice from performance standpoints to use a PIXI Rectangle over the same texture to have the frames? I'm just curious about the performance when the animation plays. The initial load is ofc better w/ this solution, but if this causes worse animation times than I need to change it, so my code: createFrame = function createFrame(texture, offset, size) { return new PIXI.Texture(texture, new PIXI.Rectangle(offset.x, offset.y, size.x, size.y));}animation = new PIXI.extras.MovieClip([ createFrame(texture, ...), createFrame(texture, ...), ...]);

Hello, All is in the title, if you want a running exemple, as I'm unable to doing a jsfiddle, you can go here and: http://pixijs.github.io/examples/index.html?s=basics&f=spritesheet.js&title=SpriteSheet%20Animation replace the first line by this: var renderer =new PIXI.CanvasRenderer(800, 600);and tint the movie. movie.tint=0xcd12d0Then push the green button: the plane becomes crazy. It's in V3

Sorry for my bad english. How to animate a few frames from the set.For example the entire frame 10 need only to animate the first to fourth.But sometimes you need to animate a 2-3 frame.

Hi i am a new user of Pixi js and i need to add an animation from spite sheet , + i didn't found any tutorial for that so if some one can explain how to work with ( Movieclip ) for a noob

Is it possible to tile a frame texture in a movie clip object. So in otherwords can I make a animated MovieClip act like a Tiling sprite and change the width and height but have the textures just repeat infinitely instead of stretching? OR can I use a tiling sprite like a MovieClip and have the texture be updated to do animations? Or do i have to create a bunch of MovieClip Objects next to eachother?

Hello guys, Im not sure if it is a pixi-bug or my own code but maybe you can evaluate this better than me I created a MovieClip with an onComplete callback to remove itself. Works fine, but as soon as there are more MovieClips, pixi throws an error: Uncaught TypeError: Cannot call method 'updateTransform' of undefined pixi.js:3126 PIXI.Stage.updateTransform pixi.js:3126 PIXI.WebGLRenderer.render pixi.js:4460 animate (index):24 Looks like that the MovieClip is removed and pixi still wants to call updateTransform. The easy way is to put tons of if(indexOf(mc) != -1)'s to the compiled pixi code but that cant be the correct way to do it You can get the lines here: http://kuboid.net/explosion.zip or here: http://kuboid.net/explosion.rar Thank you in advance