lars

Members
  • Content Count

    61
  • Joined

  • Last visited

Posts posted by lars


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

     

     


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

    })

     


  3. 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"]);
    with the shared loader.
     
    But i need to have a reference to the image. Anyone knows how to solve this.

  4. Hey

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

    <page id='0' file='myfont.png'/>
     
    Is there a way to do something like this:
     
    const bitmapFontText = new PIXI.BitmapText('some text'"myfont.png", { font: '20px myfont', align: 'left' });
    or another workaround.

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

     


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


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

    And further:

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

    And use like this:

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

    When I download a spine spritesheet (spineboy) made with Spine version: 3.6.50 everything works. I can see  different in the Spine json files at the "skins" declaration. Dont know if that's the problem :

    version: 3.8.60

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

    version: 3.6.50:

    "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
    				}
    			}

    I have downloaded the latest Spine.js version on panda.io

    I have attachs the Spine spritesheets export files and my main file


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


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

    These are drawn to stage in a interval

    And then I tried to compare intersection in a for loop like this:
     
    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

    But that did'nt do it.

     

    I will send you a clean working app 🙂

     
    31/5000
     
     
     
     
     
     
     
    31/5000
     
     
     
     

     


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

     

    Then creating some objects to collide with:

      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

    So every 10 seconds i spawn a new object. Then I have a simple hittest class:

     

    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;
    
        }
    
    };

     

    And check for intersection:

      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

    Every things goes fine as long as there is only one object "living" on stage, but as soon I have multiple object on stage it cant allways recognize the intersection. Is it my Hittest.js class that fails om multiple object? Hope someone can help me.


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


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


  13. 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');
                
            }; 
        }