KamiFightingSpirit

Members
  • Content Count

    35
  • Joined

  • Last visited

About KamiFightingSpirit

  • Rank
    Advanced Member

Recent Profile Visitors

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

  1. I believe it is happening because the higher z-indexed parent's siblings are always indexed higher than the children of that parent ( their nieces/nephews). Is there a way to remove the connection between the parent's z-index and it's children and instead just use a global z-index?
  2. I have a container that is filled with objects, each of these objects have children. When the user hovers over the objects the children appear visually on the screen. However, the children do not appear in front of all objects in the grandfather container, only it's immediate parent. Is there a way to make it appear in front of all objects in the grandfather container as well?
  3. I fully appreciate your help! And I did go through the source code (I have pixi.js always open and go through classes all the time now). It's just hard to understand when you're pretty new and have no one around to ask but online! It is often easier for me to get an intuitive sense for the code and then go in and figure out the details for confirmation. For instance, reading through what you linked, I have questions on the _variableName. I know the "_" designates private variables, but how this all works and their correct usage is still pretty confusing to me (what makes something private? is it just when it can't be accessed without a get function? are there are areas that are correct usage for it?) Also, this syntax: for (let i = 0, len = items.length; i < len; i++) { items[i][name](a0, a1, a2, a3, a4, a5, a6, a7); } We have an array within an array, but how does the whole (x,y,z, ....) work? I have to look that up... This is why it is tough for someone new, I have a single question that I want an answer to, but in order to get the answer for that question I may have to study several other things for a few hours which would be a distraction (although needed eventually).
  4. Are the runners kicking off the init() functions in each of the different files? So they are kind've like a set of switches, that each time a file is opened, they try to run certain functions? In your example case those function names are: this.runners = { init: new PIXI.Runner("init", 0), load: new PIXI.Runner("load", 0), beforeAdd: new PIXI.Runner("beforeAdd", 1) }; And this is kicked off for each file via: this.addComponent((this.assets = new Assets(this))); this.addComponent((this.phys = new Phys(this))); this.addComponent((this.mouse = new Mouse(this))); this.addComponent((this.shaders = new Shaders(this))); this.addComponent((this.models = new Models(this))); this.addComponent((this.level = new Level(this))); } addComponent(comp) { for (let key in this.runners) { let runner = this.runners[key]; runner.add(comp); } }
  5. I'm going through your app, can you help me understand these runners? in app.js you declare your runners: // Application components this.runners = { init: new PIXI.Runner("init", 0), load: new PIXI.Runner("load", 0), beforeAdd: new PIXI.Runner("beforeAdd", 1) }; Then in assets.js, after loading up your image assets, you kick off a runner using the .run() method: loader.load(() => { this.app.runners.load.run(); }); but I don't understand what this is doing now? What is it executing? I read through the documentation and looked up the runner class in the source code but it is confusing how this is working. Does it call the load() function found within models.js? If so, after completing models.js does the computer go back to line 39 in app.js? this.addComponent((this.phys = new Phys(this)));
  6. Would this be the same for a website? Is there some sort of dynamic router that I can use if I am linking everything through a single PIXI.app?
  7. Hey! I have a question about writing clean and DRY code. Do people generally just have one file for a single page app and put everything within their loader.load(setup) function? Or is splitting stuff off from that and using modules better? Some of the code that I have written so far and currently cleaning up: https://github.com/KamiFightingSpirit/pixi-particles/blob/master/test/pixi-v5-iife/isometryTest.js If you could point out anything glaringly bad I would appreciate the feedback! I want to improve!!
  8. Yeah, it's just hard for me to know what is possible with my stage in development. I'm always worried about spending hours on something which is an obvious dead end to someone with more experience. I am reading through the source code more and it is helpful and I have gotten used to reading the API docs which is awesome, but there is still a lot of experience I need in order for the source code to be as helpful as I know it can be. That will come in time. I'm learning a ton through this project and this community!
  9. Took me a bit of thinking, but got what I needed with the following (where planetOrbitControlArr is an array of all my planet objects): planetOrbitControlArr.map(planet => { planet.graphic.zIndex = Math.floor(planet.graphic.position.y); });
  10. Do you mean, /** @class */ for how to search for a class?
  11. Hello! I am back yet again. I have a quick question on Pixi-layers: https://github.com/pixijs/pixi-layers I am building a solar system and want the planets to orbit a sun at it's center. As such, when a planet has a lower y-value, I want it to automatically be placed in the background (have a lower z-value) and when it has a higher y-value I want it to be placed in the front. I saw this example: http://scottmcdonnell.github.io/pixi-examples/index.html?s=display&f=zorder.js&title=Z-order&plugins=pixi-display However, this is event driven. I want it to be constantly checking the planet's y-position and update the z-index accordingly relative to one another. Will pixi-layers work if it's attached to the ticker? Is there a way to do this without pixi-layers that would be simpler?
  12. Hey, For my program, I have a loader which loads a bunch of assets, after loading it calls the setup function. It does this via: loader .add("./assets/plutoShrunk.jpg") .add("./assets/sun.jpg") .add("./assets/mars.jpg") .load(setup); My setup function then does everything else (creating containers, creating textures from resources, drawing graphics etc) including kicking off the ticker. At the bottom of my setup function, but still within its scope, I have added some event listeners: //Add event listeners plutoGraphic.on("mouseover", plutoHoverEffects); plutoGraphic.on("mouseout", plutoHoverEffects); marsGraphic.on("mouseover", marsHoverEffects); marsGraphic.on("mouseout", marsHoverEffects); My problem is, these sometimes load in and sometimes they don't (meaning I cannot access them by hovering over the chosen object). Any ideas what I am doing wrong? Please let me know if more information is required.
  13. If I adjust the scale of a container via: container.scale.y = 0.5; how can I figure out the math behind making a child of that container appear "normal" (i.e. not affected by its parent x and y scale differential)? Is there any simple guide that explains how these things relate? Preferably explained in a way that a noob can understand. 😆