• Content Count

  • Joined

  • Last visited

About mcofko

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Solution to the problem was found, yeah I've remembered from somewhere that someone mentioned, to be able to improve performance, if you have an active sound playing in loop all the time, with no content. So like playing a silenced track in loop. In my case the silence track did not work, and I don't have a clue why. So I took some other sound track, set its volume to minimal (0.001), and played it in loop. And it worked, I don't get any frame drops anymore. But I still do not know what is the main reason for this. I also do not know why it also does not work if I'm playing empty track on 100% volume. But at least I now know in which direction I need to go.
  2. only thing that I can suggest you, is to connect your phone with PC, and check in dev tools -> elements tab what could that black image be. Maybe its inserted as a dom element after your canvas node.
  3. After a few hours of investigation, I found out that its not fault in State or Button class, but the actual frame drop happens once a sound effect is started and stopped. My game always looses some FPS at those events. The game is using WebAudio and I'm playing sounds through mp3 audioSprite. Are there any possible solutions? And my code for playing the sound effect is pretty bacis: public static init(game: Phaser.Game) { = game; let methodName: string = 'Audiosprites' + Config.getGameNameFull(); this.audioSprite =[methodName].getName()); this.getMusicMarkers(); } public static playSfx(marker: string): Phaser.Sound { let snd: Phaser.Sound = this.clickSnd; if (this.clickSnd === null) { snd = this.clickSnd = this.audioSprite.get(marker); } if (snd) {, 0, volume); return snd; } return null; }
  4. I was mistaken regarding State switching. The actual fault for frame drop is clicking on buttons. Whenever I click on one of them, they cause two frame drops. Now I'll try to figure out why is this happening.
  5. Hi, I've noticed that switching between states or entering next state causes frame drop in my game. First off all I need to say that I'm using Phaser.State in a little bit different way. I've split my game in multiple sections, like: IdleState, MovingState, AnimatingState, BonusGameState, etc....I was testing the game on my desktop PC, disabled practically all my code and also hidden all display objects. The only thing left in my game was testing the state switching, which resulted to be the main issue for the frame drop. It happens only twice, once you enter a new state. First frame drop (from 60FPS -> 20FPS) happens almost at the entering phase, and the 2nd happens always around 2.3s later. And this is super annoying especially because you can notice flicker in Moving & Animating state, even though we're talking here only about two occasions of frame drop per state. I would like to know what could be the most expensive method/command inside StateManager -> clearCurrentState() and StateManager -> setCurrentState(key) ? I wouldn't like to break everything apart now, just because of this. Is there a way to optimize anything here?
  6. Solution to my problem was to create an alias in webpack.config.js file: resolve: { alias: { particlestorm: path.join(root, 'lib/phaser-gogame-shared/src/plugin/particle-storm.js') } } And then I fixed my import statement to: import 'particlestorm' and that's it.
  7. Hi guys, I'm trying to add Phaser particle system plugin to my starter project. I've bought the ParticleStorm yesterday and thought it would be practically self explanatory to add it to the project. But it was not that way I really hope you have any idea or could give me any tips, how can I come closer to the solution. It seems that I really lack knowledge about Webpack + Npm/node modules Let's start at the beginning. I bought the system, and got a package which seems like a module, so I've copied the complete project folder inside my node_modules folder. I've tried to manually install the package npm install -g phaser-particle-storm or npm install -g ./phaser-particle-storm, but I get "Could not install from "phaser-particle-storm" as it does not contain a package.json file. (ERR ENOLOCAL)". I moved further, thinking maybe I do not need to install it, so I've added path to particlestorm.d.ts into tsconfig.json. And then I've tried to add the module to Phaser.Game.PluginsManager like this: this.manager =;. And because phaser.d.ts has this line of the code at the beginning of the file declare module "phaser-ce" { export = Phaser; }, I think that it wants to look after the ParticleStorm inside phaser-ce.js or even phaser-split.js (do you know maybe whats with that split variant? ). My next try was then to add something similar to the particlestorm.d.ts, like declare module "phaser-particle-storm" { export = Phaser.ParticleStorm; }, and then in my class I have an import statement import * as PStorm from 'phaser-particle-storm';, but then I get a complain, that it can not find the module. Adding particlesstorm.js and particlestorm.d.ts scripts inside my project did not result in any success. I would like that the plugin would be part of the project like Phaser game engine is. I have no clue in which direction do I need to go from here. Obviously I'm missing something.
  8. I figured out the solution. If anyone will need to change the rendering type during game run, you need to do the following (WebGL --> Canvas2D): anywhere in the game add and call this: = Phaser.CANVAS;; Afterwards I've overridden the setUpRenderer() method, and did following modifications at the end of the method: if (this.renderType !== Phaser.HEADLESS) { this.stage.smoothed = this.antialias; // remove old Canvas element from DOM let canvas = document.getElementsByTagName('canvas')[0]; if (canvas) { canvas.parentNode.removeChild(canvas); } // add new Canvas element to DOM Phaser.Canvas.addToDOM(this.canvas, this.parent, false); Phaser.DOM.getOffset(this.canvas, this.offset); // re-enable input events, so they're listening to new Canvas this.input.boot(this.config); // assures that the new Canvas is at the correct position and in correct size let bounds = this.scale.getParentBounds(this.scale._parentBounds);, this.scale, bounds); this.scale.updateLayout(); this.scale.signalSizeChange(); } After a few tests, everything works as it should. This should now enable me switching between renderer types.
  9. Hi guys, I'll reuse this topic for posting my question regarding the never ending battle between Canvas2d & WebGL rendering. Let me first describe my situation, i'm building a simple match3 genre game for desktop and mobile devices. I was trying the game on my desktop PC and on my Nexus 5X phone, and the game is working flawlessly on 60 FPS on average with WebGL rendering. Next day I was coding the game on my laptop, and when I tried it out, the movement was not smooth. I've checked the FPS count and saw that the game is running just on 40FPS on average with WebGL, even if in Idle mode (nothing moving on the screen). I'm rendering the game in 1920x1080 resolution, and having around 12 Draw Calls, antialias and transparency enabled. I was wondering what the heck is going on here, and after reading a few articles, I've tried to change the rendering context from WebGL to Canvas2D and sudenlly the game is back on 60FPS. Investigating browsers Graphics Feature Status (chrome://gpu) showed that Canvas, WebGL, and WebGL2 are Hardware Accelerated. Because I was using Phaser.AUTO configuration and WebGL is supported and enabled, the system picked WebGL renderer even though Canvas2D is performing better. After a while I even figure out (better wording would be I've remembered ) , that my laptop has two graphic cards, one integrated (Intel something) and external NVIDIA GeForce GTX 950M). And I figured out that Chrome is using integrated card for rendering. I've changed that to GeForce to be default graphics processor, and sudenlly the game is working on 60FPS with Canvas2D and WebGL renderer. Quite surprising. I've came to conclusion that the performance is appearently heavely dependent on GPU card/chip. My question is, is it possible to change the renderer type during game run. So in cases when both renderers are supported, I would run the game with WebGL, and as soon as I get information about FPS and see that it's running under 50 FPS for example, I would switch to Canvas2D, check FPS one more time, and then pick the better renderer. Would that be possible? Obviously I did not yet try out that, but I'll dig into it over the next few days. I would really appreciate any kind of tips you could give me here, what would be the fastest approach and least stressfull for the player (so that the game still runs smooth during the switch) to do it.
  10. was hoping the topic would get more traction.... It seems I will need to dig in into different tutorials around web tools and its Memory and Performance profilers. Which browser gives you better options, Chrome or Firefox? Tnx samme for your feedback. Tnx for pointing out on forceSingleRender, that's quite an important flag. I'll update all Sprites to Images then, maybe I'll get a minimal boost. 2. CSS background - what about here? How much boost would I get here, if most of my target devices will use WebGL rendering (normal (high) - powerful devices)? 9. How expensive operations are actually BlendModes? Their main role is to go trough all image pixels, and apply the correct blend formula equation for each pixel, to get the correct output pixel color? 10. I've noticed a small frame drop each time I've played an animation for the first time (especially an animation using blending modes, or reflection effect done with alpha masking). Would it help if I would create and play an animation offscreen on game initialization? p.s.: samme could you explain how cropRect functionality is working when you applying it on an image living in texture atlas? When I'm moving cropRect position, why does it move the image also?
  11. Hi tproper, check this example here: It should be pretty straightforward. Replace the sprite (Atari) object with your graphics (line) object.
  12. Hi all, as already title points out, this will be once more a thread about different possible ways to optimize performance of Canvas rendering and JS code execution. I hope I will not get too long with everything. At the same time I hope this thread will help a lot of other dev enthusiasts to optimize their games as much as possible. In the end, we all love playing flawless gameplay I'm creating some sort of Match3 game for desktop and mobile devices, and I'm using Phaser CE (v2.11.0). This work week will be reserved for doing and trying out different optimization options, and I hope you can give me advice about which changes should bring me the biggest performance boost for my game. I will list a few options, which I think could be beneficial for improving the performance. What I'm trying to figure out, is how big of a performance boost will I get out with such a change, and what is the best way to measure performance changes, How to figure out if some change improved or worsened game behavior. For now I'm tracking FPS, DrawCalls, and from Chrome Task Manager Memory Footprint, GPU Memory and JS Memory. One think that I still need to look up and learn is how to make use of Performance and Memory tabs from DevTools - does anyone know for any good tutorial? So, let's start: 1. RENDERING SIZE Adapting the game size to the actual devices screen size is beneficial. You can right away notice change in reserved GPU Memory size. My system checks devices screen size, and then picks one of the four different supported resolutions -> 1080p, 720p, MID size, and LOW size resolution. It then also auto picks appropriate pre-scaled assets. Afterwards it's scales the whole game up or down to fit the entire screen (i'm keeping the AR). Methods for those are: ScaleManager.setUserScale(...) and ScaleManger.setGameSize(..) 2. USING CSS BACKGROUND IMAGE The game has one full screen fully opaque background image. It is pretty straightforward placing and positioning the BG image with help of CSS as its own DOM element placed behind the canvas. One of the things you should not forget though is setting the canvas transparent property to true. All good and fine, until I saw funky behavior of my animations that were using Blending Modes. Suddenly there were some strange black borders visible ((you can check the provided short video)). So I'm left with: a) use CSS bg image (using transparent Canvas bg), and not be able to use effects done with help of Blend Modes b) bg image is still drawn with Canvas and I can still use Blend Modes How could I now check or measure the performance difference using one or other approach (bg image with CSS, or rendered with Canvas)? 3. INTEGERS VS FLOATING-POINT COORDINATES I've noticed that Phaser supports working with round pixels --> Phaser.Game.Renderer.renderSession.roundPixels. Enabling this option f**k-ed up my translations and scalings, because you were able to notice annoying flickering. I could do nothing else but disabling it. What I'm now doing is to manually Math.floor values wherever I don't see any issues afterwards. Once more, how big of an impact has this on the performance? Let's say that the game has like 60 sprites on the stage, half of them in constant movement. 4. FRAME RATE You are able to set through Phaser.Game.Time.desiredFPS property a frame rate for the whole game. As far as I'm aware of this can bring you some improvements to the game in a way that the renderer does not need to draw the whole game 60 times per second but only 30 times for example. It can be beneficial if you can notice some lagging, and probably can be used set to default 30 FPS for mobile devices if your game isn't heavy physics dependent? I would like to know something else regarding the desired FPS, is in Phaser a simple option for setting different frame rate per Phaser.Group? For example, I have my whole User Interface in one Phaser.Group, which does not need to be updated 60FPS, but would be perfectly enough to set it to 20FPS. 5. COMPRESSED TEXTURES FOR MOBILE DEVICES This is one of the more classical ones, which should every developer be aware of. Use compressed textures wherever possible if possible. Why if? Some compression formats can f**k up the quality of your images, depends on the number of details, gradients, transparency, etc...But it significantly reduces memory footprint, and improves performance. I'm already using and compressing Atlases , where there is a possibility to do it (read: minimal artifacts). 6. Phaser.Sprite vs Phaser.Image How do those two perform? If I do not need any physics on my objects, will I get any boost using only Phaser.Image type instead of Phaser.Sprite? The main difference between those two is that Sprite has additional 3 or 4 components on it? Again if I change all my objects from Sprite to Image, how to measure performance changes? 7. USING OFFSCREEN CANVAS First of all I just stumbled upon that option a few days ago. Guys at Mozilla are mentioning that it should improve the rendering performance. Sadly I don't know enough knowledge to explain why and how it improves rendering. And as far as I know it is supported only on Chrome and Firefox browsers. Would it be worth writing an extra system to do rendering with help of OffScreen canvas? Is anyone using it? What are your thoughts about it? 8. USING OBJECT POOL This is a classic game programming pattern system which I'm already using in my game, for all the moving object, which appear/disappear, and thus optimizing GC. 9. CROP RECT vs ALPHA MASK UPDATE I would like to know what performs better. I've created kind of a reflection effect (you can check the provided short video). part of the code using Alpha masking: let reflBMData: Phaser.BitmapData =, h); reflBMData.alphaMask(refl_glow, refl_mask); let reflectionImg: Phaser.Sprite = new Phaser.Sprite(, 0, 0, reflBMData); reflectionImg.blendMode = Phaser.blendModes.ADD; this.robinHood.addChild(reflectionImg); let tweenX ={ x: refl_glow.x + 1500 }, 1500, Phaser.Easing.Linear.None, true, 1000, -1, true); tweenX.onUpdateCallback(() => { this.reflBMData.alphaMask(refl_glow, refl_mask); }, this); vs part of the code using CropRect let cropRect: Phaser.Rectangle = new Phaser.Rectangle(0, 0, 0, target.height); reflImg.crop(cropRect, false); let tweenX: Phaser.Tween = new Phaser.Tween(cropRect, game, game.tweens).to( { width: Math.floor(w) }, duration, Phaser.Easing.Linear.None, autoStart, delay, 0, false); tweenX.onUpdateCallback((tween: Phaser.Tween, value: number, tweenData: Phaser.TweenData) => { reflImg.x = (cropRect.width - w) * 0.5; reflImg.updateCrop(); }, this); I would guess that using CropRect is better. I think this will be enough for now So my main questions are: what's the best way to measure performance changes, AND in what order would you sort above mentioned possible ways to improve the game, from most important/beneficial to less important. Also, if you think I've missed something that should go into the list, please let me know. Any kind of optimization options are more than welcomed. br, mcofko refl_effect.mp4 win_effect_blendMode_ADD_transparent.mp4
  13. I figured out that I'm able to disable the input only if I set the property inputEnabled to FALSE inside the callback method. So for example let button: Phaser.Button = new Phaser.Button(,, - 45,'key', null, this, 'frame1','frame2','frame3','frame4'); button.inputEnabled = false; button.onInputUp.add(this.onClick2); So in this case it will trigger the method onClick2 always. But then if I set inputEnabled=FALSE inside that method, then it actually disables the input. Is this normal behaviour?
  14. hi CraigH23, could you share your solution, cause I'm struggling with the same issue....
  15. Tried your link and it works flawlessly. I've noticed that key events work normal if I run the game from VS (with IIS Express), but it does not work if I start the game directly in Chrome with running simple web server (python). Super weird.