Search the Community

Showing results for tags 'pixi.js'.

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

  1. Hi, Suppose I have a sprite (say, a warrior), and then another sprite -- the warrior's shadow -- is added as a child as the warrior sprite; is it the case that if I click on the warrior's shadow, I am also clicking on the parent warrior sprite? Alternatively, is there a way to signify clicking on the child without clicking on the parent? I'm currently having trouble trying to do this. In this case, the sprites are adjacent to but not on top of each other. Thanks!
  2. I'm fairly new to pixi.js and programming altogether. I am making a plugin that parses the xml save file of a sprite animation program and recreates the result in a game engine. The animation program uses bones for skeletal animations and the images (sprite parts) inherit the x, y, angle, scale_x, scale_y of the parent bone. The main idea would be to create sprites for the bones and the images, set up the bone inheritance to make the skeleton animation work correctly and then addChild the image sprites to the respective bone sprites. The only problem is that along with the aforementioned values, my image sprites also inherit the z_index of their container. The spriter does not limit the z hierarchy of the images to that of the parent bones, meaning that the user can change their z. I attempted to use worldTransform and worldAlpha for the parent bone values (keeping all the image sprites in a single container, thus controlling the z_index), but I am unable to get the parent bone's rotation. So, I either need to get all the values of the container and apply them correctly on the image sprites, or keep the image sprites inside the container and find a way to change their world z. Any suggestions would be appreciated and I thank you for your time.
  3. Optimise code

    This is an extension of post : After hitting play on demo : and move the mouse you can see different screens and with up and down arrows zoom in and out but I am confused as how I can set the mouse so it doesnt go further past the video's bounds. I am wondering if anyone can take a look at my code and suggest any optimisations that can be done to make the playback better
  4. Game Developer

    Hi Everyone. I work for Cross Border Talents and we are a recruiting company, we have a client in Prague that is looking for candidates to relocate to develop games for casinos. They have the following requirements: JavaScript jQuerry HTML & CSS Google Closure Pixi.js Spine.js Canvas.js If you are interested in knowing more details don't hesitate to contact me via PM or Best Regards, José Marques
  5. Welcome to the Pixi.js forum

    Hi everyone and welcome to the PIXI.js forum! First off, big thanks to @photonstorm for providing a place for people to talk Pixi, very kind of you sir! If you dont know what pixi.js is then let me give ya the low down: Pixi.js a fast, lightweight, open source 2D library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of webGL. It's the fastest HTML5 renderer in town! The idea behind pixi.js is that it can be used as the rendering component in your game engine (or any other type of project!) rather than as a game engine itself. Questions / bug reports / amazing feature ideas, or anything at all Pixi, then this is the place to discuss it! I will also be posting updates here as the engine grows and evolves. Pixi.js can be found here along with lots of examples: To find out more about Pixi and read our beginners tutorial, check out our blog over on Goodboy
  6. To The Capital II

    To The Capital II - is a game in the genre jRPG with classic turn-based battles in which you have to travel together with four heroes visiting many cities, dungeons, mysterious places and fight with various bosses. Storyline Prior to the overthrow of the current authorities and getting to the capital, Louis gets an assignment from the king to find fugitive participants in the failed coup. Together with Ralph, Bernard and Amelia joined by order of the command, they go on a journey through mysterious forests, snow-capped mountains and hot deserts. Official site: We will be glad if you join us on Facebook
  7. Hi .i made a simple pixi app which tries to simulate spring forces but can't make it work properly . I've patched PIXI.ObservablePoint Object.assign(PIXI.ObservablePoint.prototype, { add: function(o) { this.set(this.x += o.x, this.y += o.y); }, radd: function(o) { return new PIXI.ObservablePoint(test, window, this.x + o.x, this.y + o.y);//test is a useless callback function that do nothing . }, sub: function(o) { this.set(this.x -= o.x, this.y -= o.y); }, rsub: function(o) { return new PIXI.ObservablePoint(test, window, this.x - o.x, this.y - o.y); }, mult: function(o) { this.x *= o; this.y *= o; }, rmult: function(o) { return new PIXI.ObservablePoint(test, window, this.x * o, this.y * o); }, getAngle() { //in radians return Math.atan2(this.y, this.x); }, getLenght() { return Math.hypot(this.x, this.y); }, setLength(l) { let angle = this.getAngle(); this.set(Math.cos(angle) * l, Math.sin(angle) * l); }, setAngle(a) { //in radians; this.set(Math.cos(a) * this.getLenght(), Math.sin(a) * this.getLenght()); } }); and this one is the sprite object class spring extends PIXI.Sprite { constructor(x, y) { super(); this.texture = new PIXI.Texture.fromImage("assets/image.png"); this.x =;//random width this.y = app.rh;//random height this.t = new PIXI.ObservablePoint(test,window,x,y); this.scale.set(.5 + Math.random() * .5); this.anchor.set(.5); this.friction=.9; } update() { this.d = this.t.rsub(this.position); this.d.mult(.1); this.vel.add(this.d); this.position.add(this.vel); this.vel.mult(this.friction); } } let arr = []; for (var a = 0; a < 100; a++) { let bu = new spring(, app.rh); container.addChild(bu); arr.push(bu); } app.ticker.add(() => { for (var i = 0; i < arr.length; i++) { let bu = arr[i]; bu.update(); } }); when i tried to create spring objects they behave weirdly . If there is only one spring object on array nothing happens unusual.But if there are more then one spring object they act like this and i can't change their positions independently beyond that if i disable friction they fastly disappear from screen .
  8. Error using pixi-sound (fs)

    Hello, I am using pixi-sound on a game with pixi.js and now I can't start my game because I get an error for the fs ERROR in ./node_modules/pixi-sound/dist/ Module not found: Error: Can't resolve 'fs' in '/Users/davidh/Documents/Jobs/XXXX/node_modules/pixi-sound/dist' resolve 'fs' in '/Users/davidh/Documents/Jobs/XXXX/node_modules/pixi-sound/dist' Parsed request is a module using description file: /Users/davidh/Documents/Jobs/XXXX/node_modules/pixi-sound/package.json (relative path: ./dist) Field 'browser' doesn't contain a valid alias configuration after using description file: /Users/davidh/Documents/Jobs/XXXX/node_modules/pixi-sound/package.json (relative path: ./dist) I installed v2.0.0-alpha so on github told me that this version solve it. Do you know what might be? Thanks
  9. Pixi v5: WebGL 1 or 2?

    Simple question I think. For the next major release of Pixi, v5, which WebGL version will be implemented? Thanks!
  10. Hi, While I'm studying WebGL, I'm wondering how to use vertex shader with Pixi.js. Using fragment shaders is quite clear in my mind, but I'm still confused on how to send vertices coordinates to a vertex shader in Pixi.js. For instance, assuming we have such a vertex shader: // vertex shader attribute vec3 aVertexPosition; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); } and we have such vertices coordinates: const vertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]; How could I draw this triangle (this is supposed to be a triangle) with this vertex shader and Pixi.js? Thanks!
  11. DisplayObject.filters questions

    I have some questions about filters and how they behave in Pixi.js. 1. When settings filters on a display object like this: stage.filters = [filter1, filter2, filter3, filter4]; Is the order defined in the list is the same when rendered? 2. Does Pixi.js create brand new FrameBuffer Objects for each filter, or does it reuses the output of the previous filter as input for the next filter? Sorry if I'm not really clear or accurate since I'm not a WebGL expert ^^ Thanks for your insights
  12. Hi, I'm new to Pixi.js and the forums. I'm trying to figure out how to drag complex shapes made of polygons. I used PhysicsEditor to create the Polygons. I know a hitbox can be assigned to a sprite, but this seems to only work for a single simple polygon? So my next approach was to create a bunch of graphics shapes from the polygons and add them to a container. This works, but I don't know if it's the proper way to do it. Here is the code below. let polygons = new Polygons().getPolygons(); let container = new PIXI.Container(); polygons.forEach((data: any) => { var graphic = new PIXI.Graphics(); graphic.beginFill(0x00dd00, 1); graphic.drawPolygon(data.shape); graphic.endFill(); graphic.scale.x = scale; graphic.scale.y = scale; graphic.interactive = true; graphic.buttonMode = true; graphic.alpha = 0; container.addChild(graphic); graphic .on('pointerdown', this.onDragStart) .on('pointerup', this.onDragEnd) .on('pointerupoutside', this.onDragEnd) .on('pointermove', this.onDragMove); }); container.addChild(sprite); container.x = - container.width / 2; container.y = - container.height / 2;; } My mouse up creates the sprite by clicking on the screen. This is my Drag function. onDragMove = (event: any): void => { if (this.dragging) { console.log(event.currentTarget) event.currentTarget.parent.alpha = .5; let newPosition =; let parent = event.currentTarget.parent; parent.x = newPosition.x - parent.width / 2; parent.y = newPosition.y - parent.height / 2; this.wasDragging = true; } } The weird thing with this code is that all my sprites jump on top of each other while dragging. If I use this exact same code for my onDragEnd function and comment out the onDragMove it works as expected, but obviously I can't see the drag happening. So my question is, is this the proper way to do this? If it is, why is the drag function not working? Is there a better way to do this?
  13. Pixi.js + TypeScript boilerplate

    After a couple of days working with Pixi.js, I've built up a simple boiler plate for the TypeScript language I'm glad to share: The game loop with a FPS meter is already implemented. This boiler plate supports source maps, incremental builds, unit tests and browser auto-refresh. Maybe this could be helpful. Feel free to comment. There is certainly a room for improvement. Cheers!
  14. In the online documentation, I can read that the emitter's update() function require a delta parameter in seconds, (in bold): But, as far as my experiments go, converting my frame time in seconds seems not to work. It does in milliseconds. Am I wrong somewhere?
  15. Drawing Buffer

    I would like to know if by default drawing graphics (PIXI.Graphics) with pixi.js implicitly uses a buffer or if we have to do that explicitly. If so, is there a way to do that natively with pixi.js? For the moment, I have implemented a small class for this purpose, but maybe this feature already exists in the core library. Thanks for your replies
  16. I am wondering what is the recommended coding style for pixi.js applications. Here and there, I can see several possibilities involving a general, centralized PIXI.Application instance or something splitted into a renderer and a stage. I feel that the second option is a bit old and almost deprecated. Am I wrong?
  17. I am wondering why the renderer.backgroundColor property is not public in TypeScript. In order to get directly access to this useful property, I needed to create a helper class to expose this attribute: class GameRenderer extends PIXI.WebGLRenderer { public backgroundColor: number; } If anyone has an explanation, I would be interested to read it. Thanks!
  18. Pixi.js Showcase

    Made anything cool with pixi.js? Post it up here and share it with the world! Whether it's a cool game demo, a fully fledged website or some tripped-out crazy experiment, we would all LOVE to see it! To get the ball rolling, here are some pixi.js projects that exist out on the internets: games: experiments:
  19. I have application made using Pixi.js and it uses a WebGLRenderer. I'm preserving the drawing buffer and not clearing before render: { preserveDrawingBuffer: true, clearBeforeRender: false } This allows me to create trails as objects move around. I want the trails to fade out over time, so I apply a transparent black rectangle on top over every rendering. This works, but the fade out eventually rounds off to gray. I want a complete fade to black. I've tried using a ColorMatrixFilter filter with a lowered brightness on my root container, hoping it would cause a fade effect. It didn't cause any fade effect, instead just causing everything to be slightly darker. If that had worked, then a custom filter could help to do the job. How can I get a slow gradual fade to complete black for the trails of my rendered objects? I've also asked this on StackOverflow:
  20. Descensus 2

    This is version 2 of my game Descensus from several years ago. It's a simple but difficult 2D physics game in which you have to guide the ball to the ground by swiping bars on screen, bouncing it around spinning saws and off moving terrain objects. There's a time limit to reach each 100m stage, and you can use terrain objects to your advantage as well. It was written using the physics library p2.js and the rendering library Pixi.js. I wrote in in TypeScript, bundled with Webpack, developed using Visual Studio Code. The Android version was packaged using the cloud build system Monaca, bundling the Crosswalk webview (hence the relatively large APK size). It doesn't use any PhoneGap APIs - the sound is all HTML5 Audio. I did most of the testing on desktop so I know that it works nicely with both mouse and touch. I have put an online version (with sound disabled) at Play Store link: Video:
  21. Morning! Just working on a bit of a debug console for my game, was just wondering if it was at all possible to switch the renderers at runtime? Have tried a couple of methods, but it just halts the code from executing I think (no error), but guessing it would be a nogo?
  22. Hi all, have continued working on my little game prototype. Nothing much there atm except an animated background (a few clouds moving, and a Spine based animated cactus). Ive just started dropping in some sprites for the HUD but getting an error from Interaction manager as soon as myButton.interactive=true and myButton.buttonMode = true are set. Cannot read property 'pointerType' of undefined at Interactionmanager.processPointerMove Any clues? Using 4.52 Production (non-min)
  23. PIXI Loader & Audio (Howler etc)

    Hi all I've just started on my second prototype for a game, only this time I'm wanting to sort out a few more of the core parts to it first. Audio being the one I'm tackling at the moment. I have a basic setup atm a loader and a few sprites to test. Upon finishing the load (including a music mp3 file) it runs a startGame function which then plays the audio track. I originally tried using the pixi-audio plugin from GitHub, but could not get this one to work at all (does it still work with PixiJsV4?) so moved onto Howler Howler does work, and plays the audio file once loaded. However after trying on my server it seems the loader doesn't fully load the mp3 file before continuing as it starts to play a good 5-10 seconds later after the startGame function has run. Do mp3 files work the same as any other file with the Pixi loader? or could this be an issue with howler that I have missed? Thanks for any advice!
  24. Hey guys, I'm experiencing some bad Ghosting. I can't take a screenshot because it's fine when ever I do it. But basically, when a sprite starts to move quickly (not uber fast), the trailing edge gets blurred. Any reasons why or how I could fix this? Thanks, Nick