doppler

Easeljs - Need help adding multiple child containers

Recommended Posts

I am having the hardest time adding a list of objects to my container! For whatever reason, only the last container object appears on the left side of the screen. Any clue as to why only one container is being drawn?

If anyone is interested in testing the program, here is a link to the related commit.

Parent Container:

(function (window) {

	function ChestManager() {
		container.Container_constructor();
        container.addChest(640,100,1,1,"topClosed");
        container.addChest(1100,360,1,1,"sideClosed");
        container.addChest(640,620,1,1,"bottomClosed");
        container.addChest(180,360,-1,1,"sideClosed");
	}

	//instance of class
	var container = new createjs.extend(ChestManager, createjs.Container);

    //shared spritesheet properties
    var manifest = [{src: "chests.png", id: "chests"}];
    container.loader = new createjs.LoadQueue(false);
    container.loader.addEventListener("complete", handleComplete);
    container.loader.loadManifest(manifest, true, "img/");

    //configure after loaded
    function handleComplete() {
        container.spriteSheet = new createjs.SpriteSheet({
            framerate: 4,
            images: [container.loader.getResult("chests")],
            frames: [[0,0,159,132,0,79.25,65.65],[159,0,193,107,0,98.25,40.650000000000006],[352,0,193,107,0,98.25,40.650000000000006],
                    [545,0,113,147,0,56.5,73.4],[658,0,180,149,0,56.5,75.4],[838,0,180,149,0,56.5,75.4], //center bounds
                    [0,149,116,97,0,57.25,47.75],[116,149,111,94,0,55.25,44.75],[227,149,111,94,0,55.25,44.75]],
            animations: {
                //"run": [0, 1, "run"],
                topClosed: [6], topOpenReward: [7], topOpenNothing: [8],
                sideClosed: [3], sideOpenReward: [4], sideOpenNothing: [5],
                bottomClosed: [0], bottomOpenReward: [1], bottomOpenNothing: [2]
            }
        });
    }

    //update
	container.tick = function (event) {
        for (i=0; i<container.children.length; i++){
            if (container.getChildAt(i).isClicked()){
                container.removeChest(i);
            }
        }
    }
    container.addChest = function (x,y,scaleX,scaleY,frame){
        container.addChild(new Chest(x,y,scaleX,scaleY,container.spriteSheet,frame)); //add to stage
        container.getChildAt(container.children.length-1).sprite.on("click", function(evt){ container.getChildAt(container.children.length-1).click(); });
    }
    container.removeChest = function(i){
        container.getChildAt(i).sprite.removeEventListener("click");
        container.removeChildAt(i);
    }
	window.ChestManager = createjs.promote(ChestManager, "Container");
}(window));

Child Container:

(function (window) {

    //constructors
    function Chest(){
        container.Container_constructor();
    }
    function Chest(x,y,scaleX,scaleY,spriteSheet,frame){
        container.Container_constructor();
        container.initChest(x,y,scaleX,scaleY,spriteSheet,frame);
    }

    //instance of class
    var container = new createjs.extend(Chest, createjs.Container);

    //initialize Chest
	container.initChest = function (x,y,scaleX,scaleY,spriteSheet,frame) {
        container.x = x;
        container.y = y;
        container.sprite = new createjs.Sprite(spriteSheet, frame);
        container.sprite.scaleX = scaleX;
        container.sprite.scaleY = scaleY;
        container.sprite.gotoAndStop(frame);
        container.customText = new CustomText(0,0,scaleX,scaleY,"car");
        container.addChild(container.sprite);
        container.addChild(container.customText);
	}
	//public functions
    container.isClicked = function(){ return container.clicked; }
    container.click = function() { container.clicked=true; }

	window.Chest = createjs.promote(Chest, "Container");
}(window));

Result (ignore the backwards 'R' haha)

screencapture-localhost-63342-treasure-checker-Game-html-1463015741077.png

Share this post


Link to post
Share on other sites

You are using the prototype object "container" instead of the instance object "this" inside constructors and methods to affect the properties. Resulting in all the instances having the same x, y properties. (You can check this debuging on the browser)

change "container" to "this" inside the constructor functions and class methods when using properties, example:

function ChestManager() { 

this.Container_constructor(); 

this.addChest(640,100,1,1,"topClosed"); 

this.addChest(1100,360,1,1,"sideClosed"); 

this.addChest(640,620,1,1,"bottomClosed"); 

this.addChest(180,360,-1,1,"sideClosed"); 

}

 

Share this post


Link to post
Share on other sites

Hi mmcs! That solved a massive issue I was having with this game! I feel like I am better understanding js prototyping as whole.

My next goal is to nest more 'containers' inside each other...I may have a question about that later. Thanks again!

Edit: SOLVED! Thank you again!

screencapture-localhost-63342-treasure-checker-Game-html-1463090743426.png

Edited by doppler
fixed

Share this post


Link to post
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.

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.