forleafe

Members
  • Content Count

    61
  • Joined

  • Last visited

About forleafe

  • Rank
    Advanced Member

Contact Methods

  • Twitter
    forleafe

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Yeahh you're totally right. It was written right in the console. To my defense though, I was actually running http-server, but the problem was that firefox, for whatever reason, doesn't open local files by default in localhost:8080 like it used to. I had to actually navigate to Localhost:8080 in the URL bar for the code to run. Anyway, thanks for pointing that out, hun. ;; ❤️ xoxo
  2. Using Pixi 5.1.0 and following these directions (the most recent ones): http://pixijs.download/release/docs/PIXI.Spritesheet.html Just like the Doc says, I load in the spritesheet via: PIXI.Loader.shared.add("sprites/spritesheet.json") And then I can access it via: PIXI.Loader.shared.resources["sprites/spritesheet.json"].spritesheet; But as you can see from my screenshot below: PIXI.Loader.shared.resources["sprites/spritesheet.json"] returns an object, so it looks like the JSON file got loaded in, but the ".spritesheet" property just isn't there and comes up "undefined". Am I missing something or is this functionality broken in PIXI?
  3. I'm following the directions in the documentation to the T here, and I'm just not getting why this isn't working. var state, bunny, sheet; // Create our application instance var app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, backgroundColor: 0x2c3e50 }); document.body.appendChild(app.view); // Load the bunny texture PIXI.Loader.shared.add("sprites/spritesheet.json") .load(spriteSetup) .load(startup); function spriteSetup(){ sheet = PIXI.Loader.shared.resources["sprites/spritesheet.json"].spritesheet; } function startup() { bunny = new PIXI.Sprite(sheet.textures["bunny.png"]); } with this I'm getting "TypeError: sheet is undefined" Why..? The directions on the documentation say: PIXI.Loader.shared.add("images/spritesheet.json").load(setup); function setup() { let sheet = PIXI.Loader.shared.resources["images/spritesheet.json"].spritesheet; ... } What am I missing here?... Why is sheet coming up undefined for me? Particuarly, in the console the part where it comes up "undefined is at the very end, that "spritesheet" bit. That property/method just isn't there. I'm wanting to blow past this here, but PIXIv5 has been giving me a lot of little issues like this. I used to be able to create new applications so easily, now I'm getting hung up forever over the dumbest things.
  4. I can't thank you enough for your help, it seriously means a lot to me and has helped tremendously! I can't wait to show off what I make with this~ xoxo -Clover
  5. I feel a little ashamed. This was a pretty basic mistake. But yes, while I originally learned to code in JS, my job has forced me to do a lot of work in a proprietary language called "APEX" which is basically Java with some extra primitives. So I spend all day in Java and forgot what prototypes even were. I had to review them just now, and I feel a little dumb. I forgot that the Prototype property is how we ADD a new method/property to a constructor. so knowing this... var bunbun = new PIXI.Sprite(app.loader.resources.bunny.texture); bunbun.containsPoint(pixiPointGoesHere); In your code, you were ADDING new data to the "containsPoint" method to the PIXI.Sprite constructor, correct? Question: Once the Hitmap is generated, I see we have an array of what I believe are all the pixels in the sprite. How can we use this data to retrieve the color of any given pixel? Is there a method/property that can help us with this?
  6. Okay I give. I really just need a function where I give it a point, and I get back a sprite color, and I'm just not understanding what steps I need to take to turn the code you've written into that. Part of the problem is I'm just not understanding what you've written well enough to know how to utilize it properly. I really just don't get it. Like, how do I kick this thing off and get it to generate a hitmap, then where is the hitmap being stored? Then how do I get a color value out of that? The Code: https://pastebin.com/pJN65ZS6 What I've tried: running in the console: PIXI.Sprite.prototype.containsPoint(app.stage.children[0].position); PIXI.Sprite.prototype.containsPoint(tempPoint); PIXI.Sprite.prototype.containsPoint(500); var p1 = new PIXI.Point(960,472); PIXI.Sprite.prototype.containsPoint(p1); //Basically all of these return: TypeError: this.transform is undefined //I'm so confused, How does this thing work? Any help would be wonderful, as I think I just don't have a clue what I'm doing at this point.
  7. omigosh!! Oh no!! The link that you posted with the code doesn't have hardly anything in it anymore?! Did the code get deleted? ;; If so, is there anywhere you kept it where I can find it? I only just got around to trying to implement it. https://www.pixiplayground.com/#/edit/EOxtz6zy7rsr2ryzzPNBC Edit: Okay PHEW, found a cached version of the page on my laptop and put the code here: https://pastebin.com/pJN65ZS6
  8. Oh darn!! I was going to work on this over the weekend, but thank you very much for writing this. I very much so appreciate it! I'm looking over what you wrote, and had a couple of questions about it. Your containsPoint function looks like it contains all of the necessary logic for converting the bunny sprite to a bitmap image that we can determine the pixel color with if we're given a point. But as is, does this function actually return the pixel color of a given point yet? I'm having trouble understanding what this function will actually end up doing and what further work I'll need to do from here. Second, I'm not sure I'm quite following why on mouse over, the bunny sprite has a tint filter added to it. Is there a reason you added this? Thanks!
  9. I'll absolutely work on this, and come up with a solution. But before I can begin I need to do a good bit of additional research/learning, and be 100% sure of this approach you're suggesting. I'm still a little unsure that I fully understand the approach. So let me get this straight: My objective here is to have a function that, when given a coordinate point value and a sprite, it will return the pixel color in either RGB or Hex. In order to do this, I need to grab the image from the Pixi loader, and then run a standard Javascript method called getImageData() to break the image down and retrieve all of the data from it. I then need to sort through that data and build an array which will contain every pixel's position and color. From there, A function can easily be made which can retrieve the necessary information from the array. Is my understanding correct? If I'm misunderstanding anything at all please feel free to correct me. To my knowledge, I'll need to do a little extra research on the getImageData() method, and learn what the heck 2D context is. Anything else you recommend I research here? Once again, I deeply appreciate all of the help! I do hope to create something that is useful to many people.
  10. Thanks so much for your reply, but I have a few additional questions if you don't mind, hun? You say use getimagedata to fetch all of the image data from the entire canvas, but I just need the data from one black and white png Sprite, which may not even be visible on the screen. It would be covered up by other sprites. Also, why do I need to convert it to a monochrome image if the image I'm providing is already black and white? Lastly, what do you mean by "take original source?" Thanks so much for your help! 💕
  11. I'm not sure that's quite right. It says the tint value "applied" to the sprite. But we're not applying any tint here I don't think. The map is just a black and white colored png that gets loaded in. I need to be able know, given a position, whether a part of that sprite is black or white.
  12. Is there a way for PixiJS (or any plugin/script) to return the color value of a sprite if given a point value to check? What I'd like to do is create a collision map, which would be a large sprite with nothing but black and white shapes. This sprite would be on it's own layer underneath a painted background image. a character sprite would move around on a layer above, and any time the edges of it collides with a black part of the collision map, it would hit a wall.
  13. Okay I have to ask, What in the world are you doing that needs 10,000 sprites? My focus is primarily 2D animation/art and I can't think of a thing that would need that many sprites. Even 10,000 raindrops would be extremely noisy and distracting I'd think. Don't get me wrong though, I find it fascinating! Thank you so much for your explanation though. I have a much better idea of how the particle container works.
  14. Yep. Spot on! That fixed it. Thank you so much. okay so this begs a few questions. 1) What exactly are particles and when is a good time to use them? 2) Why would a particle container prevent animations from running smoothly? I thought the very purpose of them was too offload rendering to the gpu or some thing like that.. so I can render more sprites on screen at once.
  15. Tried on the latest version of pixi 4.8 and it made no difference. Guess I'm gonna have to build my own time based animation code. @botmaster Going to have to look more closely at your code, because at a glance it didn't really make any sense. Value/T = total value per miliseconds. - Value? Value of what? What's this function trying to give me?