lars

Hey

I´m having some problems to stop multiple howl objects:

I¨m doing as the following when i starting multiple sounds:

this.soundEventOtherObj = new Howl({
                        src: [this.asset.get("sound/" + pathObj[ii].sound)],
                        autoplay: true,
                        loop: false

                    });

                    this.collectSounds[ii]=this.soundEventOtherObj;

                    console.log(this.collectSounds);

                    this.collectSounds[ii].play();

Its a part of a loop. I collect the howl objects in a array to be able to stop them later.

Så to "restart the sounds" (part of drag and drop) i have to stop the howl objects, and do as the following;

 for (let iii = 0; iii < this.collectSounds.length; iii++) {
               
              
                this.collectSounds[iii].stop();
                this.collectSounds = [];
            }

If i use audioSprite, where im only use one howl object, everything works fine. But unfortunately I cannot in this project.

Is there a way to call multiple sounds on one howl object?

Thank´s ... I will remember that 🙂

It´s working now 🙂

 let spritesheetPropsTexture = PIXI.Texture.from(this.asset.get("images/props.png"));
        let spritesheetPropsSprite = new PIXI.Sprite(spritesheetPropsTexture);
        this.mySheet = new PIXI.Spritesheet(spritesheetPropsSprite.texture.baseTexture, this.imagePropsJson);

        this.mySheet.parse((textures) => {
            let cheese = new PIXI.Sprite(this.mySheet.textures["antenne.png"]);
            cheese.x = 200;
            cheese.y = 200;
            this.scene.addChild(cheese);
        })

"this.asset.get" is just my own reference to files. The only thing i had to change was:

this.mySheet.parse((textures) => {

Her goes my spritesheets

})

Hi All

I'm trying to setup a spritesheet like this:

this.myLoader = new PIXI.Loader();
       this.myLoader
        .add("images","assets/images/props.png")
        .add("json","assets/images/props.json")
       .load(startGame());



function startGame(){
let spritesheetPropsTexture = PIXI.Texture.from("assets/images/props.png");
        let spritesheetPropsSprite = new PIXI.Sprite(spritesheetPropsTexture);
        let mySheet = new PIXI.Spritesheet(spritesheetPropsSprite.texture.baseTexture,"assets/images/props.json");


        let cheese = new PIXI.Sprite(myspritesheet.textures["cheese.png"]);

}

I know that it´s fairly simpel like this:

        let sheet = PIXI.Loader.shared.resources["assets/images/props.json"].spritesheet;
        let cheese =  new PIXI.Sprite(sheet.textures["cheese.png"]);

Hey

im trying to find a way to load the png file directly, instead of using the fnt reference: 

Ok. thanks ...

Im trying to use a spine in a PIXI.Particlecontainer with no luck 🙂

 
const sprites = new PIXI.ParticleContainer(100, {
            scale: true,
            position: true,
            rotation: true,
            uvs: true,
            alpha: true,
        });
       app.stage.addChild(sprites);




const mImgSpine = new PIXI.spine.Spine(this.mpAssets.con);


  sprites.addChild(mImgSpine); // this fails

Getting the error: Cannot read property 'baseTexture' of undefined

Anyone knows if it's possible or its just a stupid idea 🙂 

It works fine with a sprite:  

const mImg = PIXI.Sprite.from(this.image);

sprites.addChild(mImgSpine); // this fails

Hello

Im trying to find a way to use revolt.fx outside the pixi.loader and some of the loadBundleFile loader.

The default way:

   const rfxBundleSettings = 'assets/default-bundle.json';
    const rfxSpritesheet = 'assets/revoltfx-spritesheet.json';
    const additionalAssets = ['assets/rfx-examples.json'];

    //Load bundle files and the additional example spritesheet
    fx.loadBundleFiles(rfxBundleSettings, rfxSpritesheet, null, additionalAssets).then(function (data) {

        app.ticker.add(function () {
            //Update the RevoltFX instance
            fx.update();
        });

    }).catch(function (err) {
        console.log('Error', err);
    });

What I need is a way to load the image, which is referred to  in the "revoltfx-spritesheet.json" file. I need to load that image seperately.

Something like this:

const fx = new revolt.FX(); //loaded via the script tag

    const rfxBundleSettings = 'assets/default-bundle.json';
    const rfxSpritesheet = 'assets/revoltfx-spritesheet.json';
    const additionalAssets = ['assets/rfx-examples.json'];

const image-from-revoltfx-spritesheet = 'assets/revoltfx-spritesheet.png';

    //Load bundle files and the additional example spritesheet
    fx.loadBundleFiles(rfxBundleSettings, rfxSpritesheet, null, additionalAssets).then(function (data) {

        app.ticker.add(function () {
            //Update the RevoltFX instance
            fx.update();
        });

    }).catch(function (err) {
        console.log('Error', err);
    });

and then use it in the fx.loadBundleFiles() as a parameter, or maybe  another way. I´m using Pixi, but are using a costume assetManager loader.

Hey

Spine.js need an update: spine version 3.8.60 has change part of the json structure. I have notice changes in "skins" and "animations" elements.

Hey

I trying to using Spine in my panda2 project, but get an error:

spine.js:4426 Uncaught Error: Slot not found: name at SkeletonJson.readSkeletonData (spine.js:4426) at Class.staticInit (spine.js:6686) at Class.staticInit (core.js:1123) at new Class (core.js:1157) at Class.init (main.js:105) at new Class (core.js:1165) at Class.init (main.js:38) at new Class (core.js:1165) at Class._setSceneNow (system.js:397) at Class._run (system.js:355)

I am using spine version: 3.8.60

Import as this:

.require(
    'game.assets',

    'plugin.spine'
   
    )

 game.addAsset('mytest.atlas');
    game.addAsset('mytest.json');

this.sprite = new game.Spine('mytest.json');
           this.sprite.play('idle', true);
            this.sprite.speed = 0.01
            this.sprite.addTo(game.scene.stage);

"skins": [
        {
            "name": "default",
            "attachments": {
                "head": {
                    "head": {
                        "x": 156.27,
                        "y": -4.07,
                        "rotation": 92.17,
                        "width": 400,
                        "height": 397
                    }
                }
            }
        }
    ],

"skins": {
		"default": {
			"dust01": {
				"dust01": {
					"width": 96,
					"height": 73
				},
				"dust02": {
					"x": -8.12,
					"y": 20.56,
					"width": 86,
					"height": 88
				},
				"dust03": {
					"x": -5.49,
					"y": 34.26,
					"width": 62,
					"height": 52
				}
			}

Im using spine version 3.7.94 an pixi-spine is from: https://github.com/pixijs/pixi-spine

Im using it with ES6 and Node.js

Hey

Im trying to catch a spine timeline event in pixi:

 this.myMille.state.setAnimation(0, "BB-react-benzin-smallCar", false);


   this.myMille.state.onEvent = function(i, event) {

            console.log(event);

            if (event.name == "pickup"){
       console.log('pickup');
   }
          };

But it´s does not seems to work. Any ideas?

Ok solved it, or my college did 🙂

this.collectNinjas.forEach(ninja =>{

                            if (this.ht.checkme(this.spr_hitArea,  ninja )) {

                               
    
                                this.scene.removeChild(ninja);



    
                            }

                        }

Thank you very much for the help Ivan. Super nice to have guys like you around 🙂

Heres a working app. Its still in the Actors.js i doing my intersection. Thank you very much for having a look at it.

Sorry. Theres only one comparison. So maybe thats the problem. But how do I compare with multiple object. I tried something like looping through my comparison

  this.setNinja = setInterval(() => {


 this.spr_ninjaCon = new PIXI.Container();
 this.scene.addChild(this.spr_ninjaCon);

this.ninja_hitArea = new PIXI.Graphics();
                        this.ninja_hitArea.beginFill("0x000000");
                        this.ninja_hitArea.alpha= 0.5;
                        this.ninja_hitArea.drawRect(-20, -20, 40, 40);
                        this.spr_ninjaCon.addChild(this.ninja_hitArea);

   this.collectNinjas.push(this.spr_ninjaCon); // pushing object into a array

}, 10); //END interval

this.app.ticker.add(() => {

 if (  this.collectNinjas.length > 0) { // is there any object


for(let ii = 0; ii < collectNinjas.length; ii++){

   if (this.ht.checkme(this.spr_hitArea, collectNinjas[ii])) {

console.log('intersection true');

    this.scene.removeChild(this.spr_ninjaCon);

}
}
}

 }); //End app.ticker

Ok. Heres it is. And thank you very much for your time. Hope the code make sense 🙂

I have attached 2 files:

The Hittest class and the Actor class. Where it all happens. Hopefully you will be able to read it in a minute 🙂

Hittest.js

Actors.js

Hello Everybody

Trying to make a collision detection between two object.

I have one object there is going to catch another object. Theres a new obejct to catcht every 10 seconds, and every thing goes fine when i catchs one object at time. But when theres multiple object on stage, something going wrong:

Heres what im doing:

Creating a "collector":

this.spr_Con = new PIXI.Container();
this.scene.addChild(this.spr_Con);

//Then creating the hitarea

  this.spr_hitArea = new PIXI.Graphics();
                this.spr_hitArea.beginFill("0xffffff");
                this.spr_hitArea.alpha= 0.5;
                this.spr_hitArea.drawRect(-20, 0, 40, 40);
                this.spr_Con.addChild(this.spr_hitArea);

  this.setNinja = setInterval(() => {


 this.spr_ninjaCon = new PIXI.Container();
 this.scene.addChild(this.spr_ninjaCon);

this.ninja_hitArea = new PIXI.Graphics();
                        this.ninja_hitArea.beginFill("0x000000");
                        this.ninja_hitArea.alpha= 0.5;
                        this.ninja_hitArea.drawRect(-20, -20, 40, 40);
                        this.spr_ninjaCon.addChild(this.ninja_hitArea);


}, 10); //END interval

export default class Hittest {


    constructor() {
   
    }


    checkme(a,b){

        var ab = a.getBounds();
        var bb = b.getBounds();
        return ab.x + ab.width > bb.x && ab.x < bb.x + bb.width && ab.y + ab.height > bb.y && ab.y < bb.y + bb.height;

    }

};

  this.app.ticker.add(() => {

 if (  this.collectNinjas.length > 0) { // is there any object

   if (this.ht.checkme(this.spr_hitArea, this.ninja_hitArea)) {

console.log('intersection true');

    this.scene.removeChild(this.spr_ninjaCon);

}
}

 }); //End app.ticker

Right now, when i want to "disable multitouch" I do the following:

this.mouseCounter = 0:

On a pointerDown event:

this.mouseCounter++;

if(this.mouseCounter < 2 ){

doSomeThing

}

On a pointerUp event:

this.mouseCounter = 0;

Simply q 🙂 Is there a better way to do this.

Hi Ivan

My drag and is not included in my example, it´s work ok, only, some attemp to add a object from one container to another container, and atemp to get it back to the original container 🙂

Hello All

I trying to make a object be dragged into a container and then be a child of this container like this:

//places in a pointerup event

let bl = otc.skeleton.findBone("left-hand-bone");

            let point = oc.toGlobal({
                'x': bl.x,
                'y': bl.y
            });

            this.position.set(point.x - (oc.width - 5), point.y - (oc.height - 30));

            // oCon.toLocal(this.position, this.parent, this.newPosition);//this i did not manage to get to work
            oc.addChild(this);//the container where drop the object(this)

            this.position.set(point.x - (oc.width - 30), point.y - (oc.height + 30));

And work fairly 🙂 But then when i want to drag the object out of the container again i gives me som problems:

//placed in a pointerdown event

if (globals.objectUsed) { // if the object is dragged to the new container in first place

  oCon.addChild(this); // send it back to its original container


            this.position.set(e.data.getLocalPosition(oCon).x, e.data.getLocalPosition(oCon).y);
            globals.objectUsed = false;
            isIntersected = false;


        }

It´s kind of work. But the idea is that when the object is placed the first time and I want to drag it back to the original container its should happend when I startDrag(pointerdown), but i have to wait for the pointerup otherwise I still drag the object in its parent container (whichs is having a drag method. Could anyone guide be in the right direction it would be so nice ... hopefully me explaining  its not to much rubbish 🙂

Regards Lars

Thank´s a lot Enpu. Was actually looking in the Spine doc. But did´nt find it ... sorry :-) 

Hello

Anyone knows how to check if a Spine animation is complete. Tried:

player.onComplete();

That did it. thank´s  a lot :-) 

Yes im using Pixi plugin and my spine works fine, but is not interactive. Where do I disable webGL. Tried to set it to false in the config. 

Ok. I tried that to, and I cannot visual see the debug draw in the Panda2 editor when activate #. If I work outside Panda2 editor (Brackets) would i still be possible for me to debug the hit area in a browser like: ?debugDraw=true 

Heres what i tried (I startet with a class, but for now, to test is down to basic :-) :

var container = new game.Container();
container.position.set(300, 800);
container.interactive = true;
container.hitArea = new game.Rectangle(237.15, 218.37);
container.hitArea.x = -200;
container.hitArea.y = 218;
container.addTo(this.stage);


var player = new game.Spine('kristian-ronnie.json');
           //player.hitArea = new game.Rectangle(200, 500);
         //player.position.set(300, 800);
         player.play('idle', true);
       
player.addTo(container);
    
        
       container.click = function() {
            console.log('check clicked');
            
        }; 
    }