Leaderboard

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.

Extra info, what does mipmapping do: it scales down 2 times, then again 2 times, and obtains several "mip-levels" . then it samples the texture from levels depending on scale. Scale is determined through comparing "What coordinates of texture were asked in neighbour pixel shader". If we upload FAKE mipmap levels, we can see result like this: https://github.com/Busyrev/mipExploration , here we have curved space and its scaled in the center => mipmap is automatically switched there to next level (red), then next one (green) and so on. Manually scaling the texture and choosing sprite texture based on downscale also works! You have to use whatever you udnerstand and whatever is better for your case. Yes, it might be strange if you come from Web that now , in WebGL, you have to manage many other parameters: texture filtering, antialias, blendmodes, premultiplied alpha, gamma sRGB. Usually its managed automatically by browser, but that automatic managing can affect performance, and in WebGL world its significant, its all about performance. I'll have a talk in russian conference HolyJS about those things, I hope to translate it afterwards and use in other places too. I know that many people are smart enough to make their algorithms fast, but that kind of problems stop them just because they dont know specifics of WebGL switches and how big control they actually have, what responsobilities it raises.

What's the size of image and what's the size of PNG? if PNG is power-of-two. then you can enable "baseTexture.mipmap=PIXI.MIPMAP_MODES.POW2" before it first renders then in case of big downscale (>2) it'll look better, it'll use those MIPMAP constants in webgl. If its not pow2 (512, 1024, 2048, e.t.c.) there are two ways: 1. make it pow2 - either scale either add more pixels at right-bottom, you can adjust "texture.frame" afterwards. 2. enable mipmap for webgl2 for any sizes: "baseTexture.mipmap = PIXI.MIPMAP_MODES.ON". It works only on webgl2 devices. In general, if you try big downscale in any WebGL renderer you'll have that problem. ThreeJS does resizing automatically. SUMMARY: its one of those things you have to know when you move your app to WebGL. There are others like that, for example: anti-aliasing, blending modes. DEMO: Try it here, comment the respective lines, switch to different modes: https://www.pixiplayground.com/#/edit/qWXxeV7e1KOyWayy6DLu5 . I know that even Google Skia webasm port has problems when you try to downscale "Google.png"

I don't know any link that explains this directly. But web workers are not part of javascript. Web workers are a browser feature that you can interact via javascript. This means that when you want to process your code in the background, you tell your browser using a javascript api to do your work and pass back the result in the end. This background process works the same way as any background thread your browser executes. If you execute 100 web workers, the browser will use its web worker pool to execute your workers, the pool may have 10, 20, ?? threads, but probably not 100.

i was made this demo, maybe it will be more revelen with class https://www.pixiplayground.com/#/edit/WqMGLC7M3Fre3boCU1c1b

https://spector.babylonjs.com/

Hmm, moving server broke this feature, but I've enabled it again (along with SSL, which also broke for some reason). So now, you can upload things again.

Hello, I want to set the absolute position of a graphic to 0, if goes out of bounds. However, after a few hours I was not able to do this. This is my code: import * as PIXI from 'pixi.js' const app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, antialias: true, view: document.querySelector('#canvas'), }) const container = new PIXI.Container() app.stage.addChild(container) let graphics = new PIXI.Graphics() for (let i = 0; i <= 0; i++) { graphics.beginFill(0xFFFFFF) graphics.drawCircle( Math.random() * app.renderer.width, Math.random() * app.renderer.height, 10, ) graphics.endFill() } container.addChild(graphics) app.ticker.add((delta) => { container.children.forEach((circle) => { circle.x += 10 * delta if (circle.x >= app.renderer.width) { circle.x = 0 } }) })

I can't seem to find it, but thought it did a good job of showcasing Pixi's capabilities and speed and wished to show it to someone. It had those bunny sprites used in the documentation but you could just keep dumping more in and they'd bounce around the container and it was lag free. I know it's not a typical question but spend 30 mins looking for it so thought maybe one of you guys had it bookmarked.

Hi guys, Hope you're all well. I posted my last game here a year or so back Arcade Builder - I've been working on the engine on and off ever since and I'm really trying to nail every bug. I feel closer now to a solid game now but I don't have many friends and family with iPads/Androids/Macs to test on so some feedback on those devices would also be greatly appreciated! Could you please help me and check it out and cause any issues you can? If you're feeling daring try the "Hell pit" level and tell me how badly or how well it runs. https://ajamdonut.github.io/ABV2/allbuilds/v.2.2.7/ The major changes since the last version are: Changed tile system to pixi-tilemap Changed viewport to pixi-viewport Added tablet controls Added fixes for Safari Re-coded AI Added browser compatibility checks All feedback and suggestions really appreciated. Even if its bad news Thanks, Jammy.

Its good that you went to the source, you already know that all those things are done through readPixels. This operation is synchronous, it waits for data from GPU. Try not to call it more than once per frame. webgl readPixels is wrapped by in WebGLExtract class, instance exists in "renderer.extract", find it in docs. I recommend to do "renderer.extract.pixels(x,y,1,1)" just after rendering is done in your gameloop. Gameloop explanation is here: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop Basically you need a handler with even lower priority than "render". If you call it in mouse event - there's no guarantee that you'll get that info. Another approach is to render your scene in renderTexture, then you can call extract any time. However, dont just use "extract.pixels(myContainer)" because that will try to render whole container no matter how big its bounds are. You can look inside that code, its actually using "renderer.generateTexture()" - if you copy it you can supply your region in that method. Extract plugin has no magic, except flipY and post-divide, you can do all those things manually if it turns out pixi implementation is not good for your task. If you want to make pixel-perfect interaction, it can be done without extract/readPixels, see https://github.com/pixijs/pixi.js/wiki/v5-Hacks#pixel-perfect-interaction , maybe parts of that code can help you too. Welcome to the forums!

I don't think many people seriously build commercial games projects from the ground up with their own rendering engine. It would take just as long making the rendering engine as it would to make the game? Since your question is around commercial titles, I've never worked for anybody who said "let's do everything the hard way from scratch." it's more like "let's leverage what we can and not re-invent the wheel". Personally I've never made much money from a HTML5 game, but have made money from other games written from scratch (e.g. www.world-mafia.com ), but we're not talking huge successes.

Hey Uronstone, We are always testing new ways to improve the user experience in the games we distribute on Game Distribution. This week, we decided to run some tests and test games without outgoing links in order to increase: Gameplay time, game performance, ad impressions/gameplay on the games. In short, this was done having both our publishers, developers and players in mind. Outgoing links take players out of the games and it can be bad for the user experience. We are starting to partner up with some big publishers that are asking for games only without outgoing links. This was done to make sure your games are picked up by those publishers too. That being said, I must agree that our method was not the best and we should have communicated that better. Because of that reason, we are doing an internal test and currently still allowing games with outgoing links. In the future, we will create a better and more strict set of rules in order to improve on all ends. Any doubts, just shoot me a DM. Cheers,

I have a program where images are shown in normal HTML <img> tags as well as inside of PIXI canvases. If I have a large image, I notice it has very crisp edges even when shown at ~1% of its size. The pixi.js canvas is using pixi-viewport (https://www.npmjs.com/package/pixi-viewport) so I can zoom in and out, and I noticed that if I zoom out so that the image is the same size as the HTML one, the edges look blurry. I've tried changing the SCALE_MODE and resolution, tried forcing the canvas renderer or forcing FXAA, and even the image-rendering css property, but I can't seem to make it look like the image inside the <img> tag. This is what I'm seeing: To be clear, the one on the left is inside the <img> and the one on the right is inside a pixi.js canvas. Despite them being about the same size, you'll notice its less clear. If I change the SCALE_MODE it just looks pixelated. If I change the resolution (I've tried 1, 2, 4, and 10) I have to zoom in more, but once I have its just as blurry. Forcing the canvas renderer just made it look worse, and FXAA didn't seem to change anything. The image-rendering property seemed to have no effect except on the pixelate setting (which, obviously, just made it look pixelated). Edit: For reference I'm using pixi.js-4.5.3 and pixi-viewport-3.23.1

Hey everyone, I just opened a new page of stone pixel art-style tiles. You’ll find them here: ART – Stone https://soundimage.org/art-stone/ Feel free to edit as needed. I’ve also created a bunch of new ground tiles. They live here: ART – Ground https://soundimage.org/art-ground/ As always, if you have any requests, feel free to pm or email me. I hope some of my work is helpful!

@128p yes opt-in for iOS seems like a reasonable option, especially initially. I'd imagine from FB's perspective they'd prefer to present their blue app as a consistent platform / experience that transcends device? E.g. it'd be a bit odd if some features were available everywhere except when the user picks up their iPhone? Plus politics ... Apple sure like their rake, so given the lack of opt-out this is an unsurprising (if frustrating) requirement. Questions to consider are ... how are you imagining monetizing your game, and how does FB help you do that in ways that can't be achieved by going to individual platforms directly? The $100 gift to Apple probably shouldn't be the barrier.

The difference is in number of vertices. We use either Sprite BatchRenderer if its small or "Graphics.renderDefault" for big number. That code will use "renderDefault" for all graphics, and you'll have that error always! PIXI.GraphicsGeometry.BATCHABLE_SIZE = 1; Make that number big enough - all your shapes will fit in batcher instead and it'll be ok. That narrows the code segment but i dont have iOS devices to test. Gonna call rest of the team on this. I think its possible critical issue, need to reproduce and fix it ASAP.

you should switch from just "keydown" to setting FLAG to true on keydown and setting it to false when its up. In update, if flag is true - move the tank. When I press "W" tank moves a bit, then autorepeat starts, like in old NES tetris. Im not a hyper-tapper

TS works fine: https://codesandbox.io/s/hexagon-stars-l4mms?fontsize=14

Yes, your demo works for me now

Here, I added my png, its not base64. However, now that playground doesnt serve me that file. At all. There's nothing in "images/ship.png" it tried to load. I dont have anymore time to "play" with that playground, i use others. https://next.plnkr.co/edit/TMhxNzFY0h2vBRDg

I guess the only other way I can think... If the gradient was put onto offscreen canvas and you had an algorithm go along each edge removing pixel in a dither pattern with transparent pixel to create the dither.... Again though.. not sure on impact to performance.

At first I had no idea what you were talking about, but then I got it. Many thanks! Those composition modes are awesome! I was able to do what I want with "Destination Out". And I only had to change that one blendmode, I did not need another layer. See this adjusted example, even with transparency: https://www.pixiplayground.com/#/edit/AfvfRhY8lvtySHEADjodc Performancewise: Is this appreach very demanding or a good way to go? I probably will have about 6-7 sprites with the blurred texture moving around as "mask". Thank you! Robert

Upgrading to the latest version fixed it for me. Thank you for your help.

Hi all. New to PixiJS, I'm working on a divination card game. I just want to add a basic animation on card mouseover/mouseout: just change the z position +/-10. In my code mouseover works, but mouseout don't: card.interactive = true; card.on('mouseover', onMouseOver); card.on('mouseout', onMouseOut); function onMouseOver(event) { event.target.position3d.y += 10; } function onMouseOut(event) { console.log(event.target); // Fire null event.target.position3d.y -= 10; } I also tried mouseleave: same result. Any idea?

Thank you! Now imagine that it was a pixi-3 giant fork back then (https://github.com/gameofbombs/pixi.js), i rewrote everything inside, and after a few years i managed to make that thing into a small plugin instead, both pixi-layers and pixi-projection were born from it. Stitching together 2d and 3d features into 2.5d that people can understand was hard. 3d API can easily make everything much more difficult than it should be, there are tons of parameters. Its not just "oh look i can do this example in webgl in 2000 lines", its how to put it into boxes for people to use and not make them too big. Especially if they are not full-time game makers, we cant ask people do dedicate all the time to learning 3d stuff. We have to explain it in general and give access to details if something goes wrong. Speaking about 2d-3d partition - AwayJS have very good API for that. The better quality code we have in pixi core - the more interesting plugins will appear. pixi-projection testing was done by @jonforum and he found many interesting cases i didnt even think about!

Hello, forum! I am currently struggling to rework my photography website after having purchased a template several months ago. I did not get the time to do much but now I am little free. In a nutshell, I have 5 Bootstrap-like carousel divs on the first page, representing different types of photography. Of course, each of them has a background image. I would post the website but I do not want to risk "promoting" myself, so I will post (hopefully I get permission by the moderator) the original template: https://theme.madsparrow.me/emilynolan/ . I am not associated with their website. As you can see, the user can scroll through some divs, with its own images. I have managed to use Pixi.js to apply a DepthMap to one of the divs, but I have no idea how I can do for 4 other divs which are supposed to translate into view when the user scrolls, presses RIGHT key or presses next. The code is: <script> let type = "WebGL" if(!PIXI.utils.isWebGLSupported()){ type = "canvas" } PIXI.utils.sayHello(type); let app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight}); document.body.appendChild(app.view); let img = new PIXI.Sprite.from("assets/images/albums/portraits/fatacucatel.jpg"); img.width = window.innerWidth; img.height = window.innerHeight; app.stage.addChild(img); depthMap = new PIXI.Sprite.from("assets/images/albums/portraits/fatacucatel-map.jpg"); app.stage.addChild(depthMap); displacementFilter = new PIXI.filters.DisplacementFilter(depthMap); app.stage.filters = [displacementFilter]; app.renderer.view.style.position = "absolute"; app.renderer.view.style.display = "block"; app.renderer.autoResize = true; app.renderer.resize(window.innerWidth, window.innerHeight); window.onmousemove = function(e) { displacementFilter.scale.x = (window.innerWidth / 2 - e.clientX) / 40; displacementFilter.scale.x = (window.innerHeight / 2 - e.clientY) / 10; }; </script> --> Needless to say, it is not perfect and has lots of issues, for example the window does NOT autoresize at all and also the animation is horrible, not smooth at all. But at least I would like to be able to append several images to multiple divs. Is this possible in any way, please? I did not work much with JS in my life and I am new to Pixi.

I am using pixi version 4.8.5 and I am trying to access the coordinates of a Sprite when I click on it through its event like this: e.data.global.x e.data.global.y I have also tried like this: e.data.originalEvent.layerX e.data.originalEvent.layerY I want these coordinates to show just above that sprite in the browser an element that I have hidden in my html, but the coordinates that it is giving me from the event do not appear at the same point where I click. Does Pixi have any better way to indicate the coordinates of the browser's DOM and not the container where the sprite is? I think that is my problem. I have also tried: mySprite.getGlobalPosition() In order to obtain the coordinates but he does not give them to me precisely for the DOM. Thanks

When a user resizes the window, the render area can become bigger or smaller. This potentially has a visual effect in that if the window started off small and then was increased, the textures could look bad if the render area is simply scaled to fit the canvas bounds. Going from larger to smaller is less of an issue, though one could make the argument that it's doing more work than is needed. How are most people handling this? For example, if you get a resize event and the canvas say doubles in size, do you simple increase the canvas size but leave the renderer area the same? Or do both? If it is the latter then this would possible require newer textures. For my setup, I have a defined game area which is currently defined as 480x640. I then support different multiples of this. The plan is to do layout at 480x640 right now (though I may use a higher res multiple later). When the game starts, it will best match which multiple fits the canvas and it will use that. I'm trying to determine if I should just choose the size of everything at start only and if the user changes the window size, they are stuck with that or if I should add support to find the best matching supported dimensions and then use that. If I decide to support better fitting which multiple works, it also implies I would need to have a method to change textures on the fly. I would imagine something like this would use a multi-pass system where I destroy/dispose of the active textures, load the newer ones, and then apply those new textures to the existing PIXI.Sprites. Obviously any other draw element would need to be updated as well. This seems like a lot of work, so seeing what people's experience is regarding this and if it's worth the effort.

For a website built in wix.com, thats some serious click bait you give!

from you event scope just use this.toLocal(e.data.global); // or mySprite.toLocal(e.data.global) Suppose this is the scope of your sprite to your event, example of use case for anime element from your mouse to a sprite as children. pointerup(e) { const from = this.toLocal(e.data.global); this.addChild(elementFromMouseToThisSprite); TweenLite.fromTo(elementFromMouseToThisSprite, 0.3 ,{x:from.x, y:from.y}, { x:0, y:0}); };

Welcome to the forums! Чатики по html5 gamedev: https://t.me/gamedevforweb , https://t.me/web_gl

Hello there! Newbie here PIXI.autoDetectRenderer(x,y,{transparent:false}) Is it possible to change transparent to true at some point, long after set as false at autoDetectRenderer?

> Do you have a rough idea when it's going to happen? I'm on a waitlist for it since the initial release of v5 😁 One or two months. It will come with webgl1 fallback too, since we discovered that new way i mentioned

@Wandrinceen hope you like it Hey guys, new one right here: 800+ Tiles and fully animated! https://s4m-ur4i.itch.io/roguenoir-cyberpunk-assetpack-pixelart

RELIC RUNWAY Are you ready for crazy adventures? Run as far as you can, collect coins, upgrade useful bonuses, pick up parts of ancient relics, unlock amazing characters, and compete with your friends to be the best relic runner! LINK: https://gemioli.com/relicrunway/ MAIN FEATURES: Beautiful and dangerous Inka Ruins 10 brave heroes to unlock A lot of ancient relics to discover on your way Play with your Facebook friends And it's free for embedding on your website <iframe src="https://gemioli.com/relicrunway/" name="Relic Runway" width="640" height="480" frameborder="0" scrolling="no" allowfullscreen="true"></iframe> Please contact us at contact@gemioli.com if you have any questions, suggestions, etc.

In the first scenario - If I create the renderer like this const screenWidth = window.innerWidth; const screenHeight = window.innerHeight; const canvas = document.getElementById('canvas'); const renderer = PIXI.autoDetectRenderer({ forceCanvas: true, width: screenWidth, height: screenHeight, antialias: false, roundPixels: true, resolution: 2, view: canvas, }); renderer.view.width = screenWidth; renderer.view.height = screenHeight; renderer.view.style.width = screenWidth + 'px'; renderer.view.style.height = screenHeight + 'px'; renderer.view.style.display = 'block'; renderer.view.style.position = 'absolute'; renderer.view.style.top = '0'; renderer.view.style.left = '0'; renderer.view.style.zIndex = '-1'; renderer.backgroundColor = 0x000000; then I do const playerSpine = new PIXI.spine.Spine(r.player.spineData); playerSpine.skeleton.setSkinByName('base'); playerSpine.x = window.innerWidth / 4; playerSpine.y = window.innerHeight / 4; The player is in the middle of the webpage like I'd expect. But with the same exact code - if I create the renderer with the option - forceCanvas: false, I no longer see the player in the middle of the screen. I can't seem to figure out how webgl is positioning it. It seems like the webgl and canvas act differently when setting the resolution. No errors or anything. Anyone have an idea as to why this is happening? edit: here's the most simple code snippet to reproduce the problems https://github.com/visgotti/pixi-res-problem/

If I understand correctly, you're just struggling with how PIXI works, conceptually? So, when you do stuff yourself at a lower level (canvas, maybe), you have to specifically call "draw this here" for everything you want to appear on screen. Consider that PIXI does this for you, this is why you're here, right? PIXI is a rendering library, and it renders what you tell it to, based on how you assemble your scene. And how one assembles their scene is quite personal -- there are several ways to approach it. Conceptually, you are loading stuff in advance, instancing it where it needs to be, and then telling it to be in the render pipeline or not. You probably shouldn't be calling render directly on any given Sprite, unless you have a specific reason to be. Don't quote me, but doing so would probably circumvent PIXI's vertex batching and other internal optimizations. Containers are a big part of how PIXI works, and at the same time, they help you organize your scene logically (draw this "sprite layer" before this one, etc). Not just that you could, but you should. It's two birds with one stone. You need to tell PIXI what to render, so thus, you only add stuff it needs to. It doesn't really increase memory usage, certainly not to the degree that loading new graphics would. It's fairly trivial stuff. If you want that simplicity just to get things going then sure, just add everything to PIXI.Application.stage via the appendChild method. If this is a learning project for you to figure out how to make a tile editor work, then you can't really get around this stuff. This is the whole point. Otherwise, why not just use Tiled or some other map maker and a full fledged game engine to do all the thinking for you (phaser, impactjs, etc) ? Now, if you're hung up on how PIXI works and want it to be a little more familiar to something like using plain canvas, then you should avoid PIXI.Application and roll your own mainloop. In this case, you spawn a new PIXI.Renderer, make a PIXI.Container (a scene to draw), call a bunch of new PIXI.Sprites based on textures you've loaded, and myScene.appendChild(sprite). Then call RAF on your animate function and go to town. Here's an example of that, if that's what you're after: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop Otherwise, based on examples, the out of box behavior of PIXI is to use PIXI.Application which has its own render loop and you bind your own update function to it's update ticker. If that's confusing you, build it up yourself with the above link. But keep in mind, pixi is a batch renderer for the most part. You put stuff in a container, and then it appears on screen. You wouldn't need to step over a tilemap in that traditional way to call draw on each sprite. You'd instance them into memory and set their position, and then later (as they need to be seen) add them to a container that is being rendered. Am I missing your issue...?

Haha. It's hard in text to see humor, especially across speakers of different languages. I am often seen as rude in text, but I'm usually just thinking outloud and wondering, not trying to bother anyone, but somehow doing just that. I'm quick to apologize for that reason =D Thanks again

Fair question. I'm not actually sure of the philosophical truth about 2D representations of rotations >2Pi? But from a pragmattic gamedev perspective I often want to know full rotations. Or rather I like to know whether a rotated value has rotated "more" than a previous one. In other words, I expect that when incrementing a value the result goes up (rather than potentially going down). And vice-versa for decrements. Fortunately modulo to 2Pi for resolving back to the expected range doesn't seem expensive these days? That being said I avoid relying on the rendering-engine to "own" such model data (for non-rendering purposes) and prefer to use a little helper class to answer such comparisons. I also avoid Radians (and Degrees), but that's off topic. So ... maybe you're right and ranges beyond 2Pi have no value (to me) in a rendering library?

53.53 Don't think I can go much faster. Excellent game!

I'm currently scoping a high-retention idle / incremental game-engine for some client work, and imo the above list doesn't scratch the surface of a game like "Adventure Capitalist". Pixi and UI design aside there are multiple core game systems to consider, and only a few are genuinely trivial. Perhaps these are the "enhancements" you wish to personally expand later, but you may do better to include more in the initial design and foundation? Also consider the requirement to "test" the game economy without exhaustively playing ... i.e. lots of statistical analysis on where the overlaps of upgrades, ranks and yields occur (much of the game design for a successful idler will be from a spreadsheet).

For that kind of tasks you need everything: renderTextures, temporary atlases, maybe SDF. Pixi gives a few primitives, you can work with them to implement your own algo.

@AntoniaChimp Its not cleaned up yet, but here we go: https://github.com/eXponenta/pixi5-playables-boilerplate

its not an edge case, sometimes just one resource can fail, depends on what server or service do you use. If its a problem for your users, make a fallback, for example you can start downloading everything again

In Phaser 3 is it possible to create a group and add multiple sprites at random positions? I've tried looking at the documentation here and the example here but couldn't figure out how to do it. This is my code so far, it does add one coin at a random position each time I run it, butit only seems to add one single coin. // add random coins var coins = this.add.group(); coins.createMultiple( { key: 'sprites', frame: 'coin1', setXY: { x: Phaser.Math.RND.between(0, 800), y: Phaser.Math.RND.between(0, 600) }, frameQuantity: 2, repeat: 5 }); Coming from Phaser v2, I've just started working with Phaser 3 and it takes some time to get to understand the differences.

I wasn't aware Easystar.js is abandoned, where did you hear this? Easystar is usually my go to for simple grid based path finding and I am using it in a few of my games without a hitch. As an alternative have you considered using a navmesh? I would recommend this approach for a boost in performance. Here is a really great navmesh lib that has a wrapper for Phaser 2 and 3: https://github.com/mikewesthad/navmesh The author has also made a great guide for getting it up and running.

Thanks that worked! If it helps anyone, this is how you can then retrieve the loaded object: // in preload() this.load.json('levelData', 'assets/level.json'); // in create() let data = this.cache.json.get('levelData');

I've managed to fix the issue. The problem is I was misunderstanding the way a high DPI screen work on a mobile device. For people like me who have this problem, here's the solution: In short terms, a high dpi screen (like the Galaxy S6 I was testing) means that there will be more pixels crammed into 1 inch of the screen than another normal screen. This means that if the canvas is set to be the same size as the window.innerWidth/Height then it will be smaller than is should be because it won't be taking the dpi of the screen into account. Canvas can have two width and two height. One is from the attribute (width="9999px") and the other is from the CSS. On my side what I had to do is to set the Canvas width and height attributes to the size of the screen multiplied by the devicePixelRatio. Then I had to set the CSS width and height to the size of the screen. This would set the canvas as a giant canvas and scale it down to the size of the window. The last thing I had to do is to take that scaling difference and scale every sprite in my canvas by this number (in the case of my Galaxy S6 it was 4). Now everythings looks very good on the device. Here are some links with very good intel on this situation that explains a bit better what I'm trying to say: https://www.html5rocks.com/en/tutorials/canvas/hidpi/ https://stackoverflow.com/questions/14488849/higher-dpi-graphics-with-html5-canvas

Yep, this work correctly. I add this onDestroy event to getRoundedImage() like this var PhaserUtils = { /** * Create sprite with rounded corners * * @param {Phaser.GameObjectCreator} game * @param {Number} x * @param {Number} y * @param {String} src * @param {Number} radius * @return {Phaser.Sprite} */ getRoundedImage: function(game, x, y, src, radius){ var sprite = game.make.sprite(0, 0, src); var bitmap = game.make.bitmapData(sprite.width, sprite.height); var mask = game.make.graphics(0, 0); bitmap.smoothed = false; mask.beginFill(0xffffff); mask.drawRoundedRect(0, 0, sprite.width, sprite.height, radius); mask.endFill(); var maskSprite = game.make.sprite(0, 0, mask.generateTexture()); bitmap.alphaMask(sprite, maskSprite); var res = game.make.sprite(x, y, bitmap); mask.destroy(true); maskSprite.destroy(true); sprite.destroy(true); // On destroy this sprite destroy also a bitmap res.events.onDestroy.add(function(){ bitmap.destroy(); }); return res; }, }; I also see that i can destroy my bitmap with 3. param of Group.removeAll() method https://phaser.io/docs/2.6.1/Phaser.Group.html#removeAll but i think this is worse way to do this. To suck is`t that not all methods removed children from group can`t dispatch children onDestroy event, i think it can be despatched always by default. EDIT: Okey, I guess I understood - remove and destroy is totally different process Thx for help!