Search the Community

For some reason the following code isn't working. I've created all the tilesets, keys and images are correct and nothing is erroring in the console log preload this.load.image('tiles', 'assets//maps/newest.png'); this.load.tilemapTiledJSON('map', 'assets/maps/newest.json'); create const map = this.make.tilemap({key: "map", tileWidth: 32, tileHeight: 32}); const tileset = map.addTilesetImage('newest', 'tiles') const layer = map.createLayer('ground', 'map') The assets are loading in fine too, but I haven't added a map before using tilesets so not sure where I could of gone wrong. The image also loads in fine when adding that in so I figured it might be something to do with the following JSON file. { "compressionlevel":-1, "height":20, "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, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 5, 5, 5, 5, 5, 5, 5, 5, 2, 2, 2, 2, 5, 5, 5, 5, 5, 5, 5, 5, 2, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 0, 0, 0, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 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, 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], "height":20, "id":1, "name":"ground", "opacity":1, "type":"tilelayer", "visible":true, "width":25, "x":0, "y":0 }], "nextlayerid":2, "nextobjectid":1, "orientation":"orthogonal", "renderorder":"right-down", "tiledversion":"1.7.2", "tileheight":32, "tilesets":[ { "columns":3, "firstgid":1, "image":"..\/..\/Documents\/sprites\/tileset2.png", "imageheight":96, "imagewidth":96, "margin":0, "name":"newest", "spacing":0, "tilecount":9, "tileheight":32, "tilewidth":32 }], "tilewidth":32, "type":"map", "version":"1.6", "width":25 } I'll add the full code here for anyone to look over class Level1 extends Phaser.Scene { constructor() { super({key: "Level1" }); } preload () { this.load.aseprite('alco', 'assets/animations/StrongAlc.png', '../assets/animations/StrongAlc.json'); this.load.aseprite('chef', 'assets/animations/alcochef.png', '../assets/animations/alcochef.json'); this.load.image('tiles', 'assets//maps/newest.png'); this.load.tilemapTiledJSON('map', 'assets/maps/newest.json'); } create () { this.width = 800; this.height = 640; const map = this.make.tilemap({key: "map", tileWidth: 32, tileHeight: 32}); const tileset = map.addTilesetImage('newest', 'tiles') const layer = map.createLayer('ground', 'map') let playerPoints = 0; this.keyF = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.F); this.keyW = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W); this.keyD = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D); this.keyA = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A); this.anims.createFromAseprite('chef', [ 'idleburp', 'standingattack', 'jump', 'run' ]); this.anims.createFromAseprite('alco'); this.alco = this.physics.add.sprite(this.width/2, (this.height /2) -50, 'alco'); this.chef = this.physics.add.sprite(this.width/50, this.height/2.5, 'chef'); this.chef.body.setCollideWorldBounds(true) this.physics.add.collider(this.chef, this.ground) this.chef.sideFacing = 'right' this.chef.moving = false; function colliderAlco(sprite) { playerPoints ++ console.log(playerPoints) // destroySprite(sprite) } this.physics.add.collider(this.chef, this.alco, colliderAlco(this.alco)) this.alco.play({key: 'rotatinglabel', repeat: -1}) // var frameNames = this.textures.get('chef').getFrameNames(); this.chef.play({key: 'idleburp', repeat: -1, ignoreIfPlaying: false}) } update() { if(this.keyF.isDown) { this.chef.play({key: 'standingattack', repeat: 0, ignoreIfPlaying: false}) this.chef.moving = true } if(this.keyD.isDown) { this.chef.play({key: 'run', repeat: -1, ignoreIfPlaying: false}) this.chef.moving = true this.chef.body.setVelocityX(100); this.chef.flipX = false if(this.chef.facing === 'left') { return this.chef.facing === 'right' } } if(this.keyW.isDown) { this.chef.play({key: 'jump', repeat: 0, ignoreIfPlaying: false}) this.chef.moving = true } if(this.keyA.isDown) { this.chef.play({key: 'jump', repeat: 0, ignoreIfPlaying: false}) this.chef.moving = true this.chef.body.setVelocityX(-100); this.chef.flipX = true if(this.chef.facing === 'right') { return this.chef.facing === 'left' } } } } function destroySprite(sprite) { sprite.destroy(); } export default Level1; This is the index.js import Phaser from 'phaser' import Level1 from './scenes/level1' var config = { type: Phaser.AUTO, width: 800, height: 640, physics: { default: 'arcade', arcade: { debug: true, gravity: {}, } }, scene: [Level1], scale: { zoom: 1, } }; var game = new Phaser.Game(config);

Hi folks, Maybe some of you followed this topic for while : Well, now I'm proud to announce the fully documented first release of the Dynamic Terrain Extension : https://github.com/BabylonJS/Extensions/tree/master/DynamicTerrain Its documentation is one the same repo : https://github.com/BabylonJS/Extensions/blob/master/DynamicTerrain/documentation/dynamicTerrainDocumentation.md Have fun Some more demos and features to come

Hi everyone, I'm trying to build a camera for a large exported JSON map. Currently, what I'm doing is pivoting the movement around the player to give the illusion of movement like this in the game loop ``` this.playerOffsetX -= this.sprite.vx; this.playerOffsetY -= this.sprite.vy; this.player.x += this.sprite.vx; //NOTE, this does not actually move the sprite, this.player is just a Javascript object with an x and y property this.player.y += this.sprite.vy; this.staticBackground.pivot.set(this.player.x, this.player.y); ``` Now after the player has moved a number of pixels = the length of my file, I re-draw the map by adjusting the row and column of the original map and re-draw everything again (inefficient, I know for now until I get it working correctly) ``` renderMap(initial = false) { //move the camera to give illusion of movement // if (newLeftX === this.leftX && newLeftY === this.leftY && !initial) return; const layers = this.map.layers; //camera spans 10 tiles to right and down const mapWidth = this.map.width; const mapHeight = this.map.height; var updateMap = initial; if (!initial) { // this.staticBackground.position.set(this.sprite.x, this.sprite.y); if (this.playerOffsetX !== 0) { if (this.playerOffsetX % SQUARELENGTH === 0) { this.staticBackground.removeChildren(); const step = Math.floor(this.playerOffsetX / SQUARELENGTH); this.leftX -= step; if (this.leftX <= 0) { this.leftX = 0; } this.playerOffsetX = this.sprite.width / 2; updateMap = true; } } if (this.playerOffsetY !== 0) { if (this.playerOffsetY % SQUARELENGTH === 0) { this.staticBackground.removeChildren(); //TODO: fix this const step = Math.floor(this.playerOffsetY / SQUARELENGTH); this.leftY -= step; console.log("step: ", step," new y:", this.leftY); if (this.leftY <= 0) { this.leftY = 0; } this.playerOffsetY = this.sprite.height / 2; updateMap = true; console.log("refresh y: ", this.leftY); } } if (!updateMap) { return ; } } else { this.staticBackground.position.set(0, 0); } console.log("ran: ", this.leftX, this.leftY); for (let layer = 0; layer < layers.length; layer++) { const currLayerData = layers[layer].data; //calculate exact window we need to iterate, since window is square //but data is a 1D array, we will still encounter some elements outside window //still a 4x improvement const start = (this.leftY * mapWidth - 1) + this.leftX; const end = start + WINDOW_WIDTH + (WINDOW_HEIGHT * mapWidth) + 1; console.log(this.leftX, this.leftY, start, end, currLayerData.length); for (let i = start; i < end; i++) { //position on our screen //data is stored as one very long string, representing a 2D grid //y and x are in terms of rows and cols of tiles not raw pixels const y = i / mapHeight| 0; const x = i % mapWidth | 0; //choose tile if (currLayerData[i] !== 0 && currLayerData[i] < 100) { //only continue if in window of map const yOffset = y - this.leftY; const xOffset = x - this.leftX //tile window is WINDOW_WIDTH x WINDOW_HEIGHT if (yOffset >= -5 && yOffset <= WINDOW_HEIGHT + 5 && xOffset >= -5 && xOffset <= WINDOW_WIDTH + 5) { //elements are stored corresponding to sequential ids, that map back //to the tileset - 20 = # of tiles in each row in our tileset const tileRow = Math.floor(currLayerData[i] / 20); const tileCol = ((currLayerData[i] - 1) % 20); const sprite = new PIXI.Texture(TextureCache["/static/img/rpg.png"]); sprite.frame = new PIXI.Rectangle(tileCol * SQUARELENGTH, tileRow * SQUARELENGTH, SQUARELENGTH, SQUARELENGTH); const layer = new PIXI.Sprite(sprite); layer.x = xOffset * SQUARELENGTH; layer.y = yOffset * SQUARELENGTH; this.staticBackground.addChild(layer); } } } } } ``` The problem is that I'm getting some weird tearing issues - I think the problem is to do with pivoting - I pivot the map around the player coordinates (which keeps increasing or decreasing) but when I redraw the map in the given area, the pivot is not adjusted for that offset, but I'm not sure which offset that is. Anybody have an idea of why this is not working correctly? Is there an easier/better approach?

Hello, I am thinking about to create a Europe map for my game. There are some restrictions: -I don't want to load the map over the internet because I want to keep the network traffic small -I don't want to increase my code significantly. The map should have the size of 1000x1000 pixels. This results in 1 million pixels overall. To save all pixels as black white values would result in 8 million bit. That would increase my game size too much! I am thinking about creating the map by an algorithm. But that seems to be difficult, right? So far I have an algorithm that creates my other maps dynamically. The input of this algorithm is just a pseudo random number. And now I am thinking about a very big number that creates the Europe map "by accident". Can anyone still follow me?

I'm in an early phase of a new project and I'm considering using Pixi for it. I think it's a good idea to ask the community before going further.. Basically, I have multi-layered maps with many different models (up to 12) the top layer is interactive, and when I click on a zone I can choose what map model to display for this zone. Heres an image of what I have in mind : https://i.imgur.com/UafKavW.jpg The solution I'm thinking of : Outside Pixi : 1 - I choose one of the available map model to display. 2 - I click on an element of a transparent SVG that is placed above the canvas. 3 - I Get back informations about this element (path description, bbox, etc...) In Pixi 1 - I ask pixi to create and display a sprite with the chosen map model and the SVG element as a mask. 2 - I can, eventually, choose to apply a filter to this element. Do you think that pixi.js can handle something like this ? Is it a good idea to use pixi for this ? Does using pixie will help with the speed over a vanilla DOM/SVG solution ? Thanks in advance to the experts !;)

Hello Everyone, I've just started to use Babylon.js for the the purpose of posting 3d content to Facebook. I am trying to post a scene that consists of a 3d model and an environment from a 360 degree image. How do I export my environment ? all my attempts ( Creating default skybox, a sphere with flipped normal, ...) have been met with failure: - In case of exporting the environment map no success. - In case of flipped sphere, it always views the scene from outside rather from inside. Any solutions? I am trying to refer to the documentation but no clear answer so far. Thanks

Hello, anyone has any example about a fog of war around a specific point? thanks.

hi, after get the examples from : https://phaser.io/examples/v2/tilemaps/tile-properties i'm searching to modify the object of the tiles, but i can't modify the alpha and the scale (=> see //HERE THE PROBLEM). how do you do to reach that ? var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update ,render: render}); function preload() { // tiles are 16x16 each game.load.image('tiles', 'tiles.png'); } var cursors; var currentDataString; function create() { // Create some map data dynamically // Map size is 128x128 tiles var data = ''; for (var y = 0; y < 128; y++) { for (var x = 0; x < 128; x++) { data += game.rnd.between(0, 20).toString(); if (x < 127) { data += ','; } } if (y < 127) { data += "\n"; } } // console.log(data); // Add data to the cache game.cache.addTilemap('dynamicMap', null, data, Phaser.Tilemap.CSV); // Create our map (the 16x16 is the tile size) map = game.add.tilemap('dynamicMap', 16, 16); // 'tiles' = cache image key, 16x16 = tile size map.addTilesetImage('tiles', 'tiles', 16, 16); // 0 is important layer = map.createLayer(0); // Scroll it layer.resizeWorld(); game.physics.startSystem(Phaser.Physics.ARCADE); cursors = game.input.keyboard.createCursorKeys(); // Our painting marker marker = game.add.graphics(); marker.lineStyle(2, 0xffffff, 1); marker.drawRect(0, 0, 32, 32); game.input.addMoveCallback(updateMarker, this); game.input.onDown.add(getTileProperties, this); cursors = game.input.keyboard.createCursorKeys(); } function getTileProperties() { var x = layer.getTileX(game.input.activePointer.worldX); var y = layer.getTileY(game.input.activePointer.worldY); var tile = map.getTile(x, y, layer); console.log(tile) //////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// //HERE THE PROBLEM tile.scale.x=.1 tile.alpha=.1 // Note: JSON.stringify will convert the object tile properties to a string currentDataString = JSON.stringify( tile.properties ); tile.properties.wibble = true; } function updateMarker() { marker.x = layer.getTileX(game.input.activePointer.worldX) * 32; marker.y = layer.getTileY(game.input.activePointer.worldY) * 32; } function update() { if (cursors.left.isDown) { game.camera.x--; } else if (cursors.right.isDown) { game.camera.x++; } if (cursors.up.isDown) { game.camera.y--; } else if (cursors.down.isDown) { game.camera.y++; } } function render() { if(currentDataString){ game.debug.text('Tile properties: ' + currentDataString, 16, 550); } else { game.debug.text("Click on a tile to reveal the properties of the tile", 16, 550); } }

Hi Guys, I recently started to work with Babylon and I was wondering if the behavior for the arcRotate Camera is expected or not or I'm just doing something wrong :). Maybe you can help me out with that. I would like to pan in the scene like this example here(https://www.mapbox.com/help/studio-manual-tutorials/). Unfortunately if I try to do the same in Babylon the panning for X and Y axis is different(Given that alpha and beta are zero). Panning along the Z-axis(left and right) is easy while panning along the X-axis(up and down) is almost impossible. See https://playground.babylonjs.com/#K9MWF6#1 I hope this explanation was not too bad. So my question is if it is wanted like this how can I change it to have a similar experience to the panning behavior in the Mapbox example. Thanks in advance. Basti

Hi, I've successfully created a mini map. Now I'm trying to give it a custom opacity value to make it a littler transparent. I did not find any way to do this. Any help would be appreciated. Here is a good starting point for your kind help: http://www.babylonjs-playground.com/#RE9QZ#3

Im using 2.0 arcade physics for a platformer i'm making but my player keeps colliding with invisible overhead tiles , running through tiles ,and sinking into the floor. I've tried changing around numbers in my setCollisionBetween and setCollisionByExclusion but collision detection is all over the place. I never really ran into this problem with the earlier phasers. Its to the point where the game is kinda unplayable. The links below are to hastebin.com Here is my tilemap.json. I only want the player to collide with "ground"And here is my actual game code game.js is there anything i can do to fix this?

Hi all, I need advice on which approach is best for my problem: Setup: 1. I'm using Tiled and tiles sets to create platforms for the player to jump on 2. Each platform is made of 32x32 tiles and can have any shape, like in tetris. (line-shaped, "L"-shaped, 2x2 block, and so on) 3. A level can have up to 50 platforms Desired outcome: I want is to know when the player has touched every tile of a platform. E.g. a platform has 5 tiles and after the player collided with all of them I want to call a function. What would be the best way of doing this? Solutions considered: 1. Have one layer per platform and get all tiles in each layer once the player touches the first tile. Then have a boolean on each tile, and substract the total touched tiles from the total tiles in the layer. When zero, call the function 2. Have some function that looks for adjacent tiles to the one touched by the player. Are there any better solutions? Thanks

Hello, I'm trying to create a map based on a single SVG file (I don't want tiles). The idea is to create a map from Inkscape or Illustrator and then split the XML (svg). Since SVG it's just a XML file, I can extract each "g" nodes to create a PIXI Graphic but the "g" nodes are strings and I don't know how to create a graphic from a SVG xml string. If you have a better idea to create maps (no tiles) please let me know!, otherwise how can I create a graphic from a SVGXML String. Thanks!

Hi everyone, I did find quite some threads which discuss this topic in one way or another but none of them really helped me understanding what I don't understand yet I want to use vector map tiles (like this https://mapzen.com/projects/vector-tiles/) on a sphere, so it's a globe. For that matter it could also be osm xml, topojson er things like that. The thing I don't really get is the step to go from the json to the image. The examples I found are either using image map tiles or don't explain how the conversion was done. There are libraries like mapbox, openlayers and leaflet. Would I combine those with babylon to use them for the geo-part of things? Or is it really that I have to write my own 'kind of library' which uses the data from the geo json and draw the lines and polygons myself? I don't care about extrusion or a 3d effect. I want to be able to have a sphere with eg borders, roads mapped and it should be efficient so thats why I think vectors would suite better than images. Also I like the adaptive level of details which map tiles provide. Would be great to get some opinions, thanks, Silvio

Hi all, I am new to phaser so excuse me if this is stupid. Actually, I am working on agar.io kidda game. I am making a mini-map to hold all of the game world. But, the world inside the canvas moves along the player and shows beyond the actual game boundary. This function is called on create function. function createMiniMap(){ stage = game.make.bitmapData(game.world.width, game.world.height); thumbnail = game.add.bitmapData(200, 200); thumbContainer = game.add.sprite(game.width, game.height, thumbnail); thumbContainer.anchor.setTo(0.5, 0.5); game.stage.addChild(thumbContainer); } in update function update(){ if (game.time.time < this.nextUpdate){ return; } { stage.clear(); stage.drawFull(game.world); thumbnail.rect(0, 0, thumbnail.width, thumbnail.width, '#000'); thumbnail.copy(stage, 0, 0, stage.width, stage.height, 2, 2, thumbnail.width, thumbnail.width); thumbnail.update(); this.nextUpdate = game.time.time + this.updateRate; } } Thanks in advance!!!!!!

Hey, what's up? I am just starting with Phaser. I have background in PHP and jQuery, but I am no artist really. I am thinking of hiring a real artist if my proof of concept fares well among my friends, but for now, is there a simplistic tool that could get me started with drawing maps. I am thinking of just putting up state that draws the current town-map, and the player can click on buildings to enter them (shops, home/base, and houses with NPCs). Maybe something like drag and drop sprites like mountains and trees? Thanks for help. I am loving Phaser. To be honest, making games seems much simpler than I first thought it would be. I was starting to download Unreal Engine and Blender and whatnot. Pfft. Phaser is pretty cool.

Hello, I'm just starting to learn pixi.js I want to make a game where the main character is in the middle of the screen all the time, while the map moves behind the character as it is walking. The problem is, the map is going to be extremely large. I'm going to be zoomed in on a very small portion of it. The easiest way for me to load the map, is to simply load that whole thing onto the screen. Since the whole map obviously won't fit on the screen, it'll just show a small portion. Then I can just change the x, y coordinates of the map, to make it move. But, unless pixijs is doing some good memory management I am unaware of, doing it this way will overload the memory. I'd need to be able to smoothly walk through the whole map without interruptions to load another portion of the map. Anyone try and do something like this before? What do you do to try and optimize it?

Hello, I am working on a catch and run game, and I have cat and rat meshes along with a height map that creates walls for me. I have the locations of rat and cat, also my objective is using websocket to play this game, so I should know information about locations. Simply, I want to send some information to the users so, they can decide which way to go. In Gazebo simulation program, LaserScan that has distance array to the obstacles with decided view of angle such as pi radian is used for deciding which way to go with no knowledge of the world. How can I achieve this goal? How can I get the distances to obstacles which provided with some decided angle of view. I want to do this in that way, because any indexing can be wrong for some situations like roundoff errors may occur, but any suggestions is welcomed. Please consider the fact that I will send this information to users, and wait them to understand quickly.

Hi, I've long wanted to implement a neat looking invisibility effect for my game, tried using DisplacementFilter, but stumbled upon an issue with scale property. While it works correctly to displace areas under the displacement sprite I created, it also displaces entire container on which the filter is applied. I presume its from non existent knowledge about the subject and how those filters work, but I'm still hoping for either a fix or a reasonable explanation if anyone can help me with this please. Everything in my code follows DisplacementMap example on pixijs.com (one with the grass and magnifying glass). What is different is my stage tree. I have 3 containers for each layer and inside those there are separate containers for chunks that hold the map data, since it comes from the server. const playerSprite = new PIXI.Sprite(new PIXI.Texture(PIXI.utils.TextureCache['player.eyes'])); const displacementSprite = new PIXI.Sprite( new PIXI.Texture(PIXI.utils.TextureCache['player.normal']) ); let displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite); playerSprite.position.set(16 / globalScale * fs, (8 - globalScale) / globalScale * fs); playerSprite.scale.set(globalScale, globalScale) this.scene.addChild(playerSprite); this.scene.addChild(displacementSprite); displacementFilter.scale.x = 20; displacementFilter.scale.y = 20; displacementFilter.enabled = true; displacementSprite.position.set(16 / globalScale * fs, (8 - globalScale) / globalScale * fs); displacementSprite.scale.set(globalScale, globalScale) return { scene: this.scene, filter: displacementFilter }; the return value from this block is added to the main stage container, and filters are applied to bottom 2 layers. Should i perhaps look into filterArea? Here is the undesired effect on the edges. You can also see the slanted top layer on the trees. so 2 layers are moved by the filters scale property.

Does the PBR material have an Alpha Map Texture?

Hi =) I don't know where to find this information, so I'm asking it to you now. I would like to make a very accurate map/background where there are some areas which plays specific music/sound when we click on it. I guess it would use the same mechanisms as pianos, and I don't know how to do it: a svg map? a tiled map with objects? other options? For example, if I want to use the conductor's wand to play a specific instrument when I click on it, how do I say to phaser: "Hey, at this specific area there is something to do => violin.play();". ![]() GFDL+CC-BY 2.5 Pedro Sanchez on wikipedia

Hi, I'm learning phaser and got this issue. The collision between the player and the map is not working since I moved the player to its own file (player.js) as an object Im calling this in the update function on the play.js game.physics.arcade.collide(this.player.sprite, this.layer); I'm creating the tile map in the play.js createWorld: function () { this.map = game.add.tilemap('map'); this.map.addTilesetImage('tileset'); this.layer = this.map.createLayer('Tile Layer 1'); this.layer.resizeWorld(); this.map.setCollision(1); }, Here's the player.js file function player() { this.preload = function () { }; this.create = function () { this.sprite = game.add.sprite(game.width / 2, game.height / 2, 'atlas', 'player01'); this.sprite.anchor.setTo(0.5, 0.5); game.physics.arcade.enable(this.sprite); this.sprite.body.gravity.y = 500; this.cursor = game.input.keyboard.createCursorKeys(); }; this.update = function () { }; } Originally the collision worked well before putting the player in a different file, but I can't make the collision work now.

Hello people! I need to know how to insert a repeating map that moves in the Y position. I need to give the moving map effect, but the "player" can pass both halves of the map and not be in the middle, as when using the "setBounds ()" method.

Hi, in my platform game I want to load map from Tiled. Everything was working fine, with this example: function preload() { game.load.tilemap('level1', 'assets/level8.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles-1', 'assets/tiles-1.png'); } function create() { //MAP SETTINGS map = game.add.tilemap('level1'); map.addTilesetImage('tiles-1'); map.setCollisionByExclusion([ 13, 14, 15, 16, 46, 47, 48, 49, 50, 51 ]); layer = map.createLayer('Tile Layer 1'); layer.resizeWorld(); } It worked perfectly, but when I just edited tilesheet and used them in Tiled (identical tiles but grey instead brown), the game cannot load. The error from the console: Failed to load resource: the server responded with a status of 404 (Not Found) and Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)' at c.Tileset.draw (phaser.min.js:27) at c.TilemapLayer.renderRegion (phaser.min.js:26) at c.TilemapLayer.renderFull (phaser.min.js:26) at c.TilemapLayer.render (phaser.min.js:26) at c.TilemapLayer._renderCanvas (phaser.min.js:26) at c.World.d.DisplayObjectContainer._renderCanvas (phaser.min.js:7) at c.Stage.d.DisplayObjectContainer._renderCanvas (phaser.min.js:7) at d.CanvasRenderer.renderDisplayObject (phaser.min.js:9) at d.CanvasRenderer.render (phaser.min.js:9) at c.Game.updateRender (phaser.min.js:11)

Hello guys, I was wondering if there is a way to keep using a mesh's UV map after changing it's material. My game currently uses a cell shader, so I have been giving meshes ShaderMaterials and then calling ShaderMaterial.setTexture() to give it the same texture as before. This successfully applies the cell shader and texture, but the UV map is lost in the process so the texture no longer lines up. I've looked through the mesh, material, submaterials, and texture's attributes and all i can find are u/v offset, scale, and Ang (which are 0, 1, 0 respectively), but in the .babylon file for the model I see an attribute caled "uvs" which I'm assuming is what I need to copy. Thanks in advance!