• Content Count

  • Joined

  • Last visited

  1. Thanks for the reply Ivan. Any chance I could just manually append animation names in that JSON? What does a "valid" JSON look like?
  2. I have the following JSON output of a spritesheet building tool: { "frames": { "Charge0.png": { "frame": { "x": 0, "y": 0, "w": 32, "h": 32 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 }, "sourceSize": { "w": 32, "h": 32 } }, "Charge1.png": { "frame": { "x": 32, "y": 0, "w": 32, "h": 32 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 }, "sourceSize": { "w": 32, "h": 32 } }, "Charge2.png": { "frame": { "x": 64, "y": 0, "w": 32, "h": 32 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 }, "sourceSize": { "w": 32, "h": 32 } }, "Charge3.png": { "frame": { "x": 96, "y": 0, "w": 32, "h": 32 }, "rotated": false, "trimmed": false, "spriteSourceSize": { "x": 0, "y": 0, "w": 32, "h": 32 }, "sourceSize": { "w": 32, "h": 32 } } }, "meta": { "app": "https://github.com/piskelapp/piskel/", "version": "1.0", "image": "data:image/png;base64,iVBORw....(etc)", "format": "RGBA8888", "size": { "w": 128, "h": 32 } } } I have the following code to load it: PIXI.Loader.shared .add('playerCharge', './assets/player-charge.json') .load((loader, resources) => { console.log(resources); //const animation = new PIXI.AnimatedSprite(resources.playerCharge.spritesheet.animations['image_sequence']); //console.log(animation); }); } According to the PIXIJS docs (which unfortunately don't give an example of what a valid JSON file should look like) https://pixijs.download/dev/docs/PIXI.AnimatedSprite.html , the resources instance (playerCharge) should have a spritesheet.animations property with some sort of named property in it. It does not. The animations object is empty. Therefore, I can't pass anything to AnimatedSprite. What's the right way to use this? Seems the only way is to manually iterate through the spritesheet.textures object, which is, strangely, populated.
  3. Daaaaayum so this worked: character.skeleton.findSlot('body').sprites['char/body'].texture = PIXI.Texture.from('spine/object/test/body.png'); Arbitrary PNGs can be used, this is even better than we could have hoped for! Thanks very much
  4. Oh snaaaaaap this is glorious! I wish something like this had been documented. Maybe it is and I'm just not seeing it. Still a bit of tweaking to get it work, but this may be exactly what we're looking for, cheers!
  5. Disappointingly, reading through the spine docs on texture packing http://esotericsoftware.com/spine-texture-packer seems to indicate this won't be possible in the way I"m hoping. My designer colleague (that's learning the spine editor) says he hasn't seen anything like it... will keep exploring though and update here if I find anything
  6. Hmm interesting - so finding some way to make these different attachments "skeletons" instead? I.e., body skeleton, shoe skeleton, hat skeleton, and then stiching them together in code and hot-swapping textures as needed, as opposed to using slots+attachments? I'll look into it but it sounds fairly complicated, i.e. what if a given "body" animation does funky things to the foot + hat, would we need to program that animation in code-side?
  7. We're making a game using Pixi and Spine, utilizing the pixi-spine library (which is built off the spine-ts library). Something we've been chewing on: asset management. Part of our game involves having a character that can have many hundreds if not thousands of different, say, hats. When we export a spine file, it gives us a asset_name.json, asset_name.atlas, and asset_name.png. We've been dealing with hats by making them a "slot" into which the many different hat "attachments" can fit. However, this means all "hats" are included in character.json, character.atlas, and character.png. Ideally, we could have character.json etc and hats.json etc, or even hat1, hat2 etc. This is because we want to slowly add more and more down the road, and while it's not the biggest problem to have to constantly have clients download new character.png (they may be doing so anyway with updates), ideally that would be longer-term cached, and also not filled to the brim with thousands of permutations of hats, shoes, whatever else. What can I start investigating as alternative options? I thought maybe some of the examples for spine-ts would guide me, but they all are just lumped together into massive atlas files and pngs (see their asset folder here).
  8. Yo yo, I'm a bit of a savant at "learning javascript" - went through a bootcamp, picked it up in 3 months, functioned as a teacher after, tutor people of all ages (including people trying to become professional developers) all the time. My suggestions: 1. Learn the syntax first via Code Academy. Search "intro to Javascript." This will get you up and running in the basic syntax in about an hour or three (or more! no shame in that). No-registration-needed alternative: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics (worth reading anyway) 2. Get on some "good javascript practice" resources. Tackle at least https://eloquentjavascript.net/ , start reading https://github.com/getify/You-Dont-Know-JS . Deep dive Callbacks: http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/ Closures: http://javascriptissexy.com/understand-javascript-closures-with-ease/ and Array iteration / functional programming http://reactivex.io/learnrx/ 3. At this point you are more than good enough to start actually making apps. Pick an app, make a clone of it in vue/react/jquery / some dead simple framework. Google tutorials, etc. Mess with websites via the chrome inspector. Crank out a bunch of crappy, janky, hacky apps.
  9. Cheers xerver, that way worked best for us!
  10. Ah, finally turned up something helpful: https://sprite-storm.com/tutorial/pixi-tutorial/dynamic-button-class-pixi-js/ not yet implemented it yet but will comment further if this turned out useful
  11. We're trying to figure the best way to generate our own custom Pixi.Sprite classes in a webpack built, typescript included app. What we're hoping to do, is something along these lines (which we've gotten working but have massive tslint errors from: export class customSpriteClass { constructor(imageURL){ const customSprite: PIXI.Sprite = PIXI.Sprite.fromImage(imageURL); //custom methods, variables, etc return customSprite; } } What we can't figure out is the "proper" way to do this. The above works, but our efforts to modify customSprite with methods that refer to `this` cause tslint errors about given properties not existing on the customSpriteClass type, the return statement results in the super weird "Return type of constructor signature must be assignable to the instance type of the class." error, and our methods throw all sorts of different errors. We tried doing something like "export class customSpriteClass extends PIXI.Sprite", but to get that working we still need to invoke ".fromImage" anyway... It's a bit messy and we're hoping to find someone that's gone through this path already - I've been googling for about an hour and have yet to turn up anything definitive, weirdly. So: Anybody out there ever successfully extend PIXI.Sprite to make their own custom sprite classes? Particularly in typescript?