Search the Community

Showing results for tags 'map'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 77 results

  1. 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 : 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 !;)
  2. 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 : Its documentation is one the same repo : Have fun Some more demos and features to come
  3. 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
  4. Gerente

    Fog of War

    Hello, anyone has any example about a fog of war around a specific point? thanks.
  5. hi, after get the examples from : 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 =; 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( ); = 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) {; } else if (cursors.right.isDown) {; } if (cursors.up.isDown) {; } else if (cursors.down.isDown) {; } } 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); } }
  6. 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( 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 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
  7. 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:
  8. 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 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?
  9. 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
  10. 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!
  11. 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 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
  12. Hi all, I am new to phaser so excuse me if this is stupid. Actually, I am working on 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(,; 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(; 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!!!!!!
  13. 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.
  14. 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?
  15. 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.
  16. 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 (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.
  17. Does the PBR material have an Alpha Map Texture?
  18. 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 =>;". ![]() GFDL+CC-BY 2.5 Pedro Sanchez on wikipedia
  19. 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 () { = game.add.tilemap('map');'tileset'); this.layer ='Tile Layer 1'); this.layer.resizeWorld();; }, 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.
  20. 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.
  21. 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)
  22. 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!
  23. Hi. I want to make a collision between character and tiles so that character couldn't go through the tiles, but nothing works. <script> var game = new Phaser.Game(800, 600, Phaser.AUTO); var player; var cursor; var map; var layer; var GameState = { preload: function() { this.load.image('character', 'assets/character.png'); this.load.tilemap('map', 'assets/tile_csv.csv', null, Phaser.Tilemap.CVS); this.load.image('tiles', 'assets/tile.png'); }, create: function() { game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = "#0000ff"; map = game.add.tilemap('map', 32, 32); map.addTilesetImage('tiles'); layer1 = map.createLayer(0); layer1.resizeWorld(); map.setCollision(2); player = game.add.sprite(50, - 110, 'block'); game.physics.arcade.enable(player); player.anchor.setTo(0.5); player.scale.setTo(0.4); player.body.collideWorldBounds = true; cursors = game.input.keyboard.createCursorKeys();; }, update: function() { game.physics.arcade.collide(player, layer1); player.body.velocity.x = 0; player.body.velocity.y = 0; if (cursors.left.isDown) { player.body.velocity.x = -1500; } else if (cursors.right.isDown) { player.body.velocity.x = 1500; } if (cursors.up.isDown) { player.body.velocity.y = -1500; } else if (cursors.down.isDown) { player.body.velocity.y = 1500; } } }; game.state.add('GameState', GameState); game.state.start('GameState'); </script>
  24. If you can do this with 5 lines of code, you've probably already read all the long but didactic documentation about the brand new Dynamic Terrain Extension what I'm currently and shamelessly promoting in this inadequate sub forum with this link Have fun
  25. Very sorry if someone has asked this before, but I searched the internet for two days now and I have yet to find the answer to this. So, what I want to know is how can I tell the size (width, height) of the platform that a player/enemy is standing on, with platforms that are based on a tilemap/layer? Take for example this game phase example starstruck: How can I tell the size of that platform the mascot falls on first? Why do I want to know this? I want to know so that I can place enemies on the map, have them go back and worth without falling off a platform. I have seen this be done when platforms are created as a group, but not with platforms in a layer. Thank you very much for any help.