Pixi JS Starter Project (OLD)

[Ash_H_]

Hi Guys,

HTML5 Dev here.

First impressions of intel XDK are great, love the template HTML app projects and considering integrating the XDK into current dev workflow.

Pixi JS Game template is old (v1.6), current stable release is (v3.0+). Any plans to update the template project?

Regards,

Ash

[PaulF_IntelCorp]

Thanks for the feedback regarding the pixi templates. I'll let the respective owner of that component know.

p.s. You can update those libraries yourself, inside your project. The templates are fairly simple, so they should not be heavily dependent on the version of the library.

[Ash_H_]

Paul F. (Intel) wrote:

Thanks for the feedback regarding the pixi templates. I'll let the respective owner of that component know.

p.s. You can update those libraries yourself, inside your project. The templates are fairly simple, so they should not be heavily dependent on the version of the library.

Thanks Paul! Would be nice to keep the component up to date with PIXI's great new features so that the XDK is always looking fresh. 

I already have done that :), although just for your info; the example code snippet would need to be changed a little, as the way that the renderer is instantiated has slightly changed as of v3.0 onwards.

Adjusted slightly for the new version, the example should now look something like this:

var initApp = function()
{   
    var screenWidth = screen.availWidth;
    var screenHeight = screen.availHeight;

    var renderer = PIXI.autoDetectRenderer(screenWidth, screenHeight,{backgroundColor : 0x1099bb});
    document.body.appendChild(renderer.view);

    // create the root of the scene graph
    var stage = new PIXI.Container();

    // create a texture from an image path
    var texture = PIXI.Texture.fromImage('asset/bunny.png');

    // create a new Sprite using the texture
    var bunny = new PIXI.Sprite(texture);

    // center the sprite's anchor point
    bunny.anchor.x = 0.5;
    bunny.anchor.y = 0.5;

    // move the sprite to the center of the screen
    bunny.position.x = screenWidth / 2;
    bunny.position.y = screenHeight / 2;
    
    if(CC.isMobile)
    {
       stage.addChild(bunny);
    };

    

    // start animating    
    function animate() {
        requestAnimationFrame(animate);

        // just for fun, let's rotate mr rabbit a little
        bunny.rotation += 0.1;

        // render the container
        renderer.render(stage);
        }
    animate();
    
     console.log("application initialised");
};
/* jshint browser:true */
/* globals PIXI, requestAnimFrame */
(function() {

    document.addEventListener('DOMContentLoaded', initApp, false);

}());

Cheers,

Ash

[PaulF_IntelCorp]

Thanks Ash, I'll also forward that info to the developer in charge of that sample.