Drawing Frame of MovieClip

[rolyataylor2]

Here is my code basically:

function Object() {    var source = {         Init:function() {            source.Canvas = $('<canvas></canvas>')[0];            source.Canvas.width = 256; source.Canvas.height = 256;            source.Canvas.context = source.Canvas.getContext('2d');            //Split Canvas into multiple textures            source.Frames = [];            for(i=0;i<4;i++)                for(ii=0;ii<4;ii++) {                    var tex = PIXI.Texture.fromCanvas(source.Canvas);                    tex.setFrame({x:ii*32,y:i*32,width:32,height:32});                    source.Frames[(ii+(i*4))] = tex;                }            source.Sprite = new PIXI.MovieClip(source.Frames);            source.Sprite.animationSpeed = 0.1;            source.Sprite.currentFrame = 0;            source.Sprite.play();            MainGameObject.Camera.DisplayObject.addChild(sprite);         }    };    return source;}

 

As you can see it creates a canvas, sets the size, gets the context. Then it creates textures from that canvas and adds them to the MovieClip.

 

The problem I have is that the first texture doesn't render in chrome, it does in Firefox. But Firefox fails to create a webGL context.

 

So where I am at now is that

 - Chrome creates the context and renders all the frames except frame [0] in the frames array. Which i need frame [0]... its a walking animation. it doesnt play it when looping around the animation as well. so like frame 15 or 16. Its just a blank, really messes up the visuals.

 - Firefox is using the canvas renderer and draws everything fine.

 

OH also another bug which i notice is firefox (26.0) cant get the webGL context for any of the official examples as well as my code.

My chrome browser is v32.0.1700.72 m. with no errors....

any ideas?

Using pixi 1.4.2

 

EDIT:

ARG this doesnt work either

            source.Texture = PIXI.Texture.fromCanvas(source.Canvas);            source.Texture.setFrame({x:0,y:0,width:32,height:32});            source.Sprite = new PIXI.Sprite(source.Texture);

then add it to the stage, doesnt render at all, no errors.

[xerver]

Is there a reason you are using object literals instead of creating Rectangle objects for the frames?

{x:0,y:0,width:32,height:32}

should be:

new PIXI.Rectangle(0, 0, 32, 32)

---------

 

Also, why are you adding the frames to the array with specific indexes:

source.Frames[(ii+(i*4))] = tex;

That seems like you would have an array with `undefined` element "gaps", you should probably be pushing those in:

source.Frames.push(tex);

I bet this is the reason your frames are not being rendered properly.

 

---------

 

Finally it looks like you are adding something to the stage that is different than your movie clip:

source.Sprite = new PIXI.MovieClip(source.Frames);source.Sprite.animationSpeed = 0.1;source.Sprite.currentFrame = 0;source.Sprite.play();MainGameObject.Camera.DisplayObject.addChild(sprite);

What is `sprite`? I don't see that defined anywhere, and I don't see `source.Sprite` used anywhere.

 

---------

 

Do you have a running example we can look at? It is much easier to debug a page than it is to pump a forum post for information.

 

JavaScript generally uses lowerCamelCase for variables, and UpperCamelCase for constructors (classes). It is highly confusing to see UpperCamelCase for non-constructor variables.

[rolyataylor2]

Ok so I changed what you said to change and It did not fix the problem.

 

Oh boy, Ok so I made a sample site at http://www.drawnimals.com/test.php

 

The problem can be seen on Chrome and Firefox with WebGL forced set to true on that test page.

 

Sorry about the poor post above, I was trying to simplify my game engine and it was late and i was falling asleep.

 

Here is the code from the sample:

<div id="RPGContainer"></div><div id="PlayerCanvasContainer"></div><script>            function gameloop() {                playerSprite.currentFrame += 0.05;                Renderer.render(Stage);                window.requestAnimationFrame(gameloop);            }            Stage = new PIXI.Stage(0x0FFFF0);            Renderer = PIXI.autoDetectRenderer(320, 240);            $('#RPGContainer').append(Renderer.view);                        playerCanvas = $('<canvas></canvas>')[0];            $('#PlayerCanvasContainer').append(playerCanvas);            playerCanvas.width = 256; playerCanvas.height = 256;                        //Split Canvas into multiple textures            playerFrames = [];            for(var i=0;i<4;i++)                for(var ii=0;ii<4;ii++) {                    var tex = PIXI.Texture.fromCanvas(playerCanvas);                    tex.setFrame(new PIXI.Rectangle(ii*32, i*32, 32, 32));                    playerFrames.push(tex);                                    }            playerSprite = new PIXI.MovieClip(playerFrames);            playerSprite.animationSpeed = 0;            playerSprite.currentFrame = 0;            playerSprite.play();            Stage.addChild(playerSprite);                        window.requestAnimationFrame(gameloop);                        function updateGraphics() {                var ctx=playerCanvas.getContext('2d');                ctx.drawImage(playerImageBody,0,0);                PIXI.texturesToUpdate.push(playerTexture);            }            playerImageBody = new Image();            playerImageBody.onload = updateGraphics;            playerImageBody.src = 'img/game/sprites/player.png';</script>

========

- My stage in my original setup was set up like this: Stage < PIXI.DisplayObjectContainer( for zooming/rotation) < PIXI.DisplayObjectContainer( for positioning) < Sprite/MovieClip Objects

 

- [(ii+(i*4))] was used because i used .push beforehand and was making sure that it wasnt the problem.

 

- My naming convention is a little off sorry.... I am working of fixing my coding style

[xerver]

Going to bed for now, but will look at this in the morning, thanks for the live example and the full code!

[xerver]

I removed this line:

playerSprite.currentFrame += 0.05;

Changed the animation speed to 0.01 (to make it slow):

playerSprite.animationSpeed = 0.01;

And removed the textures update line (since playerTexture is undefined anyway):

PIXI.texturesToUpdate.push(playerTexture);

And this code you posted worked fine for me in both Chrome and Firefox.

[rolyataylor2]

It must be my computer then... is there a way to force the canvas renderer?

 

I recorded the problem i get: http://www.flickr.com/photos/100350895@N05/11984413816/sizes/o

 

If i can force the canvas renderer at least it will work for development.

[xerver]

I don't think it is your computer, I think that texturesToUpdate push line is causing an error and unexpected results. playerTexture is not defined and it throws an error causing the implementation to screw up.

 

You can pick which renderer to use by instantiating that renderer instead of using autodetect:

Renderer = new PIXI.CanvasRenderer(640, 480);

[rolyataylor2]

I got rid of the PIXI.texturesToUpdate.push() all together and am still getting the blank frame.

 

I also tried doing PIXI.texturesToUpdate.push(playerSprite.texture) and PIXI.texturesToUpdate.push(playerSprite.texture.baseTexture).

 

I am downloading a webGL debugger/inspector now to see if i can find any hidden errors or something.

 

I had a couple others test http://www.drawnimals.com/test.php on their computer and it works fine on their computers. MIne still has the issue though. I will use the PIXI.CanvasRenderer() method for now during development as that renderer works fine with no issues (cept being alot slower).

[xerver]

I see a blank frame as well, I'm not sure what that is from but all the other frames looked OK. I can take another look at this later and try to debug it.

[rolyataylor2]

Yay Im not crazy! lol

 

I used a GL tracing thing-a-ma-jig and it shows texture12 (which is the first rendered texture of the full set) as being blank but all the other textures are fine.

 

SO i thought maybe its just the first rendered texture that causes the problem so i modified it to render a sprite before the first frame, but the texture still remained blank.

 

I tried offsetting the texture frame by 1 pixel so PIXI.Rectangle(1,1,32,32); but that didn't help either.

 

I also just tried recoloring the PNG file and saving it again, just to check if it was the file. No luck there either.

 

Thank you very much for your help, this has been driving me crazy. Cant wait to hear your findings.

[Mat Groves]

hello! answer can be found here

 

https://github.com/GoodBoyDigital/pixi.js/issues/500#

 

thanks!