kirabook

Members
  • Content Count

    4
  • Joined

  • Last visited

About kirabook

  • Rank
    Newbie

Profile Information

  • Location
    United States

Recent Profile Visitors

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

  1. kirabook

    Understanding pixi-particles

    Urg, thank you so much. I'm glad I was on the right track at least and my assumptions were right. I'm not as stupid as I thought. I've moved the update function outside of the function creating the particles and it works like a charm. Thanks!
  2. kirabook

    Understanding pixi-particles

    Hello everyone. I have a few questions related to a project I'm working on and there's one area I keep getting stopped up on and I can't seem to wrap my head around it. I'll be sharing code for it, but I also want to warn you that I'm pretty new to pixi so there might be all kinds of wrong things here and there that could be contributing to this issue. The project is pretty simple. A series of panels appearing in sequence to look like a comic book. There will be some animation here, some music there. Voice clips, etc etc. For the most part (save optimizing it probably), everything is going pretty swell. http://kirasandbox.com/gohi/ (If an image is missing, you see a blank page, or a hostgator namespace error pops up, you should be able to just refresh until it decides to spit out the right page. I just bought this domain so that I didn't have to share the actual domain for my project. It's password locked and would be bothersome to have people view it that way) There's the overall stage, the 'game'. Then the layers inside are layered containers: - page -- panels --- sprites (along with the aforementioned music and sfx, I've muted music and voiceovers for this. The text is being put on the DOM). For each panel, I wanted to be able to add a weather effect. Using the snow and rain examples (I'm using snow to test and it's colored green: https://pixijs.io/pixi-particles/examples/snow.html ), I technically got it working, but... with each new panel, the speed of the emitter seems to increase. To be honest, I don't think I implemented my idea correctly at all and I haven't been able to fix this. I'm kind of just feeling around the dark hoping to hit jackpot. I think it has something to do with this: var update = function(){ // Update the next frame updateId = requestAnimationFrame(update); var now = Date.now(); if (emitter) emitter.update((now - elapsed) * 0.001); framerate.innerHTML = (1000 / (now - elapsed)).toFixed(2); elapsed = now; if(emitter && particleCount) particleCount.innerHTML = emitter.particleCount; // render the stage //renderer.render(stage); }; Like, maybe the update emitter is multiplying itself against existing emitters. I had code in that destroyed the previous emitter before starting a new one at some point, but the result was the same. The effects speed up each new panel/emitter created. Maybe that's not the issue. Maybe all my code is a mess and it's finally catching up to me. (for example, the whole renderer situation. I commented out/deleted all references to that but maybe I needed it?) If anyone has the time, I really just want to figure out what's causing the particles to increase in speed. Here are the files I think are most relevant, I hope it makes sense to everyone (if you need something else, I can provide a link): Particle creation: http://kirasandbox.com/gohi/assets/js/particles.js Panel creation (it's just being inserted into the weatherContainer created on each panel): http://kirasandbox.com/gohi/assets/js/buildPanel.js Pixi setup (not much going on with that, maybe that's the problem?): var game = new PIXI.Application(1280, 720, {backgroundColor : 0xFFFFFF, view : stage}); P.S: As I mentioned when I first linked this website, I just bought the domain so it's acting kind of funky right now? You'll know it's properly loaded when it looks something like this:
  3. kirabook

    Alphamask for multiple sprites?

    Well, I ended up working out the solution. It's a little more work for me, but I've created the mask with a polygon instead. Now it properly trims the edges of all the sprites. To make even more simple, each sprite has been added as a child to the background sprite. Hopefully that doesn't cause me a headache later on. This method does seem to have some performance issues, but I'm not sure how else to achieve this. ** Polygon mask on top ** ---- Sprite B ---- Sprite A - Background image
  4. kirabook

    Alphamask for multiple sprites?

    So, I feel like maybe what I'm trying to do is very simple and I'm overthinking it, but I've spent the entire day on this and I think I just need someone to put me on the right track or tell me it's not possible. Essentially, I want to use 1 image to mask multiple sprites. I have various panels that look like this (ignore the images used, they're placeholders) In each panel, I intend to have multiple sprites inside of it. Technically, it works. Here is the first "layer" of the sprite that overlaps the red panels. This works too, as intended. It is currently stacked like: - Background image - Red panel SO, the issue comes in when I want to mask more images on top. Again, it technically works... but I guess the issue is that the red panel is still being used to create the mask (which is technically what's supposed to happen), but it's not what I was intending. (I'm providing images because I'm terrible at explaining, sorry). In this image below, it's become stacked like - Sprite B - Red Panel - Sprite A - Red Panel - Background image - Red panel What I need to happen is for the red panel to act as the mask for multiple sprites. Is this possible? I've been doing some reading and searching and should I be using a polygon mask? Below is the code I made for this. Hopefully it makes some sense. Please excuse the mess //Call this in every state for now, but maybe we can make it universal var panelsJSON = this.cache.getJSON('panels'); var testpage = this.cache.getJSON('testpage'); console.log(panelsJSON); console.log(testpage); for (i = 0; i < Object.keys(testpage.pages).length; i++) { //This loop is for building pages //sets the background of the page this.add.sprite(0, 0, testpage.pages[i]["bg"]); //sets a temporary variable that stores the panels var panels = testpage.pages[i]["panels"]; for (a = 0; a < panels.length; a++) { //This loop is to piece together each panel on each page //setting variables for each panel var type = panels[a]["type"]; var sprites = panels[a]["sprites"]; var panelBg = panels[a]["bg"]; //setting variables for panel types var panelWidth = panelsJSON.action[type]["width"]; var panelHeight = panelsJSON.action[type]["height"]; var panelPositionX = panelsJSON.action[type]["positionx"]; var panelPositionY = panelsJSON.action[type]["positiony"]; //Setting bitmap data for panel based on which type panelsJSON.action[type]["bitmapData"] = this.make.bitmapData(panelWidth, panelHeight); var bitmapData = panelsJSON.action[type]["bitmapData"]; //setting panel bg using the bitmap data panelsJSON.action[type]["alphaMaskBg"] = bitmapData.alphaMask(panelBg, type); var alphaMaskBg = panelsJSON.action[type]["alphaMaskBg"]; this.add.sprite(panelPositionX, panelPositionY, alphaMaskBg); for (s = 0; s < sprites.length; s++) { //This loop is for each sprite included in each panel including characters and objects //The problem is I'm using the bitmapData variable here again, which masks the sprite based on the red panel, which is the problem. var spriteName = sprites[s]["name"]; panelsJSON.action[type]["alphaMaskSprite"+s] = bitmapData.alphaMask(spriteName, type); var alphaMaskSprite = panelsJSON.action[type]["alphaMaskSprite"+s]; this.add.sprite(panelPositionX, panelPositionY, alphaMaskSprite); } } } At some point, I thought maybe if I use the alphaMaskBg variable that I created as the alphamask data would create the effect I wanted, but the red panels still plagued me for (s = 0; s < sprites.length; s++) { //This loop is for each sprite included in each panel including characters and objects //The problem is I'm using the bitmapData variable here again, which masks the sprite based on the red panel, which is the problem. var spriteName = sprites[s]["name"]; panelsJSON.action[type]["alphaMaskSprite"+s] = alphaMaskBg.alphaMask(spriteName, type); var alphaMaskSprite = panelsJSON.action[type]["alphaMaskSprite"+s]; this.add.sprite(panelPositionX, panelPositionY, alphaMaskSprite); } My only other thought was to make the red panel images transparent, but that defeats the purpose. Then my next leap of logic was to use phaser to make the red panels transparent, but that probably doesn't make much sense either (if it's even possible). If someone could set me on the right path, it'd be greatly appreciated In the end, I need it to work like: - Sprite B - Sprite A - Background image - Red panel