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
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 223 results

  1. HELLO! I'm proud to present the Internet Money game commissioned by Internet Money, Pretty Good digital and developed by myself at TandC games. More info here Play it here Thanks to the pixijs guys for their support! I love their library, its a great level for me as I love developing my own game systems, physics, etc etc. Let me know what you think and stay tuned for more Pixijs developed games shortly.
  2. I developed a puzzle game (my first one) mostly for fun & for learning new things (I am just a web dev). But sadly I am struggling to find players to enjoy my game, so for this reason, I am giving 100€ to the first user to complete it! Here is the link of the game: Also here is the link of the original post on reddit, where I explain the rules of the contest and what you have to do to complete it (I would really appreciate some up votes on that post that now has less than 0): If someone has some thoughts or something about the contest, I will happily listen to them:) Good luck to everyone that tries it!
  3. (The last challenge🙂) This is a real time chess game where pieces shoot bullets. Free browser game, html5 game. You can also play on smartphone. I hope you enjoy.
  4. I'm working on a large solo game project where I am attempting to use a combination of traditional DOM elements (React) and canvas elements (PixiJS and react-pixi-fiber) in the project. I wanted to gain visibility into the canvas element in a functional test, and didn't immediately see any libraries or posts explaining how this could be done. I've come up with a process that works for me, using Cypress, and wrote about it. Perhaps someone gets some value from this, and I'm happy to discuss testing and PixiJS! Thanks!
  5. Hello, Is pixi.js a good choice for diagram builder, where user can draw basic shapes like rhombuses, squares, rectangles and connect them with lines? Please point me to the right direction, I even can't choose which is better to use SVG or Canvas. Diagram builder must work in browser and support touch events.
  6. Hello! I have been working on a 3D rendering library built on top of PixiJS, and just want to find out if anyone would be interested to try it and give feedback. Pixi3D is a JavaScript library which makes it easy to render 3D graphics on the web. It works for both desktop and mobile web browsers and includes several components which makes it easy to create nice looking 3D scenes out-of-the-box: Load models from file or create procedural generated meshes Supports physically-based rendering (PBR) and image-based lighting (IBL) Transformation, morphing and skeletal animations Customized materials and shaders Built on top of the widely used PixiJS library which makes it simple to combine 2D and 3D You can go to to view a real-time demo or visit to download and read more about it.
  7. Squid Books is looking to augment its team to build physics based games in PixiJS and MatterJS. Squid Books is an educational platform aimed at making Science accessible. At the core, there is a flexible reader whose learnings are strengthened by surrounding quizzes, videos, and word games. The next initiative is to build games demonstrating NGSS’s Earth and Space Science concepts. We are looking for part-time to full-time contractors/consultants which can lead to salaried employment. ~Additional Information~: - Website: - SAAS Vendors: Google Cloud Platform, CircleCI, Sentry, Atlassian - Frameworks: React, Express, Cypress, Storybook, PixiJS, MatterJS Please email DM or email us at
  8. Hello friends, I'm totally new to Pixi.js and canvas in general. I'm trying to develop my favorite board game Patchwork, where I have a scrollable container with patches from which player can select one. Above the canvas I have two buttons for controlling the scrolling direction. Each time player clicks on one of these buttons, the x coordinate of the container updates. I was wondering if there is any 'best practice' way to implement infinite scrolling of the container (such as creating an infinite image gallery)? I have a few ideas, but I wan't to hear other opinions before I really dive into implementing the solution to this problem. Here are some screenshots for reference: Thank you in advance!
  9. [SOLVED] We finally found out the culprit, I set the antialias to true in PixiJS while createJs didn't. My player reported that after turning off the antialias, it works better than the createJs. Hello everybody, my name is Draco. I am the creator of a web game called My game was built using createJS with Animate export plugin. Unsatisfied with the performance, recently I convert the whole game using PixiJS v5, with pixi-animate plugin. After revamping the game, the performance of the game on my computers has a significant boost. However, there are reports by 2-3 players that the performance has dropped after the update. I would like to know if you have any insight into what might be causing this. In case you guys interested to compare, these are the link: createjs: pixiJs: I had a debug session with the player who has a performance issue where I try to gather some information and try something to see if the performance improves, these are some clues: 1. The frame rate is dropping significantly when he is playing in full screen in a bigger resolution. (10fps he said) 2. He has 60 fps with createJs version. 3. Both versions have the same amount of displayed object. No special culling in either version. 4. The scripting part (logic/cpu) seems to run smoothly, as I have a built-in detection using setInterval to detect whether the game update frequency is not reaching 60 updates per sec 5. I asked him to turn off the 'hardware acceleration' in the chrome browser to fallback to canvas2d purposely, where he reported no significant change, however, it shows that the logic update is affected immediately in my log Please tell me if you know what's the difference between createJS and PixiJS that could cause such issue. Thank you .
  10. Hello. I have a problem. I have a pixi-particle emitter. When I need it to start update it, I add it to game tivker. Move its spawnPos vis gsap. On the end of the tween i want to put back my emitter to its previous position, so i do the following: this.emitter._emitter.emit = false this.emitter._emitter.updateSpawnPos(0, 0) this.emitter._emitter.cleanup()
  11. Huanzyz

    New Pixi Loader

    Hello everyone, I am a student from Vietnam. I bump into some issues on my very first step into Pixi JS and it was two days that i cannot find a way to make it work. Therefore, i decide to seek for help and it means a lot to me if you guys can give me some advices about my problem. Thank you all in advance. My idea is very simple. I want to load an image and trigger some events when the image start/finish loading, then display it on the canvas. My image path is an URL. My problem is: - the resources doesn't include the texture property (but when i download the image, save it locally and use a local path instead of URL, the texture property appears) - it works when i use Sprite.from(url) but i cant attach events when start/finish loading like using loader Wish you have a nice day sir and stay safe canvas.html
  12. Anybody here who knows any Community chatroom for pixijs/threejs/game development that are active? My laptop (from my work) blocks some site including html5gamedev because it has some tags for "gaming" but surprisingly not discord/gitter/reddit so I am trying to find alternatives while I am on my laptop.
  13. Harryk89

    physics library

    Please tell me, what is the best physics library for Pixi.js or commonly used and do they all work with pixi.js v5?
  14. joelt

    Math Hero

    Hi! I'm in the process of developing a math based, arcade style game: Math Hero. The core of the game is to solve mental arithmetic challenges to progress through the levels. It is a mobile-focused game and the format I guess is a bit towards the hyper-casual genre, with short and quite intense game sessions. I think the game mechanics turned out pretty cool but I would like to hear what you guys think. The theme is set in space, where your navigating between planets. The next big feature that I'm currently is implementing is a CO-OP mode where you can join forces with a friend in real-time to solve problems and earn points together (hence the server focused implementation). Any feedback would be greatly appreciated.
  15. Hi, all I need to show loading spinner until PIXIJS finish calc all nodes and before the going to render scene. do you now to give a callback to PIXIJS to call before first render ? @ivan.popelyshev do you have any idea?
  16. That's how I currently load an image as a sprite. As for now, some image are distorted due to a different ration than the sprite's: this.sprite = PIXI.Sprite.from(this.image); this.dimensions = { width: window.innerWidth * 1.05, height: window.innerHeight * 1.05, alpha: 0 }; // later in code getPosition = () => { if (!active) { this.sprite.position.set(window.innerWidth / 2, window.innerHeight / 2); this.sprite.width = this.dimensions.width; this.sprite.height = this.dimensions.height; this.sprite.anchor.set(0.5); this.sprite.alpha = this.dimensions.alpha; } else { const {width, height, top, left} = document.querySelector('.detail__image').getBoundingClientRect(); this.sprite.position.set(left, top); this.sprite.width = width; this.sprite.height = height; this.sprite.anchor.set(0); this.sprite.alpha = this.dimensions.alpha; } }; update = () => { if (!this.sprite) return; this.getPosition(); } As you can see, when active is true, the sprite is bound to a html element, if not it's about the size of the window. How can I make the image cover the sprite, without distorting? Just like `background-size: cover` or `object-fit: cover`. Tried to find something online, but couldn't make it work for me.
  17. let bigRect = new PIXI.Graphics(); bigRect.beginFill('0x00FF00'); bigRect.drawRect(0, 0, 200, 150); bigRect.endFill(); let smallRect = new PIXI.Graphics(); smallRect.beginFill('0xFFFF00'); smallRect.drawRect(0, 0, 190, 140); smallRect.endFill(); let smallRect_x = bigRect.x + (bigRect.width - smallRect.width)/2; let smallRect_y = bigRect.y + (bigRect.height - smallRect.height)/2; smallRect.position.set(smallRect_x, smallRect_y); app.stage.addChild(bigRect); bigRect.addChild(smallRect); bigRect.position.set(100, 100); I want to center smallRect inside bigRect. Why is it working in the code above when positions are set to (0, 0) initially, but wouldn't work if I had any position other than (0, 0) for the bigRect. It's not a problem to set the initial positions to (0, 0) and than change them, I just want to understand how it's working underneath.
  18. Dear members, For a project im a working on i need to make a countdown timer, for the visuals i am stuck on how to achieve it. Is there any functionality pixijs has that could achieve this: So far i have looked into the PIXI.sprite.mask but if possible i would like to achieve a radial mask or similar effect that would not require me having a spritesheet or list/array of pictures for the countdown animation.
  19. I have a displacement filter using an radial map you can find attached to the post. This filter is bound to a sprite which is following the cursor. In addition to this displacement filter, I'm trying to also include an RGB split at the cursor's position. To do so I installed the type `RGBSplitFilter` and tried to use it the way I use the displacement filter: initDisplacement = () => { this.displace = true; new PIXI.Loader().add("/dis.png").load(((loader, resources) => { this.posX = window.innerWidth / 2; this.posY = window.innerHeight / 2; this.displacementSprite = new PIXI.Sprite(resources["/dis.png"].texture); this.displacementFilter = new PIXI.filters.DisplacementFilter(this.displacementSprite); this.displacementSprite.anchor.set(0.5); this.displacementSprite.x = window.innerWidth / 2; this.displacementSprite.y = window.innerHeight / 2; this.displacementSprite.scale.set(2); this.displacementFilter.scale.set(2); this.stage.addChild(this.displacementSprite); this.stage.filters.push(this.displacementFilter); document.querySelector(".detail__image").addEventListener("mousemove", (e) => { this.posX = e.clientX; this.posY = e.clientY; }) })) }; loopDisplacement = () => { this.displacementSprite.x = this.posX; this.displacementSprite.y = this.posY; }; As you can see I get the map's texture, define it as a sprite and kind of attach a displacement filter to it. Likewise I tried to use `this.rgbFilter = new PIXI.filters.RGBSplitFilter(this.displacementSprite)` - but this didn't work. What's the correct approach to implement such an rgb split at the cursor's position?
  20. Hey all, I've been working on this game with Vanilla JS now as a hobby for a while now and I've just released a new major version on GameJolt. It'd be great to get some feedback before I push it out to iOS and Android. It's rendered in PixiJS. I'm also working on this kinda weird embedded version for my website where it loads a "mini" version of the game in the background. More about me and the project: Thanks to any who try it out, and if you wanna talk about dev more or about the game drop in on discord here: Thanks, Jammy Credit to: pixi-tileset, pixi-viewport, easystar, pixijs & community.
  21. I have a `PIXI.Container()` I apply a shader/filter to using `container.filters = [filter]`. Documentations says, to remove a filter, just set `container.filters = null`. This works, but it's kind of a hard cut, when the image/sprite inside of the container is still visible, hence my question: Can I remove a filter with a kind of fade/transition?
  22. Hi, guys I need your help, i have angular 9 project with lates pixiJs 5.x. my GPU go up until 100% when i run. I see nice article About Angulr & Pixi -> after implement changes still i get 100% GPU I create issues on you will find steps to reproduce and repo
  23. Hi, I'm new to this forum so hi to everyone! :) Currently, I'm trying to build an isometric tilemap that also displays a certain height. Here is a demo: I have the following problems and maybe somebody could guide me in the right direction. 1. Shadows: When I remove the lineStyle, different heights and the depth of the scene are not really recognizable. I think this could be solved with proper lighting and shadows. Any suggestions on how to implement this? 2. Sprites & Performance: I'm currently calculating all vertices manually and then I draw a PIXI.Graphics-Polygon according to the vertices. Is there a more efficient way to do this. I'm not very experienced with PIXI.Mesh, SimpleMesh or SimplePlane. I wanted to use the PIXI.SimplePlane first but the documentation seems to be wrong... In addition to the mesh generation do you have any tips on how to properly cover the mesh with sprites, soften the edges and smoothly transition between different sprites. 3. Player movements & buildings: In the future I'd like to be able to add players and buildings. This is not so important right now but as the objects will heavily interact with the map, I'm happy if you have some guidance on this topic as well. Thank you very much! All the best Tom
  24. We are a team of developers and designer working on a multiplayer dungeon crawler that’s procedurally generated on the blockchain, inspired by classic text and grid based MUDs. We are looking for a pixiJS developer to work with us to launch the dungeon. Preferably this developer should be experienced with pixijs v5. Otherwise, experience with flash/actionscript would be helpful. Our team is based in New York and the UK, and we are looking for someone to work remotely with us. PM me if you are interested or reply here if you have any questions!
  25. Hi all! I made a simple platformer, a hobby project done in free time. It is a HTML5 port of a game I made in Pascal as a teenager over 20 years ago. I improved a lot of things in terms of game mechanics, level design, etc. but the graphics are all original - hand drawn in MSPaint somewhere around 1998 I have a bit of nostalgia for this game and I can find some charm in its style but probably the reality is that it just looks ugly. I would like to get some feedback whether it's playable nevertheless, what can be improved and whether the graphics disqualifies it or not. The game has 4 levels, difficulty gradually increases with later levels. It works on both mobile and desktop - on desktop it's easier to play as you can use the keyboard to control rather than touch. I can beat it on a mobile phone without problems but I played it a lot during playtesting so got used to the controls. It's coded from scratch and uses pixijs for drawing. It's my first complete HTML5 game, I hope someone will enjoy it Here is the link: