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 128 results

  1. 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 (
  2. 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?
  3. Fasten your seat belt. And unleash your imagination. Build with pixijs and pixi-haxe and nape physics. It's friday! Share your level in the comments!
  4. 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..
  5. 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.
  6. 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?
  7. 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.
  8. 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!
  9. Hi all, I want to put together a little snake game to teach myself PixiJs. What I'm trying to achieve is a smooth gliding effect when moving this block around. (press left/right to start moving). Unfortunately, I simply cannot get rid of the occasional 'stuttering' when rendering - so I'm starting to think I might be going about it the wrong way. Could somebody tell me what I'm doing wrong here? see: fiddle const graphics = new PIXI.Graphics(); const app = new PIXI.Application(); const movementSpeed = 150; const stage = app.stage; const blocks = []; stage.addChild(graphics); class Block { constructor(position=[0, 0], direction=[0, 0]) { this.width = 20; this.position = position; this.prevPosition = position; this.direction = direction; } render (alpha = 0) { let offsetX = (this.position[0] * alpha) + (this.prevPosition[0] * (1 - alpha)); let offsetY = (this.position[1] * alpha) + (this.prevPosition[1] * (1 - alpha)); graphics.drawRect(offsetX, offsetY, this.width, this.width); } update (delta = 0) { this.prevPosition = this.position; this.position = this.calculateNewPosition(delta); } calculateNewPosition (delta) { let movementOffset = movementSpeed * (delta / 1000); return [ this.position[0] + (movementOffset * this.direction[0]), this.position[1] + (movementOffset * this.direction[1]) ]; } }; function render (delta) { graphics.clear(); graphics.beginFill(0xFF0000); blocks.forEach((block) => block.render(delta)); graphics.endFill(); }; function update (delta) { blocks.forEach((block) => block.update(delta)); }; function changeDirection (direction) { blocks.forEach((block) => { block.direction = direction }); } const fps = 30; // Frames per second const frameDuration = 1000 / fps; // Maximum time per frame. const maxFrameDelta = 1000; // Upper limit on how long the frame takes to render. let previousTimestamp = 0; // Last timestamp. let accumulator = 0; // Remainder of time that we could not simulate in our fixed-step physics. (used to smooth out temporal aliasing) function gameLoop(timestamp = 0) { requestAnimationFrame(gameLoop); //Calculate the time that has elapsed since the last frame let frameDelta = timestamp - previousTimestamp; //Optionally correct any unexpected huge gaps in the elapsed time if (frameDelta > maxFrameDelta) elapsed = maxFrameDelta; //Add the elapsed time to the accumulator accumulator += frameDelta; //Update the physics simulation in discrete chunks, and keep whatever remainder is left in the accumulator. while (accumulator >= frameDuration) { //Update the physics simulation update(frameDuration); accumulator -= frameDuration; } // After performing the physics steps, we might have some remaining time in the accumulator. // This causes 'stuttering' (temporal aliasing), so we interpolate where the block should be rendered. // That is: we don't draw the block exactly where the physics simulation has placed it, but where it should be to get the smoothest animation. // (Thank you Glenn Fiedler!) let renderOffset = accumulator / frameDuration; render(renderOffset); previousTimestamp = timestamp; } function initStage() { document.body.appendChild(app.view); blocks.push(new Block()); // Keyboard input. document.addEventListener('keydown', function(event) { if(event.keyCode == 37) { changeDirection([-1, 0]); } else if(event.keyCode == 39) { changeDirection([1, 0]); } }); gameLoop(); }; document.addEventListener("DOMContentLoaded", initStage);
  10. Say I wanted to do a frame animation for a pixel art object. where it Glows and the glow effect expands around the core of the object. (Like a light turning on). I have collisions set on this object, so obviously I don't want the hitbox to expand based on the glow frames I'm adding. How would you guys suggest I manage this in pixi? I thought about adding an entirely separate container just to handle effects animations. But that sounds like it might be a headache to manage with my code, and like it might be taxing on the system. Thanks!
  11. I'm using Matter.js as my physics engine and Pixi as my renderer and under normal circumstances I've been able to get them to work smoothly. However, I'm trying to do something where all of the objects *except* the player character are scaled down to look like the character is now above them. The scaling works visually in Pixi, but I can't get the bodies from Matter.js to go with it, so there are these "ghost objects" that I can't see but if collide with them then the scaled down objects will be moved. Does anyone have any tips for how to resolve this? Let me know if I need to post a gif if that would help explain the problem.
  12. 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.
  13. 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.
  14. 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?
  15. 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.
  16. 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';
  17. 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!
  18. 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
  19. 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) } }
  20. 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:
  21. 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.
  22. 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!
  23. 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?
  24. I am a student currently working on a simple Picture Reveal Game. The way it works is this: A picture is hidden behind a grid of squares. Each time you click on a square a trivia question pops up and if you answer it correctly part of that picture is revealed, if not, you lose points. The aim is to guess the picture. We will use an online API for the questions. That being said here are my concerns: I understand PixiJS is only a rendered with capabilities of taking input. Will pixiJS be sufficient for the game I am planning to build? I will need some sort of database that holds a collection of images (as I do not want to use Flickr API), and will also need to keep a track of the state of the game. Will PixiJS and regular JS be enough for this task? Or do I need another library as well?
  25. I'm learning Pixi.js with the goal of creating a game with a lot of UI complexity (imagine something like FreeCiv). I'm starting with small projects and trying to learn good fundamentals. However, I'm struggling to handle interactions in an elegant and flexible way. (cc @PixelPicoSean) I'm creating a Checkers game. Something like this: Here is the basic setup: var gameState = [1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,2,2,2,2,2,2,2,2,2,2,2,2]; // Create some textures var boardTexture = PIXI.Texture.fromImage(/*...*/); var pieceSprites = new PIXI.Texture.fromImage(/*...*/); /*...*/ // Create and append our renderer /*...*/ // Create the scene graph var stage = new PIXI.Container(); var board = new PIXI.Sprite(boardTexture); stage.addChild(board); // Add some pieces var pieces = new PIXI.Container(); gameState.forEach(square => { /*...*/ var piece = new PIXI.Sprite(/*...*/); piece.interactive = true; board.pieces(piece); }); stage.addChild(pieces); // Render with requestAnimationFrame /*...*/ So far, so good! Now, I'd like for each of the 24 pieces to be draggable by the user. No problem: dragging is just a function of user events. But here's where I stumble. I could attach callbacks to each of the piece Sprites (this seems to be the idiomatic Pixi.js way). However, my instinct is want to listen to the pieces Container instead. In the DOM Event world, events firing on a piece would bubble up to pieces, and the resulting would point to a piece. In short: Is there any way to emulate "event delegation" here? EDIT: The answer should be yes, but the InteractionManager does not currently implement bubbling. (I opened #2342 on github.) It's an easy fix.