Leaderboard

Hi all, I just wanted to let you know that Panda is still my primary game engine and I have no plans to abandon Panda. The absence of @enpu is unfortunate but don't forget that Panda is open source so most of the time, it is possible to fix minor issues yourself by having a look in the source code. Currently I have two large commercial projects powered by Panda and it is expected that these project will be running for at least several years. Don't forget that Panda by itself is a great engine and that it has a couple of features that not all other engines currently are supporting. Take hires support and the custom Panda GUI for example, these are just great! I will continue to read this forum on a regular basis. If there are questions that I can answer quickly, you can count on my support. Stephan

https://github.com/tleunen/pixi-multistyle-text Use this one!

Hi, I found two games made only with HTML, JavaScript and CSS, no game engine. Here is the link: http://oldfashion-games.000webhostapp.com/ They can also be played on mobile phones.

hum from individual test on Vivaldi browser (chromium) ~2sec test, ms per frames . (100% cpu usage for all!). It a fast test, if you guys can also take and shares same kind of screen plz. Hardware. Result link source code used: http://fatidol.com/phy-benchmark/

this one is nice

if canvas is gpu-accelerated, you can see those operations in NVidia NView. Also, 5-6 years ago, people compared drawImage vs fillRect/pattern. I think that it also has to be different in case your sprite is axis-aligned or not, analytical antialiasing should affect those things.

Its a known issue, we have a preprocessor that adds "precision float " in the beginning , so please make sure you specify that line at the first symbol and not after "\n" That wont work: const frag = ` #version ... `; that'll work: const frag = `#version 300 es ... `; The place in source code: https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/shader/Program.js#L53 Yes, we cant decide what to do with that thing for several months already.

https://www.pixiplayground.com/#/edit/s~VNyhMHDC32k41fJ4iD7 OK, so, vTextureCoord is normalized input, mouse is screen coord. We convert mouse to normalized input too. power is also converted to normlalized input, by dividing. If you want to get rid of division - pixi also gives 1.0/inputSize in its "zw" part. No way to put int constant there, have to use js interpolation. Its easy to fix aspect ratio there if you need, but, since original shadertoy source didnt have it, i dont want to add it for you. I'm depressed because my articles do nothing and people still ask me to do all the stuff for them.

I want to share a small PDF booklet with JavaScript coding challenges: https://codeguppy.com/site/download/50_coding_challenges.pdf These coding challenges are designed for beginners and intended to offer the foundation that they may need when developing mini-games on https://codeguppy.com or any other platform.

Glad we resolved it. Welcome to the forums!

Hi there, I have a collection of sprite animations happening inside of a PIXI Container. I need to take a rectangle section of this animation and display it inside of a Spine animation using a Mesh. (this seems to be working all fine) However, I am able to do get the full contents of the container and place it into my Spine animation no problem using renderTexture, but I only need a small section of its contents. I thought I would be able to do something like this.... var party = PIXI.Container(); // Sprites of people in a party inside of here var texture = PIXI.RenderTexture.create(party.width, party.height); texture.frame = new PIXI.Rectangle(100, 0, 100, party.height); // also tried texture.trim texture._updateUvs(); // on rAF update the mesh texture and apply to the mesh renderer(party,texture); slot.attachment.region.texture = texture; slot.attachment.updateUVs(); Here it looks like it should only use a section from 100 pixels in from the left and only take a 100 pixel wide slice, but it doesn't. I also thought I would create the renderTexture at the size of the slice I need.... var texture = PIXI.RenderTexture.create(100, party.height); texture.frame = new PIXI.Rectangle(100, 0, 100, party.height); // also tried texture.trim But this just takes a 100 pixel section at the left most of my container. Maybe I could apply a mask to the section I need and create a texture from that or something?

Its not, its just amount of work to make it right for your game is big. There always be people who complain about lags, and you have to be balanced about effort you spend on them. Suppose 100 people joined your game, and 10 had bad connection. 10 left. Now, in a month or two situation in network changes, and 9 from those 90 have lags, they leave, but those 10 previous guys don't join back just because their network became better Client prediction depends on you game, and if you have players very close (touching) and that affects gameplay - even slight lag will make experience bad. I made my IO game (gameofbombs.com) in 2012-2013 I was very lucky for it to be playable, i didnt know anything about networking experience of past games and i did it! Made it better in 2014-2015, and from 2017 I hired the only guy who understood my algorithms and he's making new version of engine that will have much less lags. Its going on for 3 years already and its very hard. Of course you can use nengi to start, but networking is very big and you dont stop there, you'll have to modify it for your game.

Hello! Loving v5 it's great! I've been trying to render an extremely large map of tiles in smaller chunks that load in as the player moves around. I've done this with sprites and a render texture per chunk and it works fine, but now to learn some webgl I'm porting the project to use pixi Mesh + Shader. I've gotten to the point where I have the vertices and uv coords for a 16x16 chunk of tiles (skipping the code, nothing special). I then create a mesh per chunk of tiles and position them around. Code looks like this: const shader = PIXI.Shader.from(vertexSrc, fragmentSrc, uniforms); const chunk = new PIXI.Mesh(geometry, shader); // etc for many chunks and then I just change the chunk.x and chunk.y Now what I'm trying to do next is actually show different textures for each tile within each chunk, for which I'm using a collection of tileTypes which is either going to be an array or texture uniform with the data for the 256 tiles that comprise the 16x16 chunk. I hope that makes sense. In any case, because all of the chunks have the same geometry and the same shader if i change the `chunk.shader.unforms.tileType` it changes all of the chunks at the same time. If I create a new shader for each chunk so they have a unique uniforms object each, it ends up being an expensive operation which creates a visual hitch. I could probably create a pool of meshes and shaders and reuse them such that I wouldn't have to actually create new shader objects at run time as chunks load into the game, but before going down that path I wanted to know if there was an easier way. Can I somehow create meshes that share the geometry, vertexShader, fragmentShader, but have a *unique* uniform per instance of the mesh? Thanks

Thanks ivan, I found the solution now, I use Plane instead of Rope to solve the turn issue

need a live benchmark, the bench is from 2015 😏 am sure a lot of thing change in those API. Also versions,codes sources will help. it easy to use a code and algo thats is favorable to a particular engine.

In that case, write me as soon as you have something, i'd like to make an article based on that. "All the tilemap techniques!"

Just wanted to add something else. I tried to explicitly purge the Loader resources via something like delete this._game.loader.resources[name]; I have found that after this is done, on the next load, the spritesheet property is undefined. I load this asset using this code if (!this._game.loader.resources[bname]) { const tname = Layout.LayoutManager.shared.decoratedAssetName('assets/' + bname + '.json'); this._game.loader.add(bname, tname); this._game.loader.load((loader: PIXI.Loader, resources: Partial<Record<string, PIXI.LoaderResource>>) => { postLoadHandler(); }); } postLoadHandler tries to access the spritesheet via this code (note that resource is split out as a const right now to make it easier to inspect in the debugger). const resource = this._game.loader.resources[bname]; let spritesheet = resource.spritesheet; spritesheet is undefined when I try to reload a spritesheet which was forcibly removed using delete as described above.

Howdy! I am finally starting the process of upgrading to PIXI v5. I have a few custom renderers written in V4, and made use of glCore.GLShader, glCore.GLBuffer, and glCore.VertexArrayObject quite heavily. In V4, I could import glCore from `pixi.js` and have what I need. In V5, is glCore still packaged with PIXI? If it is, where can I find it? If it is no longer included, does V5 provide similar helper methods or objects to make building custom renderers easier? I am aware of the migration guide: https://github.com/pixijs/pixi.js/wiki/v5-Migration-Guide but it doesn't go very low-level. Thanks!

Are there some examples of extending PIXI.utils namespace? Taking a look at Pixi's debugging and editor tools, the Free Transform Tool appears to extend PIXI.utils - cool library, looks pretty alpha without npm or webpack. Just references PIXI in a global scope and attempts to prototype utils. If I want to extend Pixi through utilities, or maybe just provide webpack module libraries through npm, any recommendations such as good example projects to follow?

Example of what can go wrong with pixijs + webpack + plugins: https://github.com/pixijs/pixi.js/issues/6208

@ivan.popelyshev Minus multi-selection, that's a perfect match. Thanks! Really appreciate all the support you provide.

far.texture = PIXI.Texture.fromVideo('img/sd9.mp4'); That'll work too. Regarding your current problem, it looks like double-destroy Destroy the same thing twice somehow, you can debug it with chrome devtools. PixiJS doesnt have any guarantees against it, its open-source library and not some huge monster adobe product with a hundred people working on it constantly

Hey @ivan.popelyshev, Thanks for the answer! Sorry but i'm new to webgl and PIXI, so i might have some more questions.. I'm not sure to understand how to do this. For the canvas, i guess i might change its size in my constructor by changing this line this.app.renderer.resize(parent.clientWidth, parent.clientHeight); But i couldn't find how to use the `containerfilterArea = app.screen` .. For the last part i've read about it, i might have to create a plane that i'll reuse each time so only one animation car happer at a time right? Thanks for your time 🙏

Thanks for the response ivan. I wasn't aware that assigning parentGroup wasn't really needed, i've noted this. Maybe I don't understand how pixi-layers works or my logic isn't understandable. Basically, the light sprites render in the correct order. The tree sprites also render in the correct order. It's the ambient lighting container thats at the highest zIndex that has the problem. If I don't add children (mask from the light sprite's texture) then obviously the lights aren't visible since the ambient lighting container sits above everything. But since the ambient lighting container sits above everything so does all of its children. I've created a new fiddle, with the pixi-layer stuff stripped out. **Basically the bottom tree should not be lit by the light. https://jsfiddle.net/4u9gw2sL/

I've put this solution here: https://github.com/pixijs/pixi.js/wiki/v5-Hacks#shaders , i dont know why wasnt it mentioned in the docs.

When I create a custom fragment shader and attach it to some sprite, the fragment shader works with some bounding rectangle of the sprite but not with the transformed quad. When sprited rotated, this rectangle remains perpendicular to the coordinate axis. You can take a look at this example: https://jsfiddle.net/q2rux5wc/ (the red zone is this "bounding rectangle"). In my understanding, when we rotate the sprite, a different matrix should be passed into the vertex shader, it should transform the input quad, then the fragment shader works with transformed quad. But looks like PixiJS uses another approach. So can somebody explain (or give some links) how it's implemented in PixiJS and why?

Ok this helps a whole lot. Thanks! For the int constant I ended up putting `#define focusDetail 7` at the top instead of using js interpolation, but I do understand the benefits interpolation can bring. Edit: I made some small changes to compensate for alpha blending (I think that might be the right term). I'll post it here in case someone else wants to use this. I'm using this on a container where it's filterArea = app.renderer.screen and center is a uniform passed in. precision highp float; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform vec2 center; uniform vec4 inputSize; uniform vec4 outputFrame; uniform float time; #define focusDetail 7 void main() { float focusPower = 10.0; vec2 fragCoord = vTextureCoord; vec2 uv = fragCoord.xy; vec2 mousePos = (center.xy - outputFrame.xy) / inputSize.xy; // same as * inputSize.zw vec2 focus = uv - mousePos; vec4 outColor; outColor = vec4(0, 0, 0, 0); for (int i=0; i<focusDetail; i++) { float power = 1.0 - focusPower * (1.0/inputSize.x) * float(i); vec4 c = texture2D(uSampler, focus * power + mousePos).rgba; if (texture2D(uSampler, focus * power + mousePos).a > 0.0) outColor.rgba += c; else outColor.rgb += c.rgb; } outColor.rgba *= 1.0 / float(focusDetail); gl_FragColor = outColor; }

3rd Person Rail Shooter (play it) 3rd Person Rail Shooter prototype This prototype is a "3rd Person Rail Shooter". The goal is to survive as long as possible. The 3D effect, obviously, is fake. It's an endless game that end when the player die. You can use my script as you want, they are free. If you use this prototype for commercial purpose, please, change the graphic/music/fx assets I've used (these are Opengameart's assets (opengameart.org), for the credits see the Prototypes HUB section). I hope there are enough comments on the code. Please, let me know if you use my scripts, thanks. Download all scripts : https://www.magratheaworks.net/Prototype_3rd_Person_rail_shooter.zip

Its time to search further. Look at https://github.com/pixijs/pixi.js/wiki/v5-Resources and at other pages in wiki. Here's one of plugins that can help you: https://github.com/Mwni/PIXI.TextInput As for table, well, lots of PIXI.Text's Pixi on its own doesnt have layout. We dont have expertise on building UI's, we are rendering specialists.

Hi everyone, here is a pretty final version of my browser roguelike game Dungeon Mist. You fight monsters, discover items, find hidden paths in order to reach lower levels of the dungeon. Here you can play it https://dungeonmist.com or in https://dungeonmist.com/itch.io/game This community helped me to fix some issues from previous versions. I would love to hear your feedback. - how the itch.io link works for Android phones(in iPhone there is a padding problem)

Hi, even Construct 2 is still very good (if you visit my website you will see) to make HTML5 games or mobile. Of course Construct 3 has a lot features and going better and better. This is a different part. This no means the engine you choose is bad. To develop a good game depends on a lot of things. And of course to sell it is another different part. Better? What are your arguments? How people can say unity is better than unreal, etc ? Each engine do great job. The only question here is: "What game / games want to develop" ? To be honest, I don't know why some people choose phaser or similar. I believe it's about code - to code something. But you can programming in Construct 3 too. I believe need to post here and a phaser developer with a lot experience to give us an explanation about phaser and what can do better. So from my experience, Construct is very powerful, so i believe if your previous engine was GameMaker a good choice is to pass to Construct 3 but as i said, Construct 2 is still very good for games. Also i believe Construct can learn it in some hours. I'm not from Construct team, i'm not doing a promo here. I work with Construct years now and this is my opinion. But of course if you like phaser, go with it. Good luck! Cheers.

Hi everyone, I just create a simple show case for PIXI.JS. A top-down Tank game with: 1. Physic engine integration with matter-js. 2. ViewPort for 2D camara. 3. Custom Tile map and grid system. 4. Dynamic generate new area . 5. Keyboard Control. 6. GUI Interface. Example: https://kayacchang.github.io/Tank/dist/ Source Code: https://github.com/KayacChang/Tank

We have just released RevoltFX - a framework to create stunning particle effects. You can create particle emitters and time based effect sequences and nest them all together. Check out some samples https://samples.revoltfx.electronauts.net/ Get the library on Github https://github.com/bma73/revolt-fx To create your own effects use the RevoltFX online editor https://editor.revoltfx.electronauts.net/ Get the editor on Github https://github.com/bma73/revolt-fx-editor

I am also a GD publisher and developer since March 2018. And I also work with many other game distributors like Cloud Games, 4J, SoftGames, Famobi, CrazyGames, ... and Gamedistribution. Actually, up to now, June 06, 2019, I was work hard with GD. I have earned some money monthly and I also delayed my payment on GD. I really understand this problem when we have not recived money as well as myself efforts. So, I have plan to write a personal blog that shares all revenue of some game distributors and personal reviews about them. The purpose I write this review for new people who want to join in games entertainment industry. I will post my review on my blog about report my monthly earnings as well as games developer experience. (Follow me on FB and TW page)

Hello, I try to play multiple short sound files. The problem is that it looks like sound files are not being played from cache - when I replay the sound which wasn't played for some seconds I see a noticeable screen freezing, like lag. It feels like JavaScript removes it from cache after 1-2 seconds and then reads/loads the file again on replay. I tried to play sounds with 2 methods: 1. directly: this.sound.play("soundname"); 2. from the instance: var music = this.sound.add('soundname'); ... // After some delay during the game music.play(); but result is the same - freezing is very noticeable on almost all replays. Maybe it's not a cache problem, it just feels like that. What can I do to prevent freezing (or to stay sounds in memory)?

So, in create I have graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xaa00aa } }); line = new Phaser.Geom.Line(100, 300, 400, 300); this.physics.add.overlap(line, walls, linedetect); And in Update: graphics.clear(); line.x1 = base.x; line.y1 = base.y; line.x2 = player.x; line.y2 = player.y; graphics.strokeLineShape(line); However, the following function never activates function linedetect(line, walls) { alert('collided'); } Would this normally work? I have used this before to detect collision between different game objects, but never a 'line'. If I should provide more information please let me know.

With some help of some nice people in the Discord channel, we came to the conclusion that this isn't possible with the standard particle system. However, we also found that you could pass custom onEmit and onUpdate methods to the emitter, which allowed for a custom solution to add this functionality. Since we were porting from Phaser 2 with Particle Storm, I decided to write this in a way that prevented us from having to re-do all of our particle configs, so we simply include value and control in the same format and pass the following two methods as onEmit and onUpdate. /** * Custom particle update callback that handles Particle Storm style controls. * @param {Object} particle Particle to act on. * @param {String} key Property name. * @return {Number} New value. */ static controlUpdate(particle, key) { const {control} = particle.emitter[key].propertyValue; const initial = particle[`${key}Initial`] || 1; const percent = particle.lifeT; let index = 0; let point = control[index]; if (point.x === percent) { return point.y; } // Find the next point based on the current percent. while (point.x <= percent) { if (index >= control.length - 1) { return point.x; } index += 1; point = control[index]; } const prev = control[index - 1]; // Follow curve with linear interpolation: f(x) = y0 + (y1 - y0) * (x - x0) / (x1 - x0). const valueMulti = prev.y + (percent - prev.x) * (point.y - prev.y) / (point.x - prev.x); return valueMulti * initial; } /** * Custom particle emit event to set the initial value. * @param {Object} particle Particle to act on. * @param {String} key Property name. */ static initialOnEmit(particle, key) { const values = particle.emitter[key].propertyValue; // Handle a random value. if (typeof values.value === 'object') { particle[`${key}Initial`] = randomBetween(values.value.min, values.value.max); } else if (values.value) { particle[`${key}Initial`] = values.value; } }

Hi, recently i moved from Phaser 2 to Phaser 3 and i started some new project. Here is my problem: In Phaser 2 its easy to add text to sprite like this: var sprite = game.add.sprite(...); var button_style = { font: "27px Verdana", fontWeight: "bold", align: "center", fill: "#000000", stroke: '#ffffff', strokeThickness: 2 }; button_text = game.add.text(0, 0, 'blabla', button_style); sprite.addChild(button_text); After few days i am very tired of searching to get solution on Phaser 3 to add text on sprite. Can anybody help me please ? Thanks in advance.

Hey, The game is still in active development We did many features: Missions to upgrade score multiplier Daily challenge - collect some items to get Stars to unlock tricks Facebook Leaderboard with our own backend based on Google Cloud New heroes and skateboards! Also we were faced with some technical issues like ads.txt because we have AdSense For Games ads in the game. All emails we've sent to publishers were gone to trash so we implemented Demo/Full version. The game checks the publisher's ads.txt file via our backend and if it has our Google ads identifier the game will be in Full mode otherwise in Demo. In Demo version we show a notice about this mode to player and many players decide to go to our website. So we watched a large traffic on our website with Asana: Sure, publishers can add us to ads.txt and they will have the Full version But only 2 publishers contacted us about it since November of 2017. And some statistics as usual: 1.3 MAU 70 millions of plays since launch in March of 2017 last months Mobile and Tablets players are 20% of all players, other 80% are Desktop users. So more and more players play HTML5 WebGL games with phones and tablets. CPMStar's ecpm is $0.37 and AFG's ecpm is $1.16 for the last month

I'll give you our personal experience of different ad networks: Google AdSense for Html5 games - you are right, they are in beta and it need approval from Google to be able to use the service. CPM is around $3. No problems with payment or anything. That's our only network atm. and I think it'll stay like that. Leadbolt - CPM was close to nothing (like $0.001). We were testing that few years ago, I don't know if it got any better. AppNext - we had pretty sweet CPM (around $6 - especially on iOS). It was working nicely until one day I got an email saying our account has been deleted because we supposedly violated the terms. No explanation was given as to what wrong we actually did. They took our monthly earnings (all good accordingly to the terms). I tried to contact them over email but they said they can't give me any additional information.

Facebook Instant Games being the biggest I guess. All other chat/social apps coming closely behind (Kik, WeChat, Telegram, VK). Kongregate and Miniclip both fully supporting Html5 games. Quite a number of smaller apps, devices, portals opening/starting their games sections with Html5 support. At the top of it - all the publishers that were there since 2012 still staying in business (Coolgames, Softgames, Famobi, GamePix, Spil).

I think you are misunderstanding. This is not a limitation of PixiJS. This is how WebGL works. We have to upload each frame to render it, there is no other option. Either that works for your use case or it doesn't, but either way there isn't anything we can do about it. Specifically answering your question: No, PixiJS was not built specifically to work on cordova. We built it to work in the browser, on mobile and desktop. However, we do try to support Ejecta, CocoonJS, Cordova, et al.

Hello, This is what I'm trying to do: I have a draggable circle inside a shape which collides with its edges (the shape's edges). Any idea of how I can achieve this? I tried using P2 physics with both sprites, but I couldn't make the circle stay and collide inside the shape.

Yeah! We've updated the game with 3 new characters and 3 new skateboards! Meet J., Darla and Tommy. They can be unlocked with their tokens from Lucky Box. The game has been released 4 months ago, and there is some statistics again: 6.8 millions of players 17.8 millions of plays About 85k daily players More than 20k websites embedded the game 13.84 TB of data has been served by our website for the last month, thanks CloudFlare for this We use CPMStar for ads yet, it serves about 300k requests each day at the moment, but average eCPM is 0.21$ for now Asana has raised the website from 4mln to 455k position

I like how that is a thing. How the only reason we know that is due to the transparency of Rich and due to that, kiwi has its place in the journey as a pioneer

This is a (sort of) port of the Three.js vehicle demo using Cannon.js, in case someone is looking for vehicle physics or just want to play with it. I made some weird choices like sperating the renderLoop and the postStep, and some quesswork here and there. And some options are left out, but can easily be added by looking at the Cannon.js docs or logging the vehicle object itself. This includes ConnectionPoints, which wheels steer, back or front wheels etc. Just play with the options, and press the "Run with Options" in the bottom of the Dat.GUI. http://www.babylonjs-playground.com/#1PX171#9 WASD to drive around. Space to brake.

Hello, I host my games on Heroku (my webserver is based on Nodejs). It's free until you want to upgrade your configuration, but free version works very well. It provides an HTTPS adress which is required by Facebook. Here's one of my games hosted on Heroku : https://dodjzem.herokuapp.com/ For just deliver static files, it's more than necessary. I only use free hosting and the server holds 800 connections per day. I don't know your ambition but I think that it's great to begin a new project and see what append. It's a little bit tricky to use Heroku's system at first but fill free to ask if you need.