Leaderboard

https://www.gamesnacks.com "Bite-sized HTML5 games, accessible to everyone." https://www.gamasutra.com/view/news/358551/Google_wants_to_bring_HTML5_titles_to_lowend_devices_with_GameSnacks.php "Google has announced a new HTML5 platform called GameSnacks that's designed to help devs bring quick, casual games to any device."

https://valhallaepisodes.com/ This is the first game I've ever made and released to the public. Made in Phaser 3, using React for UI elements. Full list of all technologies are available in game. It's an adventure puzzle game adapted from an old Amiga game of the same name; You must guide the Prince through the castle in order to Reach the Lord of Infinity and take your rightful place on the throne. You must think both logically and laterally to complete your objectives. Hi. This is my very first game created, and I'm happy to take any constructive criticism you guys can throw at me

How to make pixi.js game with webpack step by step. The tutorial is focus on how to build development environment from initizlize the project to publish the project. the tutorial is here https://github.com/proudcat/pixi-webpack-demo , welcome to star.

tutorial for using pixi.js to make jigsaw game with webpack. try it online : http://testactivity.goooku.com/ishop-demo/jigsaw/index.html source code : https://github.com/proudcat/pixi-jigsaw

Thanks @ivan.popelyshev I almost replied immediately, explaining that was exactly what I had been trying... Then when I reviewed the code, it transpired I need glasses (actually, I do), I'd made a typo in "event", so of course it didn't work...

Game Link: https://www.kongregate.com/games/mapacarta/rookie-bowman Hi, I published my game on Kongregate yesterday. I hardly get feedbacks on there, so any feedback is appreciated. It is a platformer game with boss fights, collectible items, secret rooms etc...

"pixi.js-legacy": "^5.2.0" Using canvas renderer. My alternate method of creating an image Sprite is to use PIXI.Loader and then to pass the resulting resource.data to PIXI.Texture.from(). That works fine, so it seems the difference is isolated to the creation of the texture.

i think it can be good also in boilerplate, it a good starter and the only one without typescript!

Not so long ago games needed to fit on a floppy disk ...so 3MB is a luxury imo To keep things small consider these easy wins. Javascript minification and dead-code removal. Lower bitrates for audio (combined with shorter duration and more imaginative looping). Pngquanting (8bit) bitmaps whenever possible. Keep every asset pristine, making every byte count. Example: https://b10b.com/grandprixhero/ (2.9MB total) And 3MB is by no means a hard-edged requirement, it's a recommendation based on FB's observations of their audience. If you can achieve it then the game may get more exposure and higher retention, but heavier games can still be viable too. What's most important for FB IG is virality and social connection.

Regarding your case - yes, 5k sprites is too much, only something like ParticleContainer can handle that, and even then - you'll have like 100k javascript objects in memory total, because each sprite is lightweight but not that lightweight You can put tiles into graphics with beginTextureFill - it'll have like 20k objects and it wont re-upload vertex buffer every frame. pixi-tilemap wont spawn any objects, it can just upload buffer once when after you refill your tiles list, and all next calls are cheap, only asking for GPU to render that particular tilemap. RenderTexture caching can convert your map to 1 or 2 sprites, but eats gpu memory, 4 bytes per pixel. Choose your destiny.

I'm having the strangest issue and I was hoping someone might be able to offer guidance. I have a separate renderer running in the background that is using the trick to do pixel perfect click detection with object colors. If I render that separate scene to the screen, everything is fine. But when I use extract (as below) the mirror is somehow mirrored. I'm guessing this is some kind of bug within Pixi.js because it only occurs after you've called resize on the renderer (or application has done it for you). selectColorLogic(mouse: Point): number { const pixels = this.logicRenderer.extract.canvas(undefined); const rawPixels = pixels.getContext("2d").getImageData(mouse.x, mouse.y, 1, 1); const [r, g, b, a] = rawPixels.data; if(a === 255) { return ColorUtils.rgb2hex({r, g, b}); } return -1; } The red and green objects in the below image so it best, but the other 2 are mirrored as well (should be about half height). Does anyone have any idea what might be going on?

space.game Welcome to our open Alpha of space.game! We'll be constantly updating the game and will be adding new features such as online multiplayer, new game modes, accounts, friends, leaderboards, store, and more! Game Description Claim as much territory as you can by strategically flying your spaceship around the map. You’re invincible while inside your territory and can kill anyone entering your space. Outside of your territory, other players can hit your trail and destroy your spaceship. If you hit another player’s trail, you’ll destroy their spaceship. A head to head collision results in both spaceships being destroyed.

@PLAYERKILLERS test build with the fallback fix to Canvas is available, see here https://github.com/melonjs/melonJS/issues/982

Hi, I want to create a mesh with shader, and through uniforms webGL textures to shader, I'm able use pixiapp.renderer.gl.createTexture, it works. But other sprite in pixiapp(PIXI.application) stage also force to mesh's webGL Texture is webGL texture binding index confusion? (gl.TEXTURE0) maybe need to use pixi webgl abstraction? does anyone have idea? best regrads.

Thanks for help! First, I try to replace pixi 5.2.1, the problem still happened. Next, re-creating TextureSystem and resetting the renderer state really have no effect.... But, when I only try to binding baseTexture or "baseTexture.update()" or "baseTexture.setSize()" on every upload, It seem work! Anyway, I try to present the bug and process in detail by video and picture. It use Jsmpeg and FFmpeg trans RTMP stream to yuv data, and convert yuv to rgb texture. Refer attach code above, I use PIXI.resources.Resource to call gl.texImage2D and baseTexture format, and try to update Texture of yuv on every upload. Situation1: No bind baseTexture and call gl.texImage2D every custom updateDataMethod(setUint8Array) , only call gl.texImage2D on upload once. Result: Mesh only show one frame texture data. can't follow video stream to update texture. Situation2: Call gl.texImage2D on upload once, bind baseTexture and call gl.texImage2D every custom updateDataMethod(setUint8Array). Result: Other sprite's texture confuse refer with mesh's texture. Situation3: Only Bind baseTexture every custom updateDataMethod(setUint8Array), and call gl.texImage2D on upload once. Result: It's look good, sprite's texture and mesh's texture correct. Actually, I try to change "this.bind(this.baseTexture)" to "baseTexture.update()" or "baseTexture.setSize()", the result is same. Just like you said, It will change all updateID's , and TextureSystem wlll see that texture was changed on bind. It seem ok, thanks for help to solve that question!!

http://pixijs.download/release/docs/PIXI.interaction.InteractionEvent.html#stopPropagation

Thank for answer again! Actually, I try to make video yuv to rgb in pixi.texture. After decoded video data bind to three textures(yTexture, uTexture, vTexture), pixi.shader trans to rgb values in pixi.geometry, when video decoded data keep coming, that need to update textures(yTexture, uTexture, vTexture). It's ok that run only one yuv to rgb geometry in canvas, but add other sprite, the textures confuse problem happened. attach demo code. pixi_YUVRGB_demo.zip

I expected the visual propety to be deleted, removed from the stage. the cube object exist on the board and when I normally use this command it works fine. later in the code I discard the object and I let the garbage collector "do it's thing": user_cubes[i].pop(); user_cubes[i].pop(); and thanks for the nice greeting into the forums, I am glad to have a place to consult about my PIXI development problems

Hello! PixiJS binds textures automatically, you put a link to texture in shader uniform - and it'll work: https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js However, you want to upload texture for yourself. In that case you can use our texture resource API: https://pixijs.io/examples/#/textures/gradient-resource.js You dont need to create gltexture nor to bind it. Just call texImage2D inside "upload" method. As for texture params, you can either set them in baseTexture wrapMode/scaleMode, either override "style" method of resource, it has the same signature as upload. If you worried that PixiJS operations wont be optimal, you can snoop them through https://spector.babylonjs.com/ and see that texture params are exactly the same. Welcome to the forums!

Thanks, Ivan, No pressure. I am exploring options. Do you think this approach will be better performant than png sequence?

Is there any built in system that would pass on attributes and properties to children for example inside of a container? A bit like how html works if you have an element inside another, and for example make the element w 50, h 50, position: abs, right: 0, top: 0, the properties gets passed on to the children etc etc, i could make this myself but it would save some time if there already was something for it.

I played the demo on GameDistribution as well. Let me start of with saying that the game looks good! There's some improvements to be made though. Like others mentioned, it should auto restart when you fall. Also, I can drive off the track when I cross the finish line! The camera.. it makes me a bit 'motion sick'. I think it should follow GTA5 rules, when you steer a bit to the left or right, the camera doesn't follow. When you're about to lose proper sight, then the camera should adapt. Steering the jeep is also a bit wonky. It responds a bit 'slowly'. Or at least it feels that way. I'd also add a check box on the control menu that pops up everytime that says 'Hide this on start'. I'd also call the 'Secrets' something else, they're not exactly secrets, more like 'Trophys'. Perhaps also add a time limit per level? To make it more challenging, or as an optional 'Time challenge' as a seperate mode. Other than that, game looks good, I really like the virbrant colors, the offroad experience is a nice theme as well. UI also looks great. And I'm loving the roarring sound of the engine, well chosen! You know what would also be cool? At the end of the level, just after the finishing line, add a big ramp, so you can jump real high! Would also be really nice if you added a slow, descending ridge all along side the parcours, which starts at a steep depth of say 5 metres. So you'll be like 'I don't want to fall in there!' And when you do, have the truck fall into pieces. The ridge doesn't have to extend into infinity sideways. Just a border of descending 20 metres or so? That way, you'll actually have an effect when you fall down, instead of into infinite nothingness. And finally, at the end of the level, you get to smash the truck into pieces after that high jump I just talked about! Or an alternative. In any case, it needs a 'reward' after you finish a level, something fun, not just a statistic. The game itself is probably not something I'd pay money for on Steam, it seems to fit better as a mobile game (perhaps you already made it an app), with say, a virtual thumbstick to control the jeep. All it needs is some polishing. P.S. I'm always curious to know, did you create the objects yourself? Also, can't believe this is HTML5! Is there a specific engine/framework you're using?

So I've figured there are two main ways to render multiple moving shape objects with PIXI.Graphics. 1) Use only one Graphics instance, clear it on each redraw and simply draw each shape in their new position every tick. 2) Use one Graphics instance per shape object. Draw each one once at the beginning. On each redraw move the graphics instance to their new positions. I'm wondering if I should prefer one method over the other and why?

I am using "pixijs/pixi-tilemap" library to render maps exported from Tiled, but the rendering frame rate is low. I am newbie and I guess there may be a problem with the rendering loop logic, My thinking is as follows: I have several rendering layers(PIXI.display.Layer) in my game, I call them 'RenderingLayer', there are several cameras in the game (inherited from PIXI.Container), each camera can render multiple 'RenderingLayer' And output to RenderTexture, finally use the PIXI.Sprite group to render the final result according to the depth property of the camera. I use the ECS architecture to implement the game Code of RenderingSystem.update: for ( const camera of this.cameraComponents ) { if ( camera.renderingLayers.length === 0 ) { continue; } // clear stage $app.stage.removeChildren (); // add current rendering camera $app.stage.addChild ( camera.cam ); // collect camera rendering layer for ( const layerName of camera.renderingLayers ) { if ( $app.renderingLayers.has ( layerName ) ) { let layer = $app.renderingLayers.get ( layerName ); if ( layer.visible ) { camera.cam.addChild ( layer ); } } } // rendering camera result Graphics.render ( $app.stage, camera.renderTexture, this.renderTarget ); // clear camera.cam.removeChildren (); } // render final result this.renderSprite.removeChildren (); for ( const camera of this.cameraComponents ) { this.renderSprite.addChild ( camera.renderSprite ); } renderer.render ( this.renderSprite, null, true ); May be frequent use of removeChildren / addChild affects rendering performance?😳 I use the ECS architecture to implement the game, You can find the code for the RenderingSystem class here: js/ecs/systems/rendering_system.js. Another guess might be that I did not use the pixijs / pixi-tilemap library correctly.😲 see here: https://lihaochen910.github.io/RPGMakerProject/ code is here: https://github.com/lihaochen910/RPGMakerProject

@Zygomatic Thank you!!! I have plans to add +50 Levels... With some extras... like stars for score, enemies and more. Don't hesitate to contact me anytime!

There's an example here: https://github.com/kittykatattack/learningPixi#loading

Looking for some feedback on best practices for handling large texture data. On desktop, it seems I can easily load large textures exceeding 8k on a side; however, mobile fails to render past 4096 pixels on the longest side. Project I'm working on loads schematic views, of sorts - there's a background image on which components are placed. Zoom / pan is implemented from Pixi-Viewport project. These are available as vector, but prototyping as SVG seems to incur a significant performance loss. Not sure if there's a mipmapping approach, or some kind of level of detail such as TileMap. Roughly following the TileMap project... background image is sliced and loaded via multiple frames. Presume source code for the "webgl: zoomin and zoomout / retina webgl: zoomin and zoomout" examples are just https://github.com/pixijs/pixi-tilemap/blob/master/demo/main.js The canvas version doesn't appear to be working: main.js:104 Uncaught TypeError: Cannot read property 'flush' of undefined at update (main.js:104)

Working great. Thank you.

Thanks! I got it to work by changing the local source links to CDNs with the version downgrade. And yes, still pretty new to everything, only picked up coding a few months ago and learning to navigate all the systems.

Examples are hosted from `gh-pages` branch of that repo https://github.com/pixijs/pixi-particles/tree/gh-pages. It contains pixi-v4 districution in a "lib" folder. Usually people dont just download stuff - they clone it and switch branches. That means you are not familiar with git enough, right? If you download that branch - your simple http-server approach should work. Just be aware that it contains old version of pixi, its up to you to update it and migrate examples if needed. "PIXI.particles.ParticleContainer" was renamed to just "PIXI.ParticleContainer". Read about more differences at https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide

Now I really recommend to look at your demo with spectorJS. However to capture the actual frame where ERASE happens you have to spam ERASE automatically, not just on click.

OK, i recommend to test it for pixi 5.1.5 and 5.2.1

Hi, I'm the one who made that example. Here's a short description on how it works. The text uses only one reel as an example as all the others function in the same way: Let's say we have a position where the reel is (reel.position). This position is increased on each frame. Then each sprite is positioned based on that position. When the symbol is detected to be back to start, a new symboltexture is randomized to it.

Make some kind of a grid algorithm PixiJS doesnt have anything in the package, we dont handle collisions. Grid usually is coded by users themselves.

Now I won't even have to change the time I can just catch the request... Slightly more trouble upfront (fake the nameserver, serve response), but then I can really get going. But I guess it would prevent the average user from cheating. Couldn't you just save the last used time, and see if it magically decreases... The user is going to corrrect the time again, and if they start up the game, just remove the bonus?

Hi, This is my latest game: Shoot the fruit built using the Playcanvas Game Engine. Name: Shoot the fruit Link to game: https://playcanv.as/b/9ESV9pNM/ Screenshot is attached I am selling this game, DM me for more details Regards

Hi there, after having received great support here recently posting my first pixi.js issue, I now run into another problem I can't resolve. On my page I load a mix of images and videos as sprites. The goal is to crop these sprites, which I can achieve by changing the frame with and height of the corresponding texture. While this works flawlessly for images, when I try to do the same thing for videos, they don't get cropped, but they sort of crop but then extend their last pixel column up until the full length again. See the sample screenshot I attached, where I tried to crop a video to half its width, but it then got extended in the way I described. Here is my code: const canvas = document.getElementById('mycanvas'); const app = new PIXI.Application({ view: canvas, width: window.innerWidth, height: window.innerHeight }); document.body.appendChild(app.view); app.loader.add(mediaResources).load((loader, resources) => { let sprites = []; let resource, texture, frame, fw, fh; for(let i = 0, counter = 0; i < mediaResources.length; i++, counter++) { resource = resources['rs' + counter]; if(resource.extension === "mp4") { texture = PIXI.Texture.from(resource.url); frame = texture.frame; fw = 1024; fh = 576; } else { texture = resource.texture; frame = texture.frame; fw = frame.width; fh = frame.height; } // crop the frame to half its width, leaving only the right half frame.width = fw * 0.5; frame.x = fw * 0.5; texture.updateUvs(); sprites[i] = new PIXI.Sprite(texture); sprites[i].y = i * 600; sprites[i].x = i * 600; app.stage.addChild(sprites[i]); } }); Am I doing something wrong or is this just the way pixi.js treats video textures? If so, is there a way to work around this and still get the result of a video sprite that is cropped? Thanks a lot for looking into this!

> if I set BLEND_MODE.ERASE on the brush, brush is not painting on the texture does texture has anything to erase inside? Just to clarify once more, all your thoughts are logical and correct. you are doing something wrong., and , unfortunately, my telepathy cant pick it up IT usually works but not in this case. What can you do: 1. continue tryharding 2. share the demo.

@gogoprog have help me to solved this problem. And this topic is closed. Thanks everyone.

"graphics.parent" Or do you not have link to graphics itself from event listener body?

In this case I am making the width smaller, so I was expecting it to be cropped just like the images. This is why I have manually set the frame with and height of the sprite to the known video dimensions. That's what I tried to do, hence my minimized example above. But you are right, of course the images and video are missing, so I created a full, self-contained example that I attached. There you can see that the video get's extended instead of cropped – as opposed to the images that get cropped to half their width. Thanks for having a look! videoCrop.zip

Really good!

its link to a file, "piijs.download" is a link to our CDN . Either <script src=> it, either you can just put that piece of code in your project. You dont have to change anything else. BlurFilterPass is internal thing that was patched in that PR. It will appear in npm as a version 5.2.1 i dont know when.

add a container inside, add containsPoint() that checks if its in red area. It should be easy if you know equations for square and circle.

How to display icons in your projects list instead of screenshot? Just place icon.png file in the root of your project. Optimal size is 120x120.

var tween = (undefined).add({ targets: heart, alpha: { value: 0, duration: 3000, delay:2000}, });

For anyone looking for similar functionality - I've created a temporary solution until Containers are added to Phaser 3. Feel free to let me know if this works for you https://www.npmjs.com/package/phaser3-interim-containers

Hi, first post and very new to PIXI! I'm trying to figure out how positioning works and how to do it properly. I have a few followup questions which I'll take later. Goal: Having a centered "mask area" where I can count the "unmasking progress" But first off; here is a fiddle. As you can see I have a centerContainer which I add all my sprites and bind all interactivity to. I center all the sprites relative to the app width and height values. I create the renderTexture with the same width and height as onTopOfMask and imageToReveal (400x400). The renderTextureSprite is not positioned and it results in only a corner being "unmasked" (clearly visible if I comment out the masking, it's positioned top left). If I position renderTextureSprite (fiddle) the same way as I've done with the sprites it works but then the brush/unmasking has some weird offset. 1. Is that the way to properly center the sprites etc or is it better to center the container instead? (like so: fiddle) or any other way? 2. When positioning, why does the mask have a weird offset? Fiddling around but not getting any wiser so help is greatly appriciated!

always have to laugh when i read something like that, 98% of the games that pop out somewhere every year are somehow clones, not exactly 100% clones but they take ideas from existing games here and there i once read a article called "steal like an artist", its all about getting inspired by others if you can manage to create an unique game that dont remind you of another one then do it, but be sure you can make it quick and you can sell it and its really unique :> as for html5 games, to make a living out of it and ensure it works on most mobile devices i prefer simple games, concepts that work and lovely details you add to make it a bit better and bit more unique