muh2k4 Posted April 28, 2017 Share Posted April 28, 2017 Hello fellow developers, I am new to the Game Development world, but I want to work on a small game. Basically the game idea is based on "Tap Tap Dash" like games. I want a constantly running player in a Top Down game perspective. For a better understanding check this link out: Currently I have managed to import a level from "Tiled" and move a player along the level including changing the direction. Therefore I set the camera to follow the player sprite. But now I have problems with the rotation of the camera. At some point I read that you cannot rotate the camera, but only the world itself. If I do this, the game is rotate on the Point (0,0). A 90 degree turn totally makes the world disappear. Can you help me out how I rotate the camera in a top view game? I also tried to rotate the tiledlayer and than reposition it. But it had no effect... Also do you know of someone who has implemented a game like this in Phaser with the camera rotation or do you have some basic advice for me how to approach this game? I find very little information about this type of games for Phaser... Maybe I should use another Framework for this? I really appreciate any kind of help Link to comment Share on other sites More sharing options...
spencerTL Posted April 30, 2017 Share Posted April 30, 2017 You can change the coordinate around which the world rotates by setting world.pivot. Would this help? Link to comment Share on other sites More sharing options...
muh2k4 Posted May 1, 2017 Author Share Posted May 1, 2017 Hello spencerTL, Thanks for this idea! I tried to apply it like this: this.game.world.pivot = new Phaser.Point(this.player.x, this.player.y) this.game.world.rotation = Math.PI / 2; But something weird happens: I should mention that I am using Tiledmaps for the level design (Water + Road & Arrows) and Sprites for the coins (generated from Objects from Tiled). Maybe I am missing something essential... Also when I try to zoom into the world with this.world.scale = new Phaser.Point(2,2) The camera get's totally lost at the top left of the game. Thanks for your help so far. I would really appreciate further suggestions. I am a little bit lost here Link to comment Share on other sites More sharing options...
samid737 Posted May 1, 2017 Share Posted May 1, 2017 It takes a bit more effort to achieve this using groups. I think this example might help you out: http://plnkr.co/edit/ZwJCh60p7RNlnyBOdOAV?p=preview It might be more difficult to apply to your case depending on how you setup your walking paths, but you should be able modify your game to work just like the example. a post about this: Link to comment Share on other sites More sharing options...
muh2k4 Posted May 1, 2017 Author Share Posted May 1, 2017 Thanks! This looks exactly like what I am looking for. http://plnkr.co/edit/ZwJCh60p7RNlnyBOdOAV?p=preview I will give it a try and let you know, if I succeeded Link to comment Share on other sites More sharing options...
muh2k4 Posted May 10, 2017 Author Share Posted May 10, 2017 samid737, I succeeded to rotate the world with your help. Thank you. The only problems I am having now is that the camera is not updating. Due to the rotation, it changes what of the level should be seen. But this areas stay black! (see screenshot). BUT what is really strange is that the coins (which are sprites generated from objects) are visible! Why is the tiledmap behaving differently? I tried to resize the world and stuff like that, but I am missing something again. Hopefully I can count on your help again. Thank you Link to comment Share on other sites More sharing options...
samid737 Posted May 11, 2017 Share Posted May 11, 2017 Thats not nice indeed, I overlooked the problem part of the post so it seems... Maybe someone knows a fix for this? Il try to look into it.. Link to comment Share on other sites More sharing options...
samme Posted May 11, 2017 Share Posted May 11, 2017 I think at the start you can expand the tilemap layer to cover the viewport even while rotated, something like var size = Math.ceil( Math.max(Math.SQRT2 * camera.view.width, Math.SQRT2 * camera.view.height) ); tilemapLayer.resize(size, size); samid737 1 Link to comment Share on other sites More sharing options...
Recommended Posts