# Search the Community

Showing results for tags 'Pixi.js'.

• ### Search By Tags

Type tags separated by commas.

### Forums

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

• 0 Replies

• 0 Views

### Interests

Found 230 results

1. ## Using Matter.js for physics with Pixi.js

I'm looking to make a simple game using Pixi.js as a renderer and Matter.js for the physics. But I'm having a hard time wrapping my head around how to do that. Does anybody have some code or projects, using both pixi and matter, that I could take a look at? Any documentation/articles/videos are also welcome. Much appreciated.
2. ## How to create collision

I making a platform game function hitTestRectangle(r1, r2) { //Define the variables we'll need to calculate let hit, combinedHalfWidths, combinedHalfHeights, vx, vy; //hit will determine whether there's a collision hit = false; //Find the center points of each sprite r1.centerX = r1.x + r1.width / 2; r1.centerY = r1.y + (r1.height / 2); r2.centerX = r2.x + r2.width / 2; r2.centerY = r2.y + r2.height / 2; //Find the half-widths and half-heights of each sprite r1.halfWidth = (r1.width / 2 ); r1.halfHeight = (r1.height / 2); r2.halfWidth = r2.width / 2; r2.halfHeight = r2.height / 2; //Calculate the distance vector between the sprites vx = r1.centerX - r2.centerX; vy = r1.centerY - r2.centerY; //Figure out the combined half-widths and half-heights combinedHalfWidths = r1.halfWidth + r2.halfWidth; combinedHalfHeights = r1.halfHeight + r2.halfHeight; //Check for a collision on the x axis if (Math.abs(vx) < combinedHalfWidths) { //A collision might be occurring. Check for a collision on the y axis if (Math.abs(vy) < combinedHalfHeights) { //There's definitely a collision happening hit = true; } else { //There's no collision on the y axis hit = false; } } else { //There's no collision on the x axis hit = false; } //`hit` will be either `true` or `false` return hit; }; I need a collision point ignoring the player's foot, the game I'm doing is the platform game to be more precise. I want a collider that allows the character to move, but keeping the block collision, vertical and horizontal Image of the bug, the player collides vertically but does not collide horizontally https://imgur.com/a/fNqpni1
3. ## recommand UI Framework to create tool with pixi.js

hi.. I wanna create game tool to create scene. it will be control like spine, sound, event, filter can you recommand UI library to create HTML5 GAME TOOL? thx a lot..
4. ## [WIP] Ninja.io - multiplayer shooter - Box2D

Ninja.io is a fast paced, 2D multiplayer shooter inspired by games like Soldat, Unreal Tournament and N-game. Currently implemented game modes include Capture the Flag and Deathmatch. It uses the Box2D physics engine to enable convincing rigid body simulation. Players can make various moves including backflips, rolls, proning, running, flying and crouching. The game is still under active development and I'm willing to devote a great deal of time to finishing this project. I've made a test server available and you can join it by following these steps: - Go to ninja.io - Play as Guest - Enter a username - Join CTF or Deathmatch. - Select primary and/or secondary weapon Press H to display table of controls. Decrease the size of the browser window in case it runs slow. I've noticed that some laptops and older systems have trouble maintaining adequate fps. It is currently not possible to register a username, but I've been making progress on an account and highscore system. The game server is currently located in Europe. I plan on running additional servers on other continents and for the site to serve as a gateway to the nearest game server when players join in order to minimize latency. 2 European and 3 North American servers are available. Any thoughts, feedback or suggestions would be much appreciated! Thanks. Edit - 15-12-2017: New version! Sound effects have finally been added, weapons & items have been updated & tweaked, libraries have been updated and many improvements have been made along with numerous bugfixes. Edit - 15-05-2019: Several versions later: lots of new stuff! Running in Pixi.js v5 now. Party mode has been added, several new maps, new weapons, new sounds, new UI, new account/profile management (WIP), new FX! More to come! I'm currently finishing the implementation of the account system and I'm working on several new maps. More updates will follow soon!
5. ## To The Capital 2 is now live on Steam!

To The Capital 2 is a game in the genre jRPG with classic turn-based battles in which you have to travel together with four heroes visiting a lot of cities, dungeons, mysterious places and fight with various bosses. It took almost 2 years to develop and finally we have reached this important event as the release of To The Capital 2! Big thank you to everyone who has followed our project. I hope our game will give pleasure to fans of the genre of jRPG, and beginners in it. https://store.steampowered.com/app/795120/To_The_Capital_2/

8. ## pixi.js Generating textures from large image

Hello I'm building an app that will allow the user to draw different primitive shapes on the image ( circles, rectangle ... ) as well as scale and rotate them. The problem is in the size of the image. The images being used are around ( 25000 x 5000 px ) and its to high to load that into PIXI.TextureCache . The images won't have any interactivity to them except the zoom and pan functions. I'm looking for an efficient way how to do that . I was thinking maybe loading image on the separate off screen canvas and splitting it on smaller chunks that will be loaded into the Texture object, or maybe splitting images on the server and generating the spreed sheet of 512 x 512 px tiles. But i don't have a clue how to do that ( i do but it's a really small clue ) - How can i implement images this big ? - Should i choose different library for this ? ( I really like performance of pixi.js but if you have something in mind feel free to say ) I'm looking forward for your feedback, thanks for reading this and cheers .
9. ## PIXI.js click handling is wrong on Chrome's device toolbar with not 100% zoom.

I noticed a strange issue with PIXI.js. Previously I developed in Phaser.js and such problem never happened. So, I want to handle clicks on buttons, these buttons are containers and I put hitArea into each. Problem is when I playing the game in Chrome with device toolbar and pick iPad (what does not fit into my screen), zoom mode toggles to 50% and after, all click handles in different areas. With zoom 100% everything good, but as I said, devices as iPad does not fit into my screen with 100%.
10. ## 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: tothecapital.com We will be glad if you join us on Facebook www.facebook.com/tothecapital
11. ## How to make PixelateFilter take effects in a specific area of a PIXI.Sprite?

I have a huge sprite that contains many sub sprites, I want to add mosaic to a specific area of this sprite. I have tried the PixelateFilter but it takes effect on the whole sprite. The attachment is what I want (see top-right corner)
12. ## 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: http://www.goodboydigital.com/runpixierun/ http://www.theleisuresociety.co.uk/fightforeveryone/ http://flashvhtml.com/ experiments: http://gametest.mobi/pixi/morph/ http://gametest.mobi/pixi/balls/ http://www.goodboydigital.com/pixijs/bunnymark/
13. ## How to update hitArea of a sprite

Hy everyone, My question is about the hitArea of a sprite. First of all I am not quite sure if I understood the definition correctly, so I would really appreciate a clear explanation about it. What I want to do is: I have sprites in my game and I would test collision between them, but the sprite's width and height is not perfectly accurate to its 'actual appearance' so I would reduce the hitArea to improve my collision detection algorithm (but sometimes setting the hitArea is making it worse than using just the regular .getBounds() function). This is how I did it for the first time but collision didn't occur. let player = new PIXI.Sprite(texture); player.position.set(75, app.stage.view.height / 2); player.anchor.set(0.5); player.hitArea = new PIXI.Rectangle(player.x, player.y, 60, 20); Later I found out that it is because the enemy that I am checking the collision against, is not being compared to my player object, but the initial coordinates of the PIXI.Rectangle that I use to modify hitArea with. I have found out that if I want to compare the player.hitArea of the current position of my player object to enemy.getBounds(), in my game loop I update the hitArea of player like: app.ticker.add( () =>{ player.x += player.velocityX; player.y += player.velocityY; player.hitArea = new PIXI.Rectangle(player.x, player.y, 75, 85); }; I feel like this is a poor solution that I have came up with. Is there a better way of always updating hitArea coordinates to the player object's current coordinates?
14. ## JigsawPuzzles.io - multiplayer jigsaw puzzles

Link: JigsawPuzzles.io - multiplayer cooperative jigsaw puzzles There are always a few ongoing public games on the homepage. Anyone can join these. If you want a more controlled experienced, signing in allows the creation of private games. You can invite friends into your private games. Tech stuff: The game is made in a hybrid of canvas and Pixi v4. The multiplayer is node.js + websockets via nengi.js. The game is only online multiplayer, even when playing alone. I'm primarily a network programmer and the whole project began as strange experiment of programming a casual puzzle game as if it were a shooter (movement prediction, lag compensation, reconciliation). I usually work on shooters. The hope was that the controls would come out feeling like the game was single player up to 500 ms of latency and 5% packet loss. The project has changed a little since then (the servers are no longer 30 tick) but the essence remains. It uses 2K and 4K images depending on the puzzle size, which is kinda fun because of how much it is possible to zoom in/out. The big puzzles are primarily aimed at desktop users, but are decent on touch tablets. Mobile isn't supported yet... but it does kinda work on some phones just by chance. We've got a few crazy modes that we're considering in the future. For now the only mode is a cooperative recreation of the table top experience. Thank you for checking out the game Here's a 1148 piece puzzle: Here's a smaller puzzle: What the catalog/setup page looks like (gotta sign in first, so that progress we can save): Social accounts for the game: https://www.facebook.com/JigsawPuzzles.io/ https://www.instagram.com/jigsawpuzzles.io/ https://twitter.com/JigsawPuzzlesIO https://www.reddit.com/r/jigsawpuzzlesio/ https://discordapp.com/invite/axT9bRw
15. ## Pixi.js and Angular2

Hey y'all, I made a package that I have been heavily using and honing in a game I'm working on. It allows you to use markup to create PIXI scenes. I'm hoping it'll help someone out there (and help make PIXI easier to use with angular2). Currently, it's not really optimized for performance as it's in its early stages (and I'm not that talented). If anyone has suggestions, feedback, or just wants to give it a whirl here is the github and npm info. It is being actively developed and maintained. https://github.com/Shadowstep33/Angular2Pixi https://www.npmjs.com/package/angular2pixi FYI: on the roadmap is more support and out-of-the-box components that implements PIXI's built in features.
16. ## Lag on the first play when swapping animation using onComplete callback in PIXI animatedSprite from two spritesheets

I've loaded two animations in Pixi with spritesheets. I wanna swap to second animation right after the first animation is finished. However, (It's happen with a 3840x1080 resolution, and the GPU memory usage is mainly fall between 90%-99%) 1. there's a significant lag of the transition between these two animations in the first time. 2. After the first play, if I remove and add the animatedSprite from the stage immediately, the transition is very smooth. 3. After the first play, If I remove the 2 animatedSprite from the stage, wait for ~2-3 minutes and add the 2 animatedSprite into the stage again, the transition is lagging again. I wanna know the proper way of swapping two animation in Pixi and also the reason of this phenomenon.
17. ## Mister Line devblog

Playable: https://zblip.itch.io/mister-line Hello, I'm making a game and this is my progress. The game is a puzzle about drawing a line. The goal will be to fill the available space with the line, but I'm going to add tons of obstacles/mechanics to spice it up. Web version is being built with pixi.js Not released just yet, but soon. https://twitter.com/ZBlipGames
18. ## pixi.js Can I access not premultiply color from renderer's shader

I'm using pixi.js ver 4.8.2. I want access not premultiply color from renderer's shader in pixi.js application. I set transparent is 'notMultiplied' , but I can olny access premultipilied rgb color... Is there way to access not multiplied color ? I put code and result here. // init with not multiply mode var app = new PIXI.Application(800, 600, { backgroundColor : 0xcccccc, transparent: 'notMultiplied' }); document.body.appendChild(app.view); // draw circle graphics with red and alpha 0.5 ( drawn at display left ) var graphic = new PIXI.Graphics(); graphic.alpha = 0.5; graphic.beginFill(0xff0000); graphic.drawCircle(100,100,100); graphic.endFill(); app.stage.addChild(graphic); // use graphics as a texture ( drawn at display right ) var mesh = new PIXI.mesh.Mesh( graphic.generateCanvasTexture() ); mesh.position.set(300,100); app.stage.addChild(mesh); // replace MeshRenderer shader for test premultiply effect app.renderer.plugins.mesh.shader = new PIXI.Shader( app.renderer.gl, // vertex shader is same as original MeshRender's one ` attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; uniform mat3 projectionMatrix; uniform mat3 translationMatrix; uniform mat3 uTransform; varying vec2 vTextureCoord; void main(void) { gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); vTextureCoord = (uTransform * vec3(aTextureCoord, 1.0)).xy; } `, // I changed change fragment shader for test ` varying vec2 vTextureCoord; uniform vec4 uColor; uniform sampler2D uSampler; void main(void) { //gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; <- remove gl_FragColor = vec4(texture2D(uSampler, vTextureCoord).rgb, 1.0); } ` ); // render graphics and mesh. app.render(); The execution result Ideal result is like this.

20. ## 2 questions about optimization with PIXI.JS

Hello, I have 2 questions regarding the optimization on Pixi.js On this page https://github.com/pixijs/pixi.js/wiki/v4-Performance-Tips On the Sprite part it says: Use spritesheets where possible to minimize total textures Sprites can be batched with up to 16 different textures (dependent on hardware) I am not sure to understand perfectly the above statement. So for exemple let says I want to display 40 differents buildings on screen. In term of performance (rendering) would it be better to have a big PNG file with all those buildings inside (that I can use as Spritesheet) or have 40 png ? Also I created a fountain water particle using https://github.com/pixijs/pixi-particles I have 2 foutains Sprite on my screen looking exactly the same with inside each, a Pixi.particles.Emitter for the water. Is there a way to have some kind of duplicate of the first fountain in order to have only one Pixi.particles.Emitter updating instead of 2. Thank you so much for your answers. Best
21. ## Pixi.js quickstarter with parcel (HMR, typescript, unit testing)

Hi, I am working now with some projects involving Pixi.js I have made a quickstart project, with the minimum tooling, in order to start developing with Pixi.js from 0. It uses Parcel and all its amazing features like Hot Module Reloading. Highlight features: - Super fast start - Hot Module Reloading - Typescript - Unit testing Here is the GitHub link: https://github.com/llorenspujol/parcel-pixijs-quickstarter Hope can help someone to start a Pixi.js project:)
22. ## jobs [HIRING FULLTIME] HTML5 Gamedev in Paris 🇫🇷 ! Paid relocation

Hey everyone ✌️ My name is Tibo and I’m lead Creative Developer at Voodoo, the leading mobile game publisher. I’m looking for coworkers to make HTML5 games with me :)! This is a paid opportunity for a job in Paris, France (paid relocation if needed) and actually one of the few job offers for HTML5 game developers on the market. If you’re interested in gaming and would like to enter the industry, are technically savage and eager to learn a lot this really is a gold opportunity! The goal is to create playable ads, a very new and interactive ad format that asks for nothing else but fresh ideas and technical innovations. Key Skills Basic knowledge of HTML & CSS Expert in JavaScript and able to create gameplays with PIXI.js and/or THREE.js Interest in mobile games Misc Competitive salary + Stock options + Performance Bonus + Company Profit Sharing + simply the best company to work for in the world (seriously!!) Any questions welcome in replies or PM, do not hesitate to check the full offer right here and apply! 👉 https://jobs.lever.co/voodoo/98ae288d-b923-419a-8148-78274a33eb53
23. ## Seeking Typescript EXPERT familiar with Pixi.js and Flash! (second call!)

Hello again! I sent out a note about this several months ago and didn't quite find the right candidate, so I'm here again in an attempt to find an individual (NOT a company or a "dedicated team") who is interested in working remotely on HTML5 game projects. The perfect candidate will have significant Typescript experience, as well as a strong background using pixi.js and Flash. (Porting experience from Flash to HTML5 is also a big plus!) If you're a proven self-starter with the ability to learn quickly and hit the ground running, we definitely want to talk to you! Please feel free to contact me with your resume/CV, sample games, or anything else that would make you a good candidate to consider for this position. Competitive compensation negotiable based on experience! Thank you!
24. ## Q!blocks

https://zblip.itch.io/qqblocks This is my puzzle game made with pixi.js, let me know what you think!
25. ## renderCanvas() vs renderer.render()

Could you please explain me the difference between rendering through renderCanvas() and through renderer.render() There is nothing about specific differences on the doc's page , so it seemed they must work in the same way , but in fact they does not for example ... var r = new PIXI.CanvasRenderer( {width:600,height:800,backgroundColor: 0x1099bb,}); document.body.appendChild(r.view); var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines'); richText.x = 30; richText.y = 180; //r.render(richText); // - working as expected, the text stands at 30,180 richText.renderCanvas(r) // -- not really the same, the text stands at 0,0 after this I started wondering , maybe it works in this way because the text has no parent object ... ( because as said in the docs the X and Y are relative coordinates to the parent ) and then I tryed this : var r = new PIXI.CanvasRenderer( {width:600,height:800,backgroundColor: 0x1099bb,}); document.body.appendChild(r.view); var richText = new PIXI.Text('Rich text with a lot of options and across multiple lines'); richText.x = 30; richText.y = 180; var stage = new PIXI.Container(); stage.addChild(richText); //r.render(stage); // - working as expected, the text stands at 30,180 stage.renderCanvas(r) // again, the text stands at 0,0 the result is the same , nothing works as expected