Search the Community

Hello, I'm new here, so firstly I want to greet with all of you. Regarding my question, or maybe problem - some background here: I want to create minimal for My 2D space shooter. I check tutorials on labs.phaser where I saw example with creating MiniMap with second camera - it sounds good. So I created class for My MiniMap: import Phaser from 'phaser' export default class MiniMap extends Phaser.Cameras.Scene2D.Camera { constructor ({ scene, x = 10, y = 10, width = 192, height = 192, zoom = 0.1, scroll = { x: 960, y: 960 } }) { super(x, y, width, height) this.scene = scene this.zoom = zoom this.scroll = scroll } init () { this.scene.cameras.cameras.push(this) this.scene.cameras.addExisting(this) this.setZoom(this.zoom) this.setScroll(this.scroll.x, this.scroll.y) return this } } And I'm creating it in My GameScene in create() function: create () { this.bgImage = new BackgroundImage({ scene: this }).init() this.miniMap = new MiniMap({ scene: this }).init() this.miniMap.setBackgroundColor('black') this.player = new Spaceship({ scene: this, x: 0, y: 0 }).init() this.camera.startFollow(this.player) } About My sizing, BackgroundImage and Bounds are 1920 x 1920 px, so in MiniMap we had 192 x 192 and also zoom as 0.1 (1/10 of real game world). It should create Map with the whole world, but it is cut on left and top and have free space at right and bottom (attachment). How to fix it? Also, maybe you can give me some tips how to change Spaceship sprite on MiniMap (second camera) as for example dot? Thanks for advance! Best, DaaV

Is there any way to render the tilemap layers and get the image? I just want to do a static minimap (it will not display changes in the world). Initially, I tried to do this with a camera that looks at the game world with the ignoring of unnecessary objects. It turned out, but so-so, you need to carefully select the scale that would not be render artifacts. At the moment, the mini-map is in another scene and accordingly it does not have access to the render of another scene, i.e. option with the camera does not work. So I tried using the built-in renderer and its screenshot function. As I did, at the initialization stage of the map, I create an additional game instance with the world size equal to the minimap (in other words I make the game in the game) and try to make its screenshot. At the result it comes with base64, but in my case it is invalid, and the expected size should be an order of magnitude greater. I suspect that because of the async of both the initialization of my map and the map itself in the map, this does not happen until the end. GameInGame code: const startMiniGame = tileMap => { const factor = 10; function preload() { this.load.image('tiles', tilesheet); } function create() { const mapData = Tilemaps.Parsers.Tiled('map', tileMap, undefined); this.map = new Tilemaps.Tilemap(this, mapData); const { widthInPixels, heightInPixels, tileHeight, tileWidth } = this.map; this.tiles = this.map.addTilesetImage('maptile', 'tiles', tileWidth, tileHeight, 1, 2); MapService.Layers.forEach(([layer]) => { this.map.createDynamicLayer(layer, this.tiles, 0, 0); }); this.cameras.main.setBounds(0, 0, widthInPixels / factor, heightInPixels / factor); this.cameras.main.setZoom(factor); } return { type: Phaser.CANVAS, width: tileMap.widthInPixels / factor, height: tileMap.heightInPixels / factor, scene: { create, preload } }; }; And initialization: // method of MapService createMiniMapSnaphot = tileMap => { // there I can catch error event then. // so, game.renderer.snapshot works but gives something wrong this.scene.sys.textures.on('onerror', (...args) => { console.error('onerror', ...args); }); const game = new Phaser.Game(startMiniGame(tileMap)); game.renderer.snapshot(image => { this.scene.sys.textures.addBase64('s', image); }); }; Perhaps someone who has encountered such a task or has some ideas?

I tried using this but it ruins performance after calling createMiniMap. Is there any better solutions for creating a minimap?

Hello, I'm currently developing a FPS and need a minimap. I thought it would be possible to render the scene with a different camera to a second canvas but found no solution. Then I thought an image from above would be enough but BABYLON.RenderTargetTexture can't handle a second camera? What would be the best solution for implementing a minimap in the game? Thanks for every answer, Simon

Just a quick post to let you know about a new Phaser.IO adventure game that went online on April 1st (no joke! ) The URL is http://www.fsmgame.com Synopsis In the game you play the italian pirate Al Dente, who is out on a Holy Quest, trying to find gold, rum and fabled relics. The game has a progressive Arrchievements system built in ("A" to toggle), where the players can track their progress towards the much-sought title of Master Pirate! Technical info It features a procedurally generated world, which is validated for playability using the astar.js library, until a valid world is created. There is a minimap as well, which shows more and more of the world as it is discovered It is possible to play the game using keyboard or mouse/finger clicks, making it usable for both mobile, tablets and desktops It is possible to toggle music on/off and fullscreen on/off I am working on a highscore list using localstorage. Later I will add an online highscore list, to make it possible to compete against friends Feedback and ideas/bug reports are very welcome! Kind regards - Jakob

Hey guys. Been working with phaser for a bit now, and i'm currently trying to make a minimap (overview of a fixed region in my current state). That said, there is not much documentation on how to do something like this, and I am still a newbie to phaser, so it's giving me hard time. Here are the links i<ve already read : -http://www.html5gamedevs.com/topic/14930-creating-a-mini-map-from-a-render-texture/ -http://www.html5gamedevs.com/topic/14182-creating-a-mini-map-in-phaser/ What I have tried is using a bitmap of the state's layer, and putting it in a square on the top right of my screen. Now, I am ok with the palcement, drawing, etc. I have a square with the texture inside it. The problem is, I can't get the good region to show inside the minimap. I have weird graphical glitches when I move, and it shows a 1:1 of the nearby background. Heres the snippet for the creation and update of my minimap MyGame.Hud.prototype.drawMinimap=function(){ if(this.miniMap){ this.miniMap.destroy(); } /// // Init vars /// var heightMax = 200; var widthMax = 200; /// // // /// if (this.miniMapBitmap == null) { this.miniMapBitmap = MyGame.game.add.bitmapData(widthMax, heightMax); this.miniMapBitmap.ctx.beginPath(); this.miniMapBitmap.ctx.rect(0, 0, widthMax, heightMax); this.miniMapBitmap.ctx.fill(); } else { var area = { x: 0 , y: 0 , width: 1200, height: 1200 } //testLayer is a state layer this.miniMapBitmap.copyRect(testLayer, area, 0, 0, 1); } this.miniMap = MyGame.game.add.sprite(MyGame.game.camera.width - 200, 0, this.miniMapBitmap); this.miniMap.fixedToCamera = true; This is called on player movement. Note that the area var is set to testing parameters, since I have no clue on what it should be (The other links didn't help) I'd love to have your more knowledgeable opinions on this! Thanks in advance

In the following PG the Minimap camera stay always under the Main Camera. If I switch the order how the cameras are added in the active cameras (line 30 <-> 31) the minimap appears over the main camera BUT the ONMOUSEOVER stop working (mouse over the red sphere) http://www.babylonjs-playground.com/#10VU59 Can the Mouse events work in both camera? What for are there lines? mm.renderingGroupId = 1;mm.layerMask = 1;

Hi guys, I missed you ) I have a new little problem, and I hope that you can help me. I have this example to support me: http://www.babylonjs-playground.com/#1OQMIG I want to create a minimap, but I don't know how to positionate it in front of scene map. The minimap is back of scene, in bottom-left. Thanks a lot.

Hi, I have tiles layer and I'm trying to make minimap from my layer like this: var minimap = game.add.sprite(100, 100, layer_walls.generateTexture()); minimap.scale.setTo(0.2); minimap.fixedToCamera = true; layer should hold a sprite but this sprite contain only part that is displayed right now (nothing that is outside camera) . how to get whole layer texture? I tryed to add layer_walls.renderSettings.enableScrollDelta=false; before but it doesn't helped.