Jump to content

Drawing Frame of MovieClip


Recommended Posts

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



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.

Link to comment
Share on other sites

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


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:


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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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):


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

Link to comment
Share on other sites

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);
Link to comment
Share on other sites

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).

Link to comment
Share on other sites

Yay Im not crazy! :D 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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...