Leaderboard

Here’s a work-in-progress of Phaser 3 examples in TypeScript: https://examples.ourcade.co/phaser3-typescript You can make changes in the editor with code complete, static analysis, and more and then test it immediately in the browser. Right now, I am taking the official Phaser 3 examples and turning them into TypeScript with a more modern format. You can also get the examples as a Github repository without the website frontend: https://github.com/ourcade/phaser3-typescript-examples Hope this helps make it easier for people comfortable with webdev or any other dev but new to gamedev 🤗

I think it is wised decision that pixijs team exclude keyboard event. because pixijs is a "render" library not "game" engine. The easiest way is listening the keyboard event fire from "window" or "document". Please see [KeyBoard Event](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent). If you keep going you will start deal with the issued like: [Sync keyboard event to requestAnimationFrame] (https://gist.github.com/KayacChang/861f6be2970f47eaccc6b0814a930ccf). The second requirement is about the three topic: 1. how to deal with focus, like "focus event" 2. how to manage the "state" in the application, like "store the current focus target" 3. change the application behavior by the state change, like "observer pattern"

Well no I'm actually very happy with the global pixi loaders' cache. In my setup (using @react-pixi) pixi is set up and torn down multiple times (because components get unmounted etc). So it's very nice that the sprites are kept in cache. Perhaps I am alone in this but I think sprites loaded through a spritesheet atlas should get some sort of encapsulation, maybe just by prefixing with the atlas name or something.

I had sprite.roundPixels set to true. Removing this improves my sprite rendering... I was expecting the exact opposite. Is this normal? Thanks.

Hi, sorry but PIXI cant load multiPack from tp , but i asked Andreas Loew to add some meta to make this easier. So now you have 2 new meta named related_multi_packs and normal_map inside json to manage easier in PIXI. Check your version of Texture Packer pro, I can't remember what update where this added. here for you a example from my game loader core, it show you one way to manage and process multi-pack , normals, and animations. https://github.com/djmisterjon/ANFT/blob/e4002fab0428331fa5c5e844f1e9426a2795c5ec/js/game/global/loaders.js#L398 Sorry my example is very customised for my game engine and maybe not a good approche for you, i dont think you will can found a better free public demo code. Note this example is old and maybe have some weird code but it work. tips:look also for loader.pre https://pixijs.download/dev/docs/PIXI.Loader.html otherwise you would have to see with @xerver, (Autor) or @AndreasLoew , if they intends to implement a native multipack support in the PixiLoader with new metas from tp, but multi-pack remains a paid premium feature from tp. Sure , create a simple node programme to leech all your ressources files from a directory and build a register! no need to handwrite all your game resources ! Your will just need to have a good structures folders hierarchy. or use npm recursive-readdir https://www.npmjs.com/package/recursive-readdir

https://github.com/pixijs/pixi-tilemap/issues/86 https://github.com/pixijs/pixi-tilemap/issues/82

First of all, I'd like to say Hi for everyone as it is my first post here and also thank @ivan.popelyshev for great support on this forum! Back to the topic, I'm making an isometric game with build an island. I'm using my own ECS typescript engine and Pixi.js for renderering. Also for speeding up development i chose pixi-viewport as a camera and user interaction plugin. I read some info about isometric view but can't tell if one approach is better than the other for making it in pixi.js I observed the first one is the most popular, just scaling by half Y axis at the viewport container this.CoreEngine = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, resolution: 1, resizeTo: window, antialias: true }); this.Viewport = new Viewport({ screenWidth: window.innerWidth, screenHeight: window.innerHeight, worldWidth: 2000, worldHeight: 2000, interaction: this.CoreEngine.renderer.plugins.interaction, noTicker: true, ticker: this.CoreEngine.ticker }); this.Viewport.setTransform(0, 0, 1, 0.5); And then when making some sprites / graphics rotate them by 45deg. But the same result i can make doing Viewport transformation by creating custom matrix. this.CoreEngine = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, resolution: 1, resizeTo: window, antialias: true }); this.Viewport = new Viewport({ screenWidth: window.innerWidth, screenHeight: window.innerHeight, worldWidth: 2000, worldHeight: 2000, interaction: this.CoreEngine.renderer.plugins.interaction, noTicker: true, ticker: this.CoreEngine.ticker }); const Mat = new PIXI.Matrix(); Mat.rotate(Math.PI / 4).scale(1, 0.63); this.Viewport.transform.setFromMatrix(Mat); This way i dont need to rotate sprites and graphics because as i understand the whole system is changed from cartezian to somewhat izometric in the viewport container. With additional sprites it looks like this: My question is, which approach is preferred which one is more optimized? I can predict that Viewport functionality can be changed when i trasforming its matrix (camera can be crazy), so maybe i should do this on PIXI.stage instead of Viewport container?

Thank you! > My question is, which approach is preferred which one is more optimized? Same speed. There's no such thing as "PIXI.stage". Stage exists only for pixi-layers plugin in case you need special capabilities regarding layers. The real problem is number of tiles that you draw , and there are many tilemap-related discussions in this subforum. Personally, I favor y/=2 approach, the one you mentioned.

"spritesheet.texture.frame" not "spritesheet.frame" Yes. I would do it and debug the result. In case you use trimming or rotations in spritesheet, try "texture.orig" instead of frame.

Cool Game. I teach 1st grade and also make educational games. Graphics are good...and controls smoothly. Noticed some of the fonts look like the ones over at Flaming Text. I use some of those in my games too.

Also, words "performance" and "optimization" usually are tied to "profiler" and "heapdump". You have to bump to a problem and identify it, before you figure out what code style is better for pixi.

All props are fast. Usually its multi-lines calls of methods that are slow. > Can I read more about this subject somewhere? source-code. Unfortunately, our development process is faster than documenting.

Hey everyone! This is a demo for a little game I have just finished: "Arachnowopunk" - an infinite-runner metroidvania. Instead of having complete freedom of movement, you have to strategically use the platforms to explore in the desired direction. Any feedback or comments are greatly appreciated! You can try it here: https://e1sif.itch.io/arachnowopunk (The game was coded in Haxe using OpenFl/Haxeflixel, but then exported to various platforms, including HTML5!)

https://github.com/gameofbombs/pixi-blit/tree/master/examples build the plugin, host whole folder, open examples, debug wtf is going on there , try to figure out why i did this thing

moveTo-lineTo-lineTo-arc/bezierTo If you want to modify existing polygons in graphcis, then you have to look how "graphics.geometry.graphicsData" works, what it contains, modify values there and call "graphics.geometry.invalidate()". Unfortunately there's no morph graphics in pixi

I know there's a few topics on the subject already, but I have been banging my head on the wall for some hours now. I am having a hard time loading a .fnt file into pixijs. Here's the process I have been through. 1) Using bitmap Font generator for windows I've exported a .fnt file in XML format. 2) Adding the .fnt to the loader const loader = new PIXI.Loader() loader.add("fnt", require('../../assets/sprites/arial.fnt')); loader.load(function() { const bitmapFontText = new PIXI.BitmapText('BITMAP FONTS', { font: '24px Arial' }); bitmapFontText.anchor.set(0.5) bitmapFontText.position.x = 50 bitmapFontText.position.y = 50 this.viewport.addChild(bitmapFontText); }); Then I had the error : Module parse failed: You may need an appropriate loader to handle this file type Which I think I solved this way inside my webpack.config using File-Loader : module: { rules: [ { test: /\.fnt$/, use: [ { loader: 'file-loader', options: { name: '[./src/assets/sprites][name].[ext]', }, }, ], }, ], } 3) Creating PIXI.BitmapText : It seems my font is still not fully loaded because I get this error : TypeError: Cannot read property 'size' of undefined What am I missing? PS: I made sure I was using the Face attribute from the arial.fnt file in { font: '24px Arial' }

Sure, I sent you an email

You have some basics official demo provide by ivan ( Autor ) https://pixijs.io/examples/#/plugin-projection/iso-basic.js and i have some customs experimental playgrounds https://www.pixiplayground.com/#/edit/gqBdNMjJxm_eVh2ag87CH https://www.pixiplayground.com/#/edit/CRHMfHMsaM82X5EfCtNYe https://www.pixiplayground.com/#/edit/ziTqfWG24v3A2ROJm6Y0o and no, rotation should work both in 2d and 3d try look for proj.affine in 2d demo forget euler is in 3d proj only, sorry for this. https://pixijs.io/examples/#/plugin-projection/plane.js 3d + camera is maybe overkill for your need.

Hello, if anyone like me finds this topic in search of answer to very same question, here are some links for you: https://github.com/javafxports/openjdk-jfx/issues/552 and https://bugs.openjdk.java.net/browse/JDK-8229264 This issue wasn't created by me but reflects my experience with Canvas + WebView -- none of blend modes works.

use `ObservableEuler` https://github.com/pixijs/pixi-projection/blob/a33e4e7117694436d45705d544a0dd87663ae175/dist/pixi-projection.js#L2935 it in your sprite 3d sprite.euler[props] = value

Hello! I'm new to the forum and new to Pixi.js as well. I was working on learning about some of the features of the RPG Maker MV software and before I knew it I was going down the rabbit hole of plugins and the technology therein. I understand that the software makes use of pixi.js, and in doing my research I came across, of course, the PixiJS website: https://www.pixijs.com/. On the homepage is a wonderful demo of clouds and what appears to be a nebular inkblot strewn across the screen and following the mouse arrow. I am desperately trying to understand the code for only the cloud feature. I managed to get the JavaScript code and beautify it, but since it's minimized there are no real names for any of the variables or objects. It's damn near impossible to read... Code was too large to include as a snippet, so I attached it to the post. I was wondering if anyone out there could help me interpret this code so that I can sort out just the cloud functionality. If anyone out there is worried about me "stealing" code my only aim is to play with the code and use it for a game that will probably never be released. I want to extract the knowledge to come up with my own design. That is all. I tried to contact Pixijs.com directly, but haven't received any response... Is there anyone out there who can help me identify where that code is and perhaps point out some of the more important aspects of that code? Or perhaps there is a tutorial out there that can describe the steps on implementing the same cloud effect? Or maybe point out where I can find a more readable version of the code? I'm listening the Interstellar soundtrack right now, and it's making me feel that this post is much foreboding than it actually is... Thanks for reading nebulon.js

If the hexagons are in a grid, you could avoid doing any hit tests by calculating the tile coordinates from cursor position.

> is out of my scope in reasonable time. Im gonna steal that phrase

You could do that by creating a shader with two texture inputs which blend between those two. The actual code & math inside the shader is out of my scope in reasonable time. As a starting point I would propably try doing somekind of convolution with previous frame as feedback and then moving towards target image. This is the closest example for blending. In the example a perlin noise image is used to determine the blending. In your case that would be the shader somehow morphing the images. https://pixijs.io/examples/#/mesh-and-shaders/multipass-shader-generated-mesh.js

> By copying you mean editing Pixi's Graphics class source code ? You can take that folder, copy in your project, rename the class and do what you want with it. as for glsl, there are special tricks for graphics https://www.pixiplayground.com/#/edit/wu4-HcklTXNsrTiE6y9O7

> - is web-techs suitable for the application? I heard that question many times this year and in previous. No one knows the answer. I know that its possible to make app you want with that tech.

You can copy Graphics and improve it. There are many adjustments that can be made to styles. You can even make custom shader where styles will be handled in uniforms , so you dont have to rebuild buffers each time you change style. If you dont know webgl internals that all isnt possible, and all specialists are busy at the moment, you have no other option than to learn source code. Also, anti-anliasing will be a problem if you start applying filters on shapes, I have a solution for that already, https://github.com/gameofbombs/pixi-blit , but, again, if you didnt make a habit to look in pixijs internals - it wont help you.

Hey!!! I'm Kayac Chang from Taiwan. I just create a template to quickly setup the pixi.js project by using [Create React App] (https://create-react-app.dev/) Now, if you already install npm or yarn. You can just typing npx create-react-app my-app --template pixijs # or yarn create react-app my-app --template pixijs Also have the typescript setup npx create-react-app my-app --template pixijs-typescript # or yarn create react-app my-app --template pixijs-typescript Happy hacking.

https://en.wikipedia.org/wiki/Consignment Why no logos or out links during Consignment? Are you being transparent to your clients about the source of the games offered? How would a license transfer work if not acting as a sub-licensor or connecting licensee directly with licensor? How do you ensure that the supplier of games has the rights to those games? Have you completed such deals before and, if so, how did these marketplace issues not arise? Thanks!

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.

Really like the (intense) style of this game. Good job!

Hi Guys, as part of the 9.0 (master) branch, all classes have been converted to es6, and the build process now generate 3 files : melonjs.js (plain es5 umd bundle) melonjs.min.js (minified es5 umd bundle) melons-module.js (es6 module) both the es5 umd bundle and es6 module are now available under our amazon build bucket (click on the latest build version) : https://melonjs-builds.s3.amazonaws.com/index.html?prefix=artifacts/master/ I haven't yet really tested it to be honest, as I'm still focusing on other features and I haven't really yet converted any example, but It would really be nice to have any external feedback/testing on this one if anyone here wants to be a alpha-beta tester for the es6 module. the API are still supposed to be backward compatible (inheritance mechanism has not been changed yet to the es6 class inheritance), so using "import * as me from melons-bundle.js" should just be working as previously. Thanks!

Hi Hamza, Wishing you well. I'm currently working on a fully remote perm opportunity - please check it out and let me know your thoughts. Kind regards, Lauren Chancellor

You could just continue it in prev thread... OK, merged with previous.

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

Thanks very much!

The first Alpha release of The COVID-19 Game is out! Play as the red blood cells and white blood cells and defend the body against the infection of SARS, MERS & COVID-19. This is quite possibly the first Real-Time Strategy / Real-Time Tactical style game to be developed using Quasar & MelonJS. It’s probably the third game in the world about COVID-19. It’s been deployed to a single page app, Electron, Android & a browser extension. Check out https://customautosys.com/covidgame now! I have already uploaded the Android app to the Play Store and the BEX to the Chrome Web Store & Firefox extensions repository. It’ll take a while for those to approve. I’ll update the links here once the store listings are approved. However, you can already access the Snap Store listing: https://snapcraft.io/covidgame (for Linux users). Many thanks to obiot for creating melonjs! Hope you can work on those bug fixes soon so I can also iron out the bugs in my game.

Hooray to melonJS 8.0.1! 🎉🎊

Hi All, My 11 year old and I are working on a game in Phaser called Blob Attack - He came up with the idea when he was 8 years old and we made the game using HTML 5 and moving divs around. Not that he has grown up a bit and can understand programming better, we are rewriting the game in Phaser - see it at blobattack.com. Also pre-register for it on the Google Play Store - https://play.google.com/store/apps/details?id=com.blobattack.blobattack - where we used Cordova to turn the game into an Android game. While developing the game we realized that there are very few Phaser UI Controls library so we are open sourcing the code we used to build the controls in the game like buttons and progress bars. More coming soon. - https://stupidzombie.github.io/Phaser-3-UI/ This forum has been a lot of help to us when we've been stuck on Phaser stuff and I hope we can contribute something back. Thanks Sidd

clone() doesnt clone geometry, so if you want different style - sorry, you have to do it from scratch. https://github.com/pixijs/pixi.js/blob/8f7ed7662949ea1217b6f3b6af470e855cfe0b13/packages/graphics/src/Graphics.ts#L262 if it worked, then graphics.geometry.invalidate() could help you, and it exists only in pixi-v5. I advice is to read source of functions that you use, it provides much more information than you could read from posts. I usually open separate IDE window on pixijs project and use shortcut to search for particular class.

The compo started yesterday - check out the blog post, and the short video announcing the theme. We have WebRTC added to the Server category, and continue having both WebXR (with Magic Leap 1 as the prize), and Web Monetization categories as well.

https://github.com/phaser-discord/community/blob/master/FAQ.md https://github.com/samme/phaser3-faq/wiki

@rich Thanks for the fix ! Tried Phaser v3.3.0 and have now the TileSprite scaling working Below is the working code for future readers. 'use strict'; class GameScene extends Phaser.Scene { constructor() { super('GameScene'); } preload() { this.load.image('background1_clouds_1', 'assets/background/background1_clouds_1.png'); this.load.image('background1_clouds_2', 'assets/background/background1_clouds_2.png'); this.load.image('background1_clouds_3', 'assets/background/background1_clouds_3.png'); this.load.image('background1_clouds_4', 'assets/background/background1_clouds_4.png'); this.load.image('background1_rocks_1', 'assets/background/background1_rocks_1.png'); this.load.image('background1_rocks_2', 'assets/background/background1_rocks_2.png'); this.load.image('background1_sky', 'assets/background/background1_sky.png'); } create() { // Get the window sizes let windowWidth = window.innerWidth; let windowHeight = window.innerHeight; // Find the center of the top space let topBackgroundXOrigin = windowWidth / 2; let topBackgroundYOrigin = (windowHeight / 5) * 1.5; let topBackgroundHeight = (windowHeight / 5) * 3; // Base width and height of the images let imageBaseWidth = 1920; let imageBaseHeight = 1080; let heightRatio = topBackgroundHeight / imageBaseHeight; // Add the sky image at the right location and resize it to take all the space, no scaling needed let skyImage = this.add.image(topBackgroundXOrigin, topBackgroundYOrigin, 'background1_sky'); skyImage.setDisplaySize(windowWidth, topBackgroundHeight); // Add each layer one by one this.cloud1 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'background1_clouds_1'); this.cloud1.setScale(heightRatio); this.cloud2 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'background1_clouds_2'); this.cloud2.setScale(heightRatio); this.rocks1 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'background1_rocks_1'); this.rocks1.setScale(heightRatio); this.cloud3 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'background1_clouds_3'); this.cloud3.setScale(heightRatio); this.rocks2 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'background1_rocks_2'); this.rocks2.setScale(heightRatio); this.cloud4 = this.add.tileSprite(topBackgroundXOrigin, topBackgroundYOrigin, imageBaseWidth, imageBaseHeight, 'background1_clouds_4'); this.cloud4.setScale(heightRatio); } update() { this.cloud1.tilePositionX += 0.05; this.cloud2.tilePositionX += 0.05; this.rocks1.tilePositionX += 0.10; this.cloud3.tilePositionX += 0.15; this.rocks2.tilePositionX += 0.20; this.cloud4.tilePositionX += 0.30; } } module.exports = GameScene You can download the images for free from here https://craftpix.net/freebies/free-horizontal-2d-game-backgrounds/

DisplayObjects are taken by javascript GC. Textures that weren't used for 2-3 minutes or so, will be collected by pixi GC which is turned on by default. You can turn it off if it gives you lags. But if you dont destroy BaseTexture's , images will still live in "PIXI.utils.TextureCache", but they will be in png form (browser optimizes that), which is small compared to fully loaded texture

correct way is IKnowParentContainer.removeChild(thisSmallThingy); but sometimes you dont remember where did you put it! myContainer.parent.removeChild(myContainer); and sometimes you know that it wont be used anymore AT ALL. Then if all Text and Sprites elements doesnt have textures that you will use in future, you can destroy all textures inside myContainer.parent.removeChild(myContainer); myContainer.destroy({children:true, texture:true, baseTexture:true}); But dont worry. If you dont destroy things, javascript gc and our own pixi gc will take care of that in a few minutes. The only evil thing is generated textures, its better if you destroy renderTextures you created. If you dont know whats a renderTexture, dont worry

Just a blind guess but maybe you mean something like this? If not, please specify a bit const WIDTH = x; const HEIGHT = y; var renderer = PIXI.autoDetectRenderer(WIDTH, HEIGHT, ...); document.body.appendChild(renderer.view); //main container, use this to render everything. var stage = new PIXI.Container(); //the container we want to resize. var container1 = stage.addChild(new PIXI.Container()); //the container we don't want to resize. var container2 = stage.addChild(new PIXI.Container()); var resize = function() { var ratio = Math.min(width / renderer.width, height / renderer.height); // just scale that one container and leave other as it was. container1.scale.x = container1.scale.y = ratio; renderer.resize(Math.ceil(WIDTH * ratio), Math.ceil(HEIGHT * ratio)); }; window.addEventListener("resize", resize);

Awww damn you mean I lost my cover as a big mean monkey guy?

Woot man this is really cool! And as a bonus we saw your face