Search the Community

Showing results for tags 'pixijs'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 129 results

  1. I have sprite image but i don't have JSON filie and also no idea .about how to create json file .. is there any JSON generator available in the web ?
  2. Less lag in video panning - is my code so far I am wondering is there a way that would cause less lag when the mouse moves left, right, up, down, etc . Also is there a where that when the mouse goes out side of the canvas to keep on panning to show the whole video
  3. Hi all, i am trying to use Pixijs inside a vue instance and have encountered a strange issue. I know it might no be directly related to Pixi.js and you can jump to the tl;dr section for a question about how to update sprites locations, thanks, ------------------------------ All worked as expected when i used the particle container example from Pixi's official website.,js,console,output But now I want to have more control over the location of those sprites, like using an array to re-assign x, y, of each sprite. so I add a reference of pixi instance as vue's data element at line 12 and received an error It would throw a similar error if I want to pass a reference of ``maggots`` by using this.pixiInstance = maggots. jsbin seems to have added some protection or sandboxed this but it would caused a stackoverflow if you run this directly inside Chrome. So I am really desperate here on how to access ``maggots`` so I can loop thru and update all its elements... My last resort would be removing the canvas dom element and redraw it everytime i have to update the sprites data. i really don't want to do that Edit1: I am using the import below to import pixi, not sure if this would make any difference. =================TL;DR and Pure Pixijs question========================= Once you have initialized a Pixjs instance and have added sprites to it, what's the best way to access the instance so you can loop and update sprites' x, y values?
  4. Arcade Builder NG Launch

    Heya guys, Today I've decided to put Arcade Builder live on Newgrounds, hopefully I'll get some feedback and then can but this project to bed after any tweaks and then onto the next project. Arcade Builder is a business simulator which lets you build and manage your own games arcade. You can find the link here: If you have a Newgrounds account it'd be great to receive some votes/reviews. It is written in HTML5 and uses PixiJS to render. It took roughly 5 months in total with a lot of chill time in between (lurking here and playing games). I still plan on doing more with this game, but under a different title/theme next time, I'm thinking of adding crafting. For those who may be interested, here is my favourite video during development: I have created a playlist of all the footage I took during development: Thanks guys, have fun, Jam.
  5. I thought about using TravisoJS ( but I haven't seen any games that use it. Does anyone have experience with it?
  6. Hi all, I'd like to show my first game that I've developed called Matchy Matchy. I've made a couple of small demo's in the past, but never a fully finished game. I consider this game at version 1.0, but can think of many many improvements. The game is a one versus one match-3 game. You can play against other players or against the computer in a series of levels that gradually get harder. I would love some feedback! Nick (
  7. I am a new user of PixiJS and wondering, how we can visualize weather data using PixiJS with or without Mapbox. Some sample demos (not PixiJS implementation) are and and there are couple of data sources (e.g., publicly available. Can anyone share any PixiJS implementation of weather data with brief explanation?
  8. My code has a setup function that runs at the start. Within that setup function I have the left and right arrow keys setting up movement like so: left = keyboard(37); = function(){ moveCharacterLeft(); }; It works fine. But then when I get a gameover my game runs a reset code and all variables are reset back to their former states and the setup function runs again. Well this means that the above function runs again as well, and this makes it so that each time I get a gameover and reset the game, the above function will run multiple times for each button press. So after one game over, if I hit the left key, the moveCharacterLeft() function will fire twice, and my character moves twice as far.. Three times for the next gameover.. ect.. Does anyone know how I can prevent this from happening? Admittedly I don't quite understand what's happening here..
  9. I am trying to visualize cascading effect of natural hazard/disaster on interdependent critical infrastructures applying WebGL. Suppose I have two critical infrastructures- Water Distribution system and power generation system with geolocation (latitude/longitude). Due to flooding or Hurricane, some substations of power generation system may be damaged and as a consequence, some substations of water distribution system may stopped working due to the power outage/blackout. So, is it possible to create an interactive visualization displaying effect of flood/hurricane on the substations of power system and damage effect of power substations to the water substations using PixiJS? Please note that I need to visualize both systems on geographic map and cascading effect/failure of substations over time (maybe, using slider to show cascading failure per minute/hour in a 24 hours day). Attached is an image showing both intradependency in a critical infrastructure and interdependency between 5 critical infrastructures. Any related PixiJS example of web visualization with real/fake data will be highly appreciated. Thank you.
  10. Inverse Masking

    Hey guys, I've trawled through google, here and the github repo but couldn't find a good way to perform an inverse mask. I need the mask to be applied on every rAF, so generating a new canvas and re-uploading the texture to the GPU and rendering is going to be to expensive I think. I've read that this is very easy to do in WebGL, but I would like to keep canvas fallback if possible. I already have a mask texture that I want to apply, but obviously it's being used as a normal mask. Are there any good performant solutions for this?
  11. Hi Guys, The issue I'm having at the moment is with zooming and pinching a web page (pinching on laptops) with my game in it - causes the game to zoom in and therefore change the UI of the game. A demo can be seen here of the issue, simply zoom/scroll to see various bugs appear throughout the game once a new game has started: I can't seem to find just one solution for disabling zoom and pinch altogether on all browsers - am I missing something here? Any clues or tips, the renderer is PixiJS. Thanks, Jammy.
  12. First of all, let me say that I love the apparent philosophy of PixiJS: do rendering well, and let userland be userland. Awesome. I'm playing with different ways of handling interactions that originate within the scene graph. I'm not a fan of declaring interaction logic on sprites themselves (e.g., using the '.on' method and callbacks). Instead, I'd prefer something that functions more like event delegation: a single listener on my scene that pipes out all relevant events for me to slice and dice later. Currently, I'm experimenting with using the Sprite prototype to feed all events into an RxJS observable. More concretely: // Create a new observable var pixiEventStream = new Rx.Subject(); // Hack into Sprite's prototype, redirecting all 'mousedown' and 'mouseup' events into the observable var toStream = (e) => pixiEventStream.onNext(e); PIXI.Sprite.prototype = Object.assign(PIXI.Sprite.prototype, { mousedown: toStream, mouseup: toStream, // etc for all events PIXI detects }); // ... // Later, I create a bunch of sprites, some with {interactive: true} // But I *don't* specify any .on callbacks // ... // Later, I can deal with the events // Here, I'm filtering out only the mousedown events for further processing var mouseDownEvents = pixiEventStream.filter(e => e.type === "mousedown"); mouseDownEvents.subscribe((e) => { var sprite =; // do something with a sprite on mousedown }); Is there a less hacky way of doing this? Has anyone tried something similar? Cheers!
  13. Obviously this isn't optimal. Was wondering if maybe I'm doing something wrong? I have a standard game loop that's managed by requestAnimationFrame(gameLoop); and within my gameloop I have a function that moves each enemy like so: enemy.position.y += 6 I don't really know what to do to keep my movement speed from varying so dramatically across different devices. Another issue that might be related, over time my sprite movement becomes gradually faster and choppier. This is the part that really really bothers me. Any help or insight would be deeply appreciated.
  14. Get all sprites?

    Hi guys, Not too sure where to find this or if it's possible but is there a way to get an array or object containing all the sprites that are currently in the renderer? Thanks, Jammy.
  15. I want to draw a roulette wheel, with 8 sectors, using the arc primitives. For each sector one arc is drawn in a clockwise direction, then one other in anticlockwise direction. Code snippet: const arcAngle = Math.PI/4 const graphics = new PIXI.Graphics() graphics.lineStyle(2, 0xffd900, 1) for (let i = 0; i < 8; i++) { let angle = startAngle + i * arcAngle graphics.beginFill() // arc 1 graphics.arc(250, 250, outsideRadius, angle, angle + arcAngle, false) // arc 2 graphics.arc(250, 250, insideRadius, angle + arcAngle, angle, true) graphics.endFill() } This does not work though, because at each iteration the last point of arc 2 is connected to the first of arc 1 creating a slanted line which should not be there. How can i solve it cleanly? Would it be better to create a Graphics object for each roulette sector and then translate, rotate and put them in a container assembling the whole roulette?
  16. Massive Sprite optimization

    I have the specific requirement of using a Sprite to provide a mask for an entire tile-less terrain. So it can't be segmented into smaller pieces - container.mask will only accept 1 sprite as its mask. So what I'm doing is a 4096x2048 texture sprite with a sprite.scale = 8. Only a small part of the sprite is shown on the screen because with that scale it is massive. From what I understand, PIXI is creating a 32768x16384 quad behind the scenes and using the sprite as its texture. Performance is surprisingly pretty good I'm guessing because WebGL is smart about not drawing off-screen texels. But some overhead is bound to be there. So I'd like to have a screen sized sprite and instead change the UV coordinates of the texture on the fly in order to control what is shown. It also has to work as a mask. Is there a way to do that in PIXI? Edit: This is WebGL only. I have no interest in canvas.
  17. Importing plugins/spine in angular2

    Anyone know the correct way to get plugins like pixi-spine into Angular 2 or Ionic 2? import * as PIXI from 'pixi.js'; works for getting the base pixi library in. But, how do you do something like import * as PIXI from 'pixi.js' and 'pixi-spine';
  18. Hi Everyone, Career Cruising is looking for a Senior HTML5 Game Developer in Toronto. The full job description is here A bit about us and the role. We're not a startup, we've been running a SaaS business for over 20 years, since before SaaS was a thing Our clients are schools, K-12, and we also serve government and library clients throughout North and South America. In this role we're not just looking for a coder, but someone who wants to be part of the full product development process of building the next version of our K-5 products. Thanks!
  19. Hi I was wondering if there's a way in Pixi to map a texture to a graphics object. I would like to some warping on and distortion to images but the only way I can see this happening if I can map a texture to the graphics object. Thanks
  20. Pixi Loader not working

    Hi When i load my textures with the loader and add this to the stage it's not showing. But when i create a texture with PIXI.Texture then works perfectly. I load in the game.js file the main-scene.js, in the main-scene.js i add some sprites when i create the texture in the mainscene it works fine but when i use the resources from the loader i get no error but the sprite is not displayed. What i'm doing wrong? Thank you game.js import * as Pixi from 'pixi.js' import MainScene from './scenes/main-scene/main-scene' export default class Game extends Pixi.Application { constructor (vueContext, config) { super() // Contexts this.vue = vueContext this.config = config // Add Game view to site this.vue.$el.appendChild(this.view) // Scenes this.scenes = {} // Main Scene this.scenes.mainScene = new MainScene(this, this.vue, this.config) this.stage.addChild(this.scenes.mainScene) this.load() } load () { this.loader.add('sprite2', '/static/game/images/sprite2.png') this.loader.load(this.setup()) } setup () { // Setup Scenes this.scenes.mainScene.setup(this.loader.resources) } run () { } destroy () { } } main-scene.js import * as Pixi from 'pixi.js' import Scene from './../../engine/scene' export default class MainScene extends Scene { constructor (context, vueContext, config) { super() // Set Contexts = context this.vue = vueContext this.config = config } setup (resources) { // This is wokring let Texture = Pixi.Texture.fromImage('/static/game/images/sprite1.png') let sprite1 = new Pixi.Sprite(Texture) this.addChild(sprite1) // This is not working let sprite2 = new Pixi.Sprite(resources.sprite2.texture) this.addChild(sprite2) } }
  21. Hi, I'm running into an issue regarding collision detection against adjacent DisplayObjects. Let's say I have sibling objects that are a child of a Container that has been rotated. If I use getBounds() on the siblings they return a bounding box that is oriented to cardinal north. Using those bounds for collision detection may result in false positives, because the given bounds may not follow the actual shape and orientation of the DisplayObject. I created a codepen to illustrate the point: When you toggle the "rotate" buttons at the bottom of the pen you will see the purple box morphing to the shape of the bounds for "shape" and "label". The text will change from red to green if the collision detection returns positive. I would like to do a more robust collision detection algorithm (possibly based on Separating Axis Theorem), but I would need to grab the vertices for each shape correctly translated to the global coordinates regardless of their nesting within the scene graph (accounting for scale, rotation, and translation from the shape and all parent transforms). The case being that the collision detection that I would like to do may not be only between direct siblings within the scene graph. Is there a nested property that would give me what I'm looking for, or will I need to grab the graphics data and apply all of the recursive parent transforms myself for each vertex? Here is a fork of a codepen that demonstrates the Separating Axis Theorem:
  22. Dancing TextField with right align

    Hello, I have two TextFields. The first one is aligned right by setting anchor.x = 1. The second one is aligned left by default. There is a visual issue if text value of the RIGHT aligned TextField is changing on the different one with different width: the digits are "dancing" a little, while the LEFT aligned TextField stands. Here is the example: Don't know is it a bug at PIXI but I'll be much appreciated for any suggestion how to fix this issue.
  23. Hey guys.. I have a quick question. So I'm preloading a background texture right, roughly 960 x 540, so not huge in the grand scheme of things. The preloader has finished loading it, and it definitely exists in the cache, however when ever I do this... let bg = new PIXI.Sprite(PIXI.Texture.fromImage('myBG.png')); stage.addChild(bg); It takes a fair while to actually add it to the stage. I've watched the network to see if it IS making another xhr request to get the same image, and it's not Are there any suggestions if I'm doing something wrong? Should I make a custom cache and create all the textures first so I don't have to wait for PIXI.Texture.fromImage to hunt through the texture cache and make it? Cheers!
  24. Remove child

    So i am trying to orbit a small sphere around a bigger sphere like so: var orbit = new Sprite(loader.resources.RedB.texture); stage.addChild(orbit); orbit.anchor.set(0.1, 0.1); orbit.position.x= Gball.x*1.3; orbit.position.y = Gball.y/3; orbit.scale.set(0.15, 0.15); Gball.addChild(orbit); animate(); function animate() { requestAnimationFrame(animate); // just for fun, let's rotate mr Honeypot a little Gball.rotation -= 0.05; // render the container renderer.render(stage); } now the only problem is that when i click on the button to remove the child, but want him to keep the position he had in the animation: var ballX = orbit.x; var ballY = orbit.y; document.getElementById("bot").addEventListener("click", function () { var orbit = new Sprite(loader.resources.RedB.texture); stage.addChild(orbit); orbit.anchor.set(0.1, 0.1); orbit.position.x= ballX; orbit.position.y = ballY; orbit.scale.set(0.15, 0.15); Gball.removeChild(orbit); return false; }); does anyone know how i might be able to do that?