Jump to content

sharing pixi assets


Recommended Posts

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]);
        this.myStat2 = text;

        buttonTexture1 = PIXI.Texture.fromImage(background1);
        buttonTexture2 = PIXI.Texture.fromImage(background2);
        this.button = new PIXI.Sprite(buttonTexture2);
        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(){

            //alert('0 - ' + this.myStat2)
            this.button.texture = buttonTexture2;
            this.myStat = 1;
            //alert('1 - ' + this.myStat2)
            this.button.texture = buttonTexture1;
            this.myStat = 0;

    this.changeTexture = function(newTex){
        this.button.texture = newTex;


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');

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

    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'));


Link to comment
Share on other sites

if you load "images/square.jpg" then fromFrame must load "images/square.jpg" too. Also you have to move all your operations inside init.

loader.add('something', 'images/square.jpg');

function init() {
   alert('images loaded yeah');
   var tex2 = loader.resources['something'].texture; //that will work like intended
   var tex1 = PIXI.Texture.fromFrame('images/square.jpg'); // that will work too


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