lars

Members
  • Content Count

    57
  • Joined

  • Last visited

Everything posted by lars

  1. 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.
  2. 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
  3. 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.
  4. 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.
  5. 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
  6. 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
  7. 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?
  8. 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 🙂
  9. Heres a working app. Its still in the Actors.js i doing my intersection. Thank you very much for having a look at it.
  10. 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
  11. 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
  12. 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.
  13. 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.
  14. 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 🙂
  15. 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
  16. Thank´s a lot Enpu. Was actually looking in the Spine doc. But did´nt find it ... sorry :-)
  17. Hello Anyone knows how to check if a Spine animation is complete. Tried: player.onComplete();
  18. lars

    Spine and events

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

    Spine and events

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

    Spine and events

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

    Spine and events

    Hello Im trying to make my spine object interactive: var player = new game.Spine('mySpine.json'); //player.hitArea = new game.Rectangle(200, 500); player.position.set(300, 800); player.interactive = true; player.play('idle', true); //player.speed = 0.01 player.addTo(this.stage); player.click = function() { console.log('check clicked'); }; That did not work. I tried to put it in a container. That did not help either. It works OK an a sprite object.
  22. lars

    Spine and mesh

    Works perfectly :-) Thanks
  23. lars

    Spine and mesh

    So cool.
  24. lars

    Spine and mesh

    Super fantastic ... I really like what you have done with Panda...