Search the Community

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/

I need to display a large number (for example 400) of high resolution textures at the same time, for this I used the ParticleContainer from the example - https://pixijs.io/examples/#/demos-basic/particle-container.js. But in the end, I get FPS = 10-15, the more sprites, the lower the FPS, even if you turn off the animation - there is no difference, the image in idle mode also heavily loads the browser, which is why the page scroll is very freezing. - https://codesandbox.io/s/admiring-lamarr-p8bvyf?file=/index.html I could not find a solution anywhere, so I will be grateful for your help.

Hi! Maybe someone could help with a freeze of an animation while we loading/preloading textures. There are background and several big animations. After scene have started to change and transition animation have started, main container is cleared and new background with different big animations are added. This freeze is connected with scene rendering. Does somebody know the way to deal with this problem? ======================= Version pixijs 6.2.2 ======================= Application virtual_h = 2276; virtual_w = 1280; render = PIXI.autoDetectRenderer(virtual_w, virtual_h, { resolution: window.devicePixelRatio, autoResize: true, antialias: false, }); gameContainer.height = virtual_h; gameContainer.width = virtual_w; document.getElementById("game").appendChild(render.view); ======================= Animation let animationRaw = PIXI.Loader.shared.resources["animationRaw"].spritesheet.animations["animationRaw"]; let animation = new PIXI.AnimatedSprite(animationRaw); animation.autoUpdate = true; animation.loop = false; animation.onComplete = function() { animation.stop(); }; gameContainer.addChild(animation); ======================= Preload render.plugins.prepare.upload(gameContainer); ======================= Ticker ticker.add(function() { render.render(gameContainer); }); ======================= Switch a scene gameContainer.removeChildren(0, gameContainer.children.length); let animationRawNew = PIXI.Loader.shared.resources["animationRawNew"].spritesheet.animations["animationRawNew"]; let animationNew = new PIXI.AnimatedSprite(animationRawNew); animationNew.autoUpdate = true; animationNew.loop = false; animationNew.onComplete = function() { animationNew.stop(); }; gameContainer.addChild(animationNew); =======================

I'm coding a vanilla JS canvas engine from scratch. I plan to start a little metroidvania-like platformer as soon as possible. Since it might get some big maps, got a little doubt regarding performance... Which is the best way to render a map bigger than game screen? Prerendering the tilemap into a huge image (i.e. an horizontal level could be as big as 8000x240), then draw it according to the scroll position. I figure this have a cost during the map building (and also RAM), but then it should be faster while drawing it every frame. Parsing the tilemap array and drawing only the visible tiles according to the scroll position. I figure this is slower because of calculations made every frame, but I might be wrong. I have tried to do some benchmark with both methods, but it doesn't seem to have any noticeable difference in both my desktop PC and laptop. It might have some impact on smartphones though, which is what really worries me.

so my gsap duration is longer than next requestAnimationFrame(), lets say 2secs my ques: will it destroy my program in long run? should i bother about it and optimize it? will it create multiple gsap threads? how to optimize/destroy old gsap in next requestAnimationFrame?

Raycasting.js Hey everyone, So this is my first ever post in this forum, and I'm excited to share with you my year long endeavour of building a Wolf3d-esque engine from scratch. This is my first attempt at game development in my spare time aside from my full-time job. Links Live Demo Github Controls Movement: W, A, S, D Free-look: Arrow keys or the mouse* Change elevation: Q, E or the mouse* wheel Shoot: Primary mouse* button, the SPACE key Interaction with the doors: ENTER * Make sure to activate mouse controls first by clicking on the canvas. Hit me up with your thoughts/feedback and I will be more than happy to giving some insight into the engine internals and other technicalities in the replies if anyone's interested. PS: Please note that this is still mostly a WIP and regard it as a mere tech demo, as there is still no major gameplay loop implemented in.

Can you create a alphaMask from bitmapdata rather than images? I have a circle loader that I am building as bitmapData and I have the source image I want to mask, but I can't figure out how to use the mask bitmap data for bmd.alphaMask or convert the mask bitmapData to a image that the method can use. Any help would be appreciated. createPie : function (game, w, h) { console.log("create pie", w, h, this); var mask = game.add.bitmapData(w, w), bmd = game.add.bitmapData(w, w), canvas = bmd.canvas, context = bmd.ctx, size = 270, degreesToRadians = function (degrees) { return (degrees * Math.PI) / 180; }; var drawPie = function () { bmd.clear(); context.save(); var centerX = Math.floor(w / 2); var centerY = Math.floor(w / 2); var radius = Math.floor(w / 2); var startingAngle = degreesToRadians(270); var arcSize = degreesToRadians(size); var endingAngle = startingAngle + arcSize; context.beginPath(); context.moveTo(centerX, centerY); context.arc(centerX, centerY, radius, startingAngle, endingAngle, false); context.closePath(); context.fillStyle = 'rgba(0, 0, 0, 1)'; context.fill(); context.restore(); bmd.render(); }; drawPie(); game.cache.addBitmapData("loaderMaskBMD", bmd); var maskImage = game.add.image(348, 221, bmd); console.log("maskImage", maskImage); // doesn't work //game.cache.addImage("loaderMaskImage", maskImage); game.load.onFileComplete.add(function (progress) { console.log("load", progress); size = (360 / 100) * progress; drawPie(); }); // doesn't work //mask.alphaMask('preloaderRingLoaded', maskImage); // doesn't work //mask.alphaMask('preloaderRingLoaded', game.cache.getBitmapData("loaderMaskBMD")); // doesn't work //mask.alphaMask('preloaderRingLoaded', game.cache.getImage("loaderMaskImage")); var sp = game.add.sprite(348, 221, mask); sp.width = w; sp.height = h; console.log("sp", sp);},

Noob here using Phaser. But here's my issue: I'm struggling to get to a perfect scale on the game I'm building. The best option for me so far is Phaser.ScaleManager.RESIZE; But this method doesn't have a limit to the canvas size. If an user has a huge screen, say 30 inches, he'd have a lot of advantage over an user with a medium size screen, say 17 inches. The 30 inches user would have much more view of the world. I've tried to set the canvas to a fixed size, like 1280x720, then dynamically resize the canvas style. And using Phaser.ScaleManager.SHOW_ALL; But it doesn't do the trick because it shows the black borders and I can't get rid of it. To make it clear what I want to achieve, I'm building an online multiplayer game (.io). If you notice the most famous .io games like agar.io, diep.io and slither.io, the game scale is perfect for any screen size. If the screen is too big, the game doesn't show more screen. It just adjusts for a more zoomed game. Here's a gif of what I need and how my game is now: agar.io: https://gyazo.com/94a41e06816b8dc9a1fd4608c0cfa525 Notice that in agario, the screen only goes so far before the game starts to scale. My game: https://gyazo.com/4269ecfb1253b9ddbcd6e917ad1a8602 Notice how much of the world I can see after scaling my game. Meaning that there is no limit for the canvas. Please let me know if you need more information in order to help me out here! Thanks in advance!

I'm trying to follow the first tutorial. I don't understand why I don't see anything unless I uncomment out the resize() (which is not in the tutorial), and even when I do, the background color is not as specified in the Application object. Any pointers would be appreciated. <!doctype html> <html> <head> <meta charset="utf-8"> <title>Hello World</title> </head> <body> <script src="pixi/pixi.min.js"></script> <script type="text/javascript"> //Create a Pixi Application let app = new PIXI.Application({ width: 256, height: 256, antialiasing: true, transparent: false, backgroundColor: 0x0000f0, resolution: 1 }); // If I comment below, then I see a nothing. Also, why is the canvas // background black instead of 0x0000f0? app.renderer.resize(256, 256); document.body.appendChild(app.view); </script> </body> </html>

I have this idea for creating a character customization system. The system would be implemented as follows. 1) Organize a base template sprite sheet with character components arranged in a composition for future compositing. Example: Lets assume a full body template for a characters design is 125 by 125 consisting of head, body, and leg components. The head component of the character would use 25 pixels and would be isolated on separate parts of the sprite sheet that occupies the respective pixels while the rest of the 100/125 pixels are blank. The same would be done for the body and leg components. 2) Bind the components together via some sort of linked list or maybe even graph based implementation. I'm still learning about graphs and am thinking they're best for this system given compositing more complex sprite sheets will involve layers. Any advised implementations or any kind of information on graphs associated with player creation systems is highly appreciated. I think this is a great opportunity to practice graphs. 3) Next there will be an interface that allows the player to choose the color and textures of each of these components. The player will confirm and submit their design when finished. Now that the player has submitted their design, I'm a bit puzzled about the next step and have a few ideas on composing the data. 4a) Use Phaser api to turn the data into bitmaps? I don't know much about this implementation yet since I'm still learning how to utilize bitmaps and how Phaser handles bitmaps 4b) Composite the items on a canvas and store it in a uri using the canvas to url method. I also lack experience with api but I definitely can see how it would work. 5) Ideally I'll save the data to a database and retrieve them via player credentials. I'm not sure if I'm over complicating things or not so any feedback would be appreciated. I use Phaser but any html5 based idea or solution should be fine.

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! https://medium.com/@zenblender/functional-testing-of-a-hybrid-pixijs-react-app-281ed5ea04b3

Hi I have an image like the picture below. I need to resize this image.(between x2 and x10) When I resized with Canvas's own features, I couldn't get the image I wanted. The image was pixelated. I used OpenCV's javascript library for this. (To be able to do interpolation) But here I did not get the exact result I wanted and it was slow in speed(40 - 60 ms). The resizing speed should be between about 10 - 20 ms. Then I wanted to write an algorithm myself, but I could not prevent pixelation, and the image I wanted was not revealed. In fact, if I can make gradient for each pixel according to the pixels around it (right, left, down and up), I think I can get the image I want. Is there anyone who can help me with this?

Hi there folks! It's been a while since I posted something in here, glad to be back! I have a fair amount of experience in game development using JS Canvas, but recently I decided I had move on - so I went with Pixi. I figured out the basics of how to add sprites, do filters and such, but I just can't seem to figure out how to do simple lines and then manipulate them afterwards. What I mean is something like this: https://jsfiddle.net/gustavgb/anxcjfof/5/ I noticed that PIXI.Graphics has an object attached to it called "graphicsData" in which I can find the points that make up the line - great - but when changing the value of these variables, nothing happens to the appearance of my line. I'd appreciate any help, as I'm quite new to Pixi Thank you!

Welcome Everyone A game of connecting between pieces? Can anyone help me? i use adobe animate type HTML5 canvas ? why the code not work ?? Pagel.fla

I am trying to develop a simple Canvas game, but I'm currently stuck at making the enemies display itself. Heres the code I'm using : <script type="text/javascript"> // SETUP INICIAL var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); var innerWidth = 360, innerHeight = 620; canvas.width = innerWidth; canvas.height = innerHeight; // VARIAVEIS var score = 0, lastTime = 0; // TECLAS DE MOVIMENTAÇÃO window.onkeydown = pressionaTecla; function pressionaTecla(tecla){ if(tecla.keyCode == 38) { player.y = player.y - 10; } if(tecla.keyCode == 40) { player.y = player.y + 10; } if(tecla.keyCode == 39) { player.x = player.x + 10; } if(tecla.keyCode == 37) { player.x = player.x - 10; } } // PERSONALIZAÇÃO DO PLAYER var player = { }, player_width = 100, player_height = 105, player_img = new Image(); player_img.src = 'images/spaceship.png'; // OBJETO DO PLAYER player = { width : player_width, height: player_height, x : innerWidth/2 - player_width/2, // centralizar y: innerHeight - (player_height+10), //deixar em baixo power : 10, draw: function(){ // FUNÇÃO QUE BLOQUEIA O OBJETO PLAYER SAIR DO CANVAS if(this.x <= 0 ){ this.x = 0; }else if (this.x >= (innerWidth - this.width)) { this.x = (innerWidth - this.width); } if(this.y <= 0 ){ this.y = 0; }else if (this.y >= (innerHeight - this.height)) { this.y = (innerHeight - this.height); } ctx.drawImage(player_img, this.x, this.y, this.width, this.height); } }; // FUNDO DE GALAXIA *codigo fonte do fundo retirado do site codepen.io https://codepen.io/LeonGr/pen/fdCsI var stars = [], // Array that contains the stars FPS = 60, // Frames per second x = canvas.width; // Number of stars for (var i = 0; i < x; i++) { stars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, radius: Math.random(), vx: Math.floor(Math.random() * 10) - 5, vy: Math.floor(Math.random() * 10) - 5 }); } function updatefundo() { for (var i = 0, x = stars.length; i < x; i++) { var s = stars[i]; s.x += s.vx / FPS; s.y += s.vy / FPS; if (s.x < 0 || s.x > canvas.width) s.x = -s.x; if (s.y < 0 || s.y > canvas.height) s.y = -s.y; } } function drawfundo() { ctx.clearRect(0,0,canvas.width,canvas.height); ctx.globalCompositeOperation = "lighter"; for (var i = 0, x = stars.length; i < x; i++) { var s = stars[i]; ctx.fillStyle = "#fff"; ctx.beginPath(); ctx.arc(s.x, s.y, s.radius, 0, 2 * Math.PI); ctx.fill(); } } // PERSONALIZAÇÃO DO INIMIGO var enemyArray = [], enemyIndex = 0, enemy_width = 35, enemy_height = 43, enemy_timer = 1000, enemy_img = new Image (); enemy_img.src = 'images/spaceship.png'; // OBJETO DO INIMIGO function enemy (x, y, dx, dy, enemy_img, enemy_width, enemy_height, rotation){ this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.img = enemy_img; this.width = enemy_width; this.height = enemy_height; this.rotation = rotation; enemyIndex++; enemyArray[enemyIndex] = this; this.id = enemyIndex; ctx.drawImage(this.img, this.x, this.y, this.width, this.height); this.update = function(){ this.y+= this.dy; this.x+= this.dx; this.draw(); } this.delete = function(){ delete enemyArray[this.id]; } this.draw = function(){ ctx.drawImage(this.img, this.x, this.y, this.width, this.height); } } // FUNÇÃO DE CRIAR INIMIGOS function create_enemy(){ var x = Math.random() * (innerWidth - enemy_width); var y = -enemy_height; var dx = 3; var dy = 3; var rotation = Math.random(); new enemy (x, y, dx, dy, enemy_img, enemy_width, enemy_height, rotation); } // LOOPING DA ANIMAÇAO (MAINFRAME DO GAME) function gameLoop(currentTime){ requestAnimationFrame(gameLoop); ctx.clearRect (0,0, canvas.width, canvas.height); drawfundo(); updatefundo(); // SCORE ctx.font = '17px arial'; ctx.fillStyle = '#fff'; ctx.fillText('PONTOS: '+score , 15, 30); // ENERGIA ctx.font = '17px arial'; ctx.fillStyle = '#fff'; ctx.fillText('ENERGIA '+player.power , innerWidth-110, 30); // JOGADOR player.draw(); if(currentTime >= lastTime + enemy_timer){ lastTime = currentTime; create_enemy(); } create_enemy(); } gameLoop(); </script> Everything is working fine except the enemies not showing. Already checked the images folder and it's all set up like I've puted in the code. Dev tools console does not show any errors. Enemie lines are " // PERSONALIZAÇÃO DO INIMIGO " and "// OBJETO DO INIMIGO" Please help!

Kaetram Kaetram is an open-source game-engine created to aid those interested in entering the game development realm. The codebase is simple, clean, and intuitive. This project is intended to be used as a learning tool. The original idea is based on Little Workshop's demo game – BrowserQuest (BQ). This game uses original BQ assets as well as custom-made ones. The entire code-base has been written from scratch, using more modern approaches. GitHub Repo – https://github.com/Veradictus/Kaetram-Open Live Version – https://kaetram.com Join us on Discord – https://discord.gg/MmbGAaw Patreon – https://www.patreon.com/kaetram Features BQ was intended as an experiment to showcase HTML5 capabilities, since then, technology has only served to advance. Kaetram contains a lot of ideas and features that builds on top of its predecesor, a couple are: Multiplayer using Socket.IO Enhanced rendering engine (includes dynamic lighting, overlays, animated tiles) Region system (client receives only necessary data and saves it) Questing and achievements system. Plugin-based combat system (for bosses/special enemies). Supports RESTful API. Discord server integration. Cross-server private messaging and interactions. And much more Regions The region system sends data to the client according to the map data of the server. The collisions are checked both server-side and client-side to avoid cheating. The region system makes use of dynamic tiles, which are unlocked according to a player's progress. Furthermore, there is integrated support for instancing, where we can use a section of the map (or clone it) and reuse it for certain groups of players. The instancing is perfect for activities such as minigames, where we will want to run multiple instances in parallel. Tilemap Kaetram is built with modularity in mind, as such, the client supports multiple tileset parsing. The tilemap can easily be constructed using Tiled Map Editor. Using our map parsing tool you can easily export your creation to both the client and the server. Kaetram Hub There is also support for a hub server. This can help connect servers across one another, allowing players to interact with their friends across them in a variety of ways (private messaging and guilds). Furthermore, the hub serves as a gateway for determining what server to place players in. If a server is full, it simply returns another server that has room for the player.

Hi, I have encounted something strange and I don't know how to fix it. I have git cloned the examples page onto a local webserver and the plugin projection, 3D Camera spine layers works fine. But when I try to reproduce it into my electron app, the layers start acting like this. How can I fix this? I've tried everything, why does it work on the examples html page but not on my html page. thanks!

Hi guys I met a very difficult problem, this problem has been bothering me for more than a month My game sometimes has a part of the image rendering can not come out, but its alpha channel rendering is no problem I have no idea about this problem. Does anyone know what caused it? here's my problem: I'm using: phaser 2.13.3 with CANVAS mode dragonbones 5.6.2 electron 5.0.11

Hi everyone, I have a picture that I draw pixel by pixel on the canvas. Size of the image: 512 * 256. When I make this picture 1536 * 768, the image looks very bad. I think I can use interpolation to fix this. But I couldn't find a good javascript library. It didn't work in the libraries I found. Is there anyone who can help me with this?

I am trying to add Lottie animation in the Phaser 3 in my game. But I am not able to add. Lottie Animation link. This is how I am adding into my code : this.animation = bodymovin.loadAnimation({ container: document.getElementById("game"), // Required path: "assets/json/RainLoop.json", // Required renderer: "canvas", // Required loop: true, // Optional autoplay: true, // Optional name: "Hello World", // Name for future reference. Optional. }); But here problem is, this animation is attaching to the HTML DOM elements and so that the animation comes above the Phaser game canvas, Due to what I am not able to interact with my phaser game elements.

I have recently discovered a couple of useful pages about improving the speed of canvas operations. I will give links to those pages at the bottom of this item but first let me describe a good speed-up I got as a result of reading them. In my program The Forest (myforest.uk) I am continually looking for ways to improve the speed of drawing scenes. I have made several improvements already but this new one is very useful indeed. I have a Scene object with method draw() which is invoked whenever the observer moves or turns. From its earliest incarnation this method has reported how long it takes, so I can monitor what is going on. Its first line is var t0 = new Date ().getTime (); // ms and its last line calculates a difference and displays it in a status line on the HTML page: var dt = new Date ().getTime () - t0; forest.infoDiv.innerHTML = me.toString () + ", Drawn in " + dt + "ms (" + this.nDrawIms + " images)"; I have augmented that so that the constructor of forest.scene includes this.drawingTimes = ''; and a new final line at the end of draw(): this.drawingTimes += dt + '<br>'; I can cause drawing of the same scene over and over again by clicking a button labelled 'Look level' (as opposed to up or down buttons which would draw a slightly different view of the scene). This means I can build up a long string of forest.scene.drawingTimes. Then in a testing version I can press an otherwise unused key to dump those times as the innerHTML of a div in my HTML test page. The <br>s mean that I get a vertical column of values which I can then select, copy and paste into a spreadsheet (I use OpenOffice). Then it is easy to get the mean and standard deviation of the column. I did that twice for a large number of values. First with my last released version of The Forest and then with a tiny enhancement so that just before every time drawImage(im, x, y, width, height) is called I do this: x |= 0; y |= 0; Those are bitwise OR operations and their effect is simply to chop off the fractional parts of the screen coordinates x and y. This means that drawing starts on an exact pixel and does not require interpolation. The results: without the truncation (ORing) the mean time was 140.9ms with a standard deviation of 35.3ms; truncated the mean was 85.7ms and standard deviation 23.7ms. That is a very significant and useful improvement, so it will be going into my next version. The scene drawn here involved 1,693 calls to drawImage(), scaling each image (tree, ground, and other features) differently each time. From this big improvement I deduce that once drawImage() starts on an integer pixel then it uses integer pixels in the destination to decide where to get pixels from in the original image for scaling. In hindsight this is rather obvious really but I thought it would be useful to others to see how I went about proving the effect. I have noted before in this forum that the drawing time varies quite widely (as shown by the standard deviations) and I still attribute that to the workings of the garbage collector in the background. I should also point out that so far I have only measured this in FireFox. If you want to see more clearly what I am taking about, The Forest is at www.myforest.uk - from the initial map use the button (or key) to go to the scene. The pages which prompted this are: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas https://www.html5rocks.com/en/tutorials/canvas/performance/

Hi, I'm a designer and I'd like to reach out to others for input or even collaboration. Lots of my javascript work is on github in the spirit of sharing and learning together. Like an open source sketchbook. I like making small experiments that might be included in something bigger. I often play with mechanics, audio and visual elements to look for interesting things : http://type76.com As you can see, it's lots of generated, three.js and canvas stuff, with a game dev leaning. I'm keen to go in new directions too. It's hard to find interest among my social circles, so I'm reaching out here to see if people are into this kind of thing. It's not business. It's about hitting ideas off each other, collaboration, fun and learning together. Maybe we can make an itch.io page if there is the will. You're welcome to join the discord server : https://discord.gg/KUqcuWu I'd love to see your experiments. Here or on discord. Things that aren't full games, but are fun and interesting concepts. This seems the place to look for like minded folks. Have you got a sketchbook? Is there a good CMS for this? I might be doing it wrong. Are there any other communities for this apart from discord servers full of revshare projects?

My game does not scale correctly when the browser loads the game while the window size is made smaller. Another scenario is while in game state, the game will resize correctly, If I try to make the window bigger once again the game will be made out of scale and not usable really. this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

Hi everyone. For the last few months I’ve been working on a simple HTML5 2D side scrolling action game called Theraxius. It's nothing new and revolutionary, it's more like an evolution of different technology. The game also includes a level editor so you can create your own levels. Engine (all game logic and level editor) is written completely in JavaScript, no download is required. Just load and play. Level data (stored in JSON format in the database) is exchanged thru Ajax calls. Server side is written in PHP. All images and sounds are preloaded from the server before play. The game uses HTML5 features like canvas, Fullscreen API, Pointer Lock API, Audio,… At this moment only Chrome and Firefox are supported. The game is meant to be played on PC, phones and tablets are not supported. In the next weeks I’ll try to post some videos, try to add registration (for newsletter and later for public test). Release date: when it's done Official page: theraxius.com Screenshots (for bigger images, please visit official page):

Hi Everyone, I want to create same thing like this in phaser 3 using graphics library or by any other way. I cannot find compatible code for replacement in graphics library. Any help will be highly apprecited https://codepen.io/kangax/pen/dajwE Many Thanks