Search the Community

Hi all, I'm trying to implement pixi lights to my project, but I have some difficulties. In this example I have the following structure https://www.pixiplayground.com/#/edit/ymGy4TrFm3LswAEKsM8yB: Grass - no lights Blue background - lights Blocks container - some elements have lights, some does not have block1 - has lights, masked with sprite mask block2 - no lights block3 - has lights The issues I have: The lighted display objects appear semi-transparent The brown block (no light) is positioned above the blue background (lighted). However as you can see the blue background is visible over the brown block even though it is positioned underneath. The brown block (no light) is positioned below the overlapping pink block (lighted). The left half of the pink block is displayed differently compared to the right half. When it comes to masking lighted objects I should apply mask to each sprite separately, rather than the whole container What I want to achieve is: The blue background to be fully visible and with lights applied (currently is semi-transparent) There should be no blue background over the brown block, as the block is positioned over the background The pink block that overlaps the brown one should not have different visuals whether it overlaps the brown one or not (I guess this is related to the semi-transparency above) Apply a mask to a container rather than each sprite separately (I believe I've met a topic where this is was discussed and it is not possible currently, but wanted to doble check) I've tried to move the groups order in the stage but with no result. I'm not sure if all this is possible, but any help will be much appreciated. Thank you in advance.

Hi, i'm having a problem with the collisions in my game. I'm using tilemap layers the character can jump as long as it's not touching the ground, but the moment it touches the tiles that are set for check for collision, it just seems unable to move upwards. Can move sideways tho. Everything else is loaded and displayed just fine. BasicGame.Game = function (game) {}; BasicGame.Game.prototype = { create: function () { this.game.physics.startSystem(Phaser.Physics.ARCADE); this.setUpInput(); this.setUpMap(); this.setUpPlayer(); }, update: function () { this.processPlayerInput(); this.processCollisions(); }, /*==========================CREATE ASSOCIATED FUNCTIONS==========================*/ setUpInput: function() { // arrow keys this.cursors = this.input.keyboard.createCursorKeys(); }, setUpPlayer: function() { this.player = this.add.sprite(BasicGame.PLAYER_SPAWN_X, BasicGame.PLAYER_SPAWN_Y, 'player'); this.player.anchor.setTo(0.5, 0.5); this.game.physics.arcade.enable(this.player); this.camera.follow(this.player); this.player.speed = BasicGame.PLAYER_SPEED; this.player.jump_speed = BasicGame.PLAYER_JUMP_SPEED; this.player.body.collideWorldBounds = true; this.player.body.gravity.y = 1000; }, setUpMap: function() { this.map = this.game.add.tilemap('testLevel'); this.map.addTilesetImage('lvl_1_tiles', 'level1_tiles'); // collisionable layer this.collisionLayer = this.map.createLayer('collisionable'); this.map.setCollisionBetween(1, 2000, true, this.collisionLayer); this.collisionLayer.resizeWorld(); }, /*==========================UPDATE ASSOCIATED FUNCTIONS==========================*/ processCollisions: function() { this.game.physics.arcade.collide(this.player, this.collisionLayer); }, processPlayerInput: function() { // reset movement this.player.body.velocity.x = 0; ... // jumping <== it should jump but it doesnt!!! if (this.cursors.up.isDown) { this.player.body.velocity.y = -this.player.jump_speed; this.player.frame = 2; } } }; { "height":10, "infinite":false, "layers":[ { "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 17, 18, 0, 0, 9, 0, 14, 0, 0, 0, 0, 0, 0, 0, 16, 17, 17, 18, 0, 0, 0, 0, 0, 0, 14, 0, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 14, 0, 14, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2], "height":10, "name":"collisionable", "opacity":1, "type":"tilelayer", "visible":true, "width":20, "x":0, "y":0 }], "nextobjectid":1, "orientation":"orthogonal", "renderorder":"right-down", "templategroups":[], "tiledversion":"2017.10.31", "tileheight":32, "tilesets":[ { "columns":5, "firstgid":1, "image":"..\/tilesets\/lvl_1_tiles.png", "imageheight":256, "imagewidth":160, "margin":0, "name":"lvl_1_tiles", "spacing":0, "tilecount":40, "tileheight":32, "tilewidth":32 }], "tilewidth":32, "type":"map", "version":1, "width":20 }

Hi Been working on a top down car game for quite a while and creating my own render using 2d canvas. Looked at pixiJS and decided to update the render with that to get the benefit from webGL and perhaps other nice useful features that I don't know about yet. I create tiles in photoshop, draw the map in many layers in Tiled and then in my game I pre render all background layers and my foreground layers into 2 large canvases stored in memory which I then use to draw what the player sees based on my camera that is tracking the hero. Now that I'm switching to pixiJS I'm confused about a couple of things. I've been searching, and going through some great tutorials, explanations and documentation but still feel I want to ask for some help here. My current setup is that I do the same prerender as before and then add my background and foreground as sprites like this: this.layers[zLevel] = new pixiJS.Sprite(pixiJS.Texture.fromCanvas(this.offScreenCanvas[zLevel])); if (zLevel === 'background') { this.layers[zLevel].zOrder = 20; } else { this.layers[zLevel].zOrder = 10; } this.pixiApp.stage.addChild(this.layers[zLevel]); Question 1: Is this approach recommended (I know this consumes memory and if the map is too big I'll need to split into smaller chunks) ? I'm also confused about sprite vs texture. I could not get my background to show up unless I turned it into a sprite. Question 2: How do I control which layer is on top of the other? I tried in this example to place background above foreground but that didn't work. My cars should be positioned between background and foreground, how do I accomplish that? In my old version I draw my layers like this: this.ctx.drawImage( this.preRender.offScreenCanvas[zLevel], // image camera.x, // source x camera.y, // source y camera.width, // source width camera.height, // source height 0, // target x 0, // target y camera.width, // target width camera.height // target height ); Question 3: How should I approach the camera in pixi? It seems like I should just change x and y of my background sprites to accomplish the same effekt. Is that the right approach? Question 4: When looking at the examples in pixijs: http://pixijs.github.io/examples/#/basics/basic.js or kitty kat attack tutorial: https://github.com/kittykatattack/learningPixi#introduction I keep seeing thing things done different all the time. is one of them out of date? For example in kittykatattack they call renderer.render at the end of each example. /piranha

Hi guys i have a tilemap with 4 layers(ground, water, roads, others) and a sprite with my character. how i do would for my character can collide with everything inside on others(layer),every layer use a different sprite, example ground use ground.png, water water.png etc, i have this code ( i use https://github.com/lean/phaser-es6-webpack): /* globals __DEV__ */ import Phaser from 'phaser' import Mushroom from '../sprites/Mushroom' import Link from 'phaser-link' export default class extends Phaser.State { super() { } init () {} preload () { this.load.image('terrain', '../../assets/sprites/tileset_basic_terrain.png', 16, 16) this.load.image('this.others', '../../assets/sprites/tileset_other.png', 16, 16) this.load.image('water', '../../assets/sprites/tileset_water.png', 16, 16) this.load.tilemap('tilemap', '../../assets/map/overworld_01.json',null,Phaser.Tilemap.TILED_JSON) this.load.spritesheet('character', '../../assets/sprites/character.png', 16, 32, 1) } create () { this.map = this.game.add.tilemap('tilemap') this.map.addTilesetImage('tileset_basic_terrain', 'terrain', 16, 16) this.map.addTilesetImage('tileset_other', 'this.others', 16, 16) this.map.addTilesetImage('tileset_water', 'water', 16, 16) this.ground = this.map.createLayer('Ground') this.ground.resizeWorld() this.water = this.map.createLayer('Water') this.water.resizeWorld() this.others = this.map.createLayer('Others') this.others.resizeWorld() this.game.physics.arcade.enable(this.others) console.log(this.map.layers[3]) this.roads = this.map.createLayer('Roads') this.roads.resizeWorld() this.map.setCollisionBetween(0,1000, true, this.others) this.physics.startSystem( Phaser.Physics.ARCADE ) this.link = this.add.existing(new Link({ game: this.game, key: 'character', controls: true, })) this.game.camera.follow(this.link); } update() { this.game.physics.arcade.collide(this.link, this.others); } render () { if (__DEV__) { //this.debug.body(this.player,16, 32) } } } But sometime when i try test the collision between the player and layer others, this don't work correctly, collide in a blank block in somewhere place for example left and top place, but in bottom and right place the collide work correctly. for create my map i use tilemap editor 1.0.3 Images of example: there i can't move more to right: there i can't move more to bottom: there work correctly Sorry for my bad english. and thanks overworld_01.json

Hello. I've been trying to create some levels for my game and I found that the only way for it to work, given my tilesets, would be to create multilayered tilemaps. The problem is I don't know how to load them using Phaser functions and I've been unable to find any existing examples of this in action. Any help would be greatly appreciated. Best regards! Mariusz

Hello, I have an idea for a front-end of sorts. Think of it as Steams big picture mode. The problem I need to solve is to find different ways to achieve the scene I want. Here are the layers that create my scene: 2D layer for background, can have images and animated images, 2D particle effects etc... 3D video layer, so the video can be at different angles, have boarders etc... can also have other 3d objects if desired 3D layer to allow overlap from the layer above 2D foreground layer on top to show information Possibly another 3D layer, unsure, but I want the ability to do so if needed. Edit: The reason for the layers is because I want it customizable, so images can change per page and can have effects applied to them etc. on each of these layers they can have layered images using renderingGroupID. What I am doing right now is I have multiple camera's each rendering their own layer, when 2D I use Ortho, when 3D I use a normal camera. This also allows me to use RenderingGroupID to further layer items local to the camera they are on. This is a good start, but then I ran into WorldSpaceCanvas2D. Would something like this be possible with WorldSpaceCanvas2D, I can't seem to find a way to make it layer like this, as it doesn't seem like WorldSpaceCanvas2D has the ability to do RenderingGroupID locally or LayerMask (at least not that I could tell) I am not looking for examples or code, just ideas of what people would use to implement it. That way I can try out all of the ideas in my own time and experiment.

Hi guys, I've built one or two small, simple games with Phaser before but this is the first time I'm working with tilemaps. Hopefully someone can offer some advice. I'm working on a topdown game. I created a tilemap in Tiled with 3 layers. (floor, wall 1 and wall 2 ). The problem is I can get collisions to work on a single layer if I combine the wall layers into the same layer as the floor (so I just have one layer), but I can't get the player to collide with a second layer. TLDR: Is is possible to set up tilemap collisions with multiple layers? Thanks in advance. I've been stuck on this all day.

Hi, I need more rendering groups, is it possible? Cheers

Hello guys! This is my first time here. I have looked through a lot of posts already trying to find the answer, but for some reason nothing is working for me!!! I am using tiled to get the map data and I have included it just fine since I was following the tutorials. So the first layer shows, but as soon as I create another layer that has my objects that will collide with the user, they don't appear. I have no idea what I am doing wrong. I am using the responsive template that came with phaser, which is why everything is in different files and stuff. This is my game.js BasicGame.Game = function (game) { // When a State is added to Phaser it automatically has the following properties set on it, even if they already exist: this.game; // a reference to the currently running game this.add; // used to add sprites, text, groups, etc this.camera; // a reference to the game camera this.cache; // the game cache this.input; // the global input manager (you can access this.input.keyboard, this.input.mouse, as well from it) this.load; // for preloading assets this.math; // lots of useful common math operations this.sound; // the sound manager - add a sound, play one, set-up markers, etc this.stage; // the game stage this.time; // the clock this.tweens; // the tween manager this.state; // the state manager this.world; // the game world this.particles; // the particle manager this.physics; // the physics manager this.rnd; // the repeatable random number generator this.player; this.cursors; this.map; this.ground_layer; this.tree_layer; this.building_layer;};BasicGame.Game.prototype = { create: function () { //// We're going to be using physics, so enable the Arcade Physics system this.game.physics.startSystem(Phaser.Physics.ARCADE); //this.map = this.add.tilemap('littleroot'); this.map = this.game.add.tilemap('littleroot'); this.map.addTilesetImage('tiles', 'gameTiles'); this.ground_layer = this.map.createLayer('ground'); this.tree_layer = this.map.createLayer('trees'); this.building_layer = this.map.createLayer('buildings'); //this.map.setCollisionBetween(1, 9962, true, 'trees'); //this.map.setCollisionBetween(1, 9962, true, 'buildings'); this.ground_layer.resizeWorld(); //this.tree_layer.resizeWorld(); //// The player and its settings this.player = this.game.add.sprite(32, this.game.world.height - 150, 'dude'); // //// We need to enable physics on the player this.game.physics.arcade.enable(this.player); //this.player.body.collideWorldBounds = true; //// Our two animations, walking left and right. this.player.animations.add('left', [0, 1, 2, 3], 10, true); this.player.animations.add('right', [5, 6, 7, 8], 10, true); //// Our controls. this.camera.follow(this.player); this.cursors = this.game.input.keyboard.createCursorKeys(); }, update: function () { this.game.physics.arcade.collide(this.player, this.tree_layer); this.game.physics.arcade.collide(this.player, this.building_layer); // Reset the players velocity (movement) this.player.body.velocity.x = 0; this.player.body.velocity.y = 0; if (this.cursors.left.isDown) { // Move to the left this.player.body.velocity.x = -150; this.player.animations.play('left'); } else if (this.cursors.right.isDown) { // Move to the right this.player.body.velocity.x = 150; this.player.animations.play('right'); } else if (this.cursors.up.isDown) { // Move up this.player.body.velocity.y = -150; //this.player.animations.play('up'); } else if (this.cursors.down.isDown) { // Move down this.player.body.velocity.y = 150; //this.player.animations.play('down'); } else { // Stand still this.player.animations.stop(); this.player.frame = 4; } }, quitGame: function (pointer) { // Here you should destroy anything you no longer need. // Stop music, delete sprites, purge caches, free resources, all that good stuff. // Then let's go back to the main menu. this.state.start('MainMenu'); },};This is my preloader.js BasicGame.Preloader = function (game) { this.background = null; this.preloadBar = null; this.ready = false;};BasicGame.Preloader.prototype = { preload: function () { // These are the assets we loaded in Boot.js // Load tile map data for the tile set this.load.tilemap('littleroot', 'assets/tiles/pk_emerald_map.json', null, Phaser.Tilemap.TILED_JSON); // Load the tileset this.load.image('gameTiles', 'assets/tiles/pk_emerald_map.png'); this.load.spritesheet('dude', 'assets/sprites/dude.png', 32, 48); }, create: function () { this.state.start('MainMenu'); }};I also tried uploading my json file, but I got this error: 'You aren't permitted to upload this kind of file'. So hopefully it's a code error and nothing to do with the json! I am also getting these warnings: 1) Phaser.Tileset - image tile area is not an even multiple of tile size phaser.min.js:24 2) Tilemap.createLayer: Invalid layer ID given: null phaser.min.js:24 Maybe these have something to do with it? I know I am missing something fundamental here because I looked through many tutorials and all of their layers work. Thanks for the help guys!

Hello everyone, I have been struggling with a problem that I can't seem to solve. Don't know if it's lack of pixi knowledge, concept problem or lack of a good night sleep (probably a bit of all). I'm working on a simple game concept, similar to an old game called Jumpin Jack. Consider this image: This scene is composed by 2 sprite types: the red lines (platform) and a white sprite (the hole) moving along the lines (on a top layer). So, each time I want to create a hole, I simple add a new sprite of type 2 and move him accordingly. Problem is, behind this first top layer, I can have background images or other objects, etc, so the white holes that worked so well on a white background now looks really bad, because in fact the white block appears on top of everything. I consider using tilesprite, only moving the red line (that already has a transparent hole) when the hole is in that line, but gave problems because I can have two holes on the same line (moving on different directions). I consider using a transparent sprite for the hole, but of course the transparent white shows.... the red line behind.. I consider using a mask, using the sprite but that didn't work either. So, what I really need is a way to say: on this specific rectangle, sprite line is transparent (creating the hole and seeing the background), and I update that area every frame, thus moving the hole. Any ideas? Thanks, AM

Hi everyone. I am a newbie in phaser and in english I am making a tower defense game,and i need to make 2 different layers. One for the background and one for the sprites. How do I make that? Thanks

Hi, Just assessing PIXI as a potential replacement for the rendering portion of my game engine and have a couple of questions: 1) In my engine I have separate scenes, each scene contains a bunch of stuff, for example, one scene could contain the HUD, another could be game level1, another level 2 etc.. Is it feasible for me to have a separate stage for each of these scenes? Or is it recommended to have only a single stage? 2) Can a stage have a transparent background? 3) I cannot seem to find anything related to sprite layering, is this supported? Thanks Mat

I'm relatively new to Phaser (only a few months of experience with it), so it didn't come up until recently that I attempted using tilemaps (which in this case are JSON files generated with Tiled) that have multiple layers. My code works fine with a single layer, but all collision between a layer and anything else stops working when I modify the code to add a second layer. In addition, creating sprites from the object layer (createFromObject) doesn't seem to work either. In my simplest test, the only change was adding a second layer to the map file (both layers share a single tileset), and the only change in the code is adding: var layer2; layer2 = map.createLayer('Tile Layer 2'); Both layers display properly, but collision stops working. I thought I had read that Phaser could handle multiple tile layers now. Is there something I'm missing that I need to have to get this to work?

i have one little tiled background image and two layers in tiled .. all of them are only used as background images.. all the collisionareas are polyline objects on different layers.. the problem is always the same.. the performance is so poor - the game is almost unplayable on a nexus7 (this is no low end device you know?!) of course my levels are quite big but this shouldn't matter at all because it's always just the camera view (800x480) that's beeing rendered but hey.. it does matter.. because scrolling tilemap layers still sucks hard.. so i am searching for a neat workaround.. i exported the whole map as jpg and every level got this hughe jpg as background - this works .. i've got almost 60fps on the nexus7 BUT every jpg eats up to 900kb so this is no good way to go.. right? (imagine 40 levels would need 40Mb space on your device .. and additional 20 for cocoonjs.. ) therefore i want to merge down the tilesprite with the background layers from tiled on load and get rid of the layers - scroll only one very big image.. because thats a LOT faster.. or any other idea would be very appreciated !! (otherwise my game will never go mobile )

For some reason, Mario will just fall through the tilemap layer "Ground". Do I have the collision and physics set up correctly? I used the Starstruck example on the Phaser website, but to no avail. Thanks in advance guys!var game = new Phaser.Game(320, 240, Phaser.AUTO, 'gameCanvas');var map;var tileset;var groundLayer;var mario;var cursorsvar playState = { preload: function() { game.load.tilemap('level01', 'assets/level01.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles1', 'assets/mariotileset.png'); game.load.spritesheet('marioSheet', 'assets/marioSheet.png', 16, 25); }, create: function() { game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = '#66DDFF'; map = game.add.tilemap('level01'); map.addTilesetImage('tileset', 'tiles1'); map.setCollisionBetween(136, 140); groundLayer = map.createLayer('Ground'); groundLayer.resizeWorld(); game.physics.arcade.gravity.y = 350; mario = game.add.sprite(200, 200, 'marioSheet'); game.physics.enable(mario, Phaser.Physics.ARCADE); mario.body.collideWorldBounds = true; mario.anchor.setTo(0.5, 1); mario.animations.add('walk', [0, 1, 2, 1], 15, true); cursors = game.input.keyboard.createCursorKeys(); }, update: function() { game.physics.arcade.collide(mario, groundLayer); mario.body.velocity.x = 0; if (cursors.left.isDown) { mario.animations.play('walk'); mario.scale.x = -1; mario.body.velocity.x = -200; } else if (cursors.right.isDown) { mario.animations.play('walk'); mario.scale.x = 1; mario.body.velocity.x = 200; } else { mario.animations.stop(); } }};game.state.add('play', playState);game.state.start('play');

Hi! I am working on a game with kids from the inner city in one of the most dangerous neighborhoods in Canada. I am trying to integrate multiple layers from tiles to control behavior of different sprite classes (like enemies) that have their own collision tiles separate from the player tiles. I cannot actually figure out how to make the physics system recognize any layer but the player's layer. I've been able to get around it before with some tile classes but now I feel I need the enemy to interact with the tilemap separately than the player. Below is some of my code. Please help! The children are waiting! map = this.game.add.tilemap('tiles'); map.addTilesetImage('tiletile') layer = map.createLayer('tiles'); this.enemyLayer = map.createLayer('enemyCollide'); this.enemyLayer.resizeWorld(); this.enemyLayer.debug = true; layer.resizeWorld(); map.setCollisionBetween(1,20); console.log(map.layers[2])

my game map is 200x20 tiles big - i have 7 layers.. most of them have only a few tiles on them except the mainlayer and the icelayer which contain the ground .. the moment the camera starts scrolling with my player (follow player) the performance drops to 30 frames/second. if i comment out all layers except the mainlayer and the icelayer (so 2 instead of 7 layers) the performance is top !! why is that? i thought the layers are being converted to p2 bodies and then handled as bodies?? touching tiles should be converted to one single body so performance would be even better.. it is definitely not the sheer number of p2 bodies because i created a special test-map (huge with hundreds of independent tiles on one single layer) and the performance was still top.. so scrolling my almost empty layers at the cost of 30 fps ?? is this a bug ?

Hi, first of all: Thank you very much for Phaser! Its just great how much work you keep away and how much fun you give to the developer. I just have a brief question: I built a map with Tiled. The map has 3 layers. The third layer contains the elements the 'player' has to collide with. I loaded the map via tilemap() and added a player sprite via sprite(). Both are displayed, everything works fine. I used 'setCollisionRange' to the tile numbers that occur in layer3 (the colission layer) and in my update() method I call (game.physics.collide(player, map)). I checked my code twice and, concerning the colission, it does exactly the same thing as starstruck (examples/games/starstruck.php). The only difference I found was that the starstruck tilemap (assets/games/starstruck/level1.json) has only one layer. Is multiple layer collision detection implemented at present? If so, what am I doing wrong? Thanks for your trouble and kind regards Marc

Hi all, Please find the following link http://collegetomato.com/forDhruva/nanoSWAT/curveMovement/ which I have done using construct2 game engine and it took me almost a week to do this. Considering my programming skill of a designer(who also codes sometimes) it would take more time in Phaser. Can you help me out with a code snippet which simulates the action shown in the link The algorithm I have used is ... I am storing the trails as the player is touching the screen and storing the X,Y, direction (relation between previous consecutive trails) in an array which I am looping through and then changing the Y position of the main Sprite when the X of the next trail is less than the main sprite. ..if the current direction is LEFT to RIGHT.similarly changing the Y position of the main sprite if the X of next trail is greater than the main sprite ..if the current direction is RIGHT to LEFT sorry if the explanation for the algo is crude thanks

in previous versions of Phaser I believe you could use the 'scrollFactor' field to control the scrolling rate of layers, but the 1.1.x releases have removed this. I have worked around this by replacing the 'update' method on TilemapLayer objects which scroll at a different rate than the "primary" layer. for instance, for a 'foreground' layer which scrolls twice as fast as the primary layer I do something like: fg_layer.update = function() { this.scrollX = this.camera.x * 2; this.scrollY = this.camera.y * 2; this.render();};while this works, it is obviously rather brittle (as it requires that I carefully match the sizes of my layers) and tied to a specific version of Phaser (as Rich could make changes to TilemapLayer.update() at any time). does anyone have a better technique? tia, josh

After reading this article on Samsung Galaxy III on Rich's site, a couple of questions have come to my mind. How many canvas layers do you use in your games? How does this number affect going multi-device? I find using multiple canvas very handy, but I know this might lower the performance when the device or browser is not so powerful. Linked to this, how do you handle the canvas clearing issue? For the moment I'm trying to clear only the changing areas, so i'ts fundamental to have more than one canvas.