issey Posted November 15, 2016 Share Posted November 15, 2016 Hi everyone! I'm new to Phaser (and HTML5 game development in general) I found this great tutorial on creating draggable maps with inertia: http://www.emanueleferonato.com/2016/01/18/how-to-create-a-html-draggable-and-scrollable-map-with-inertia-using-phaser-framework/ I am trying to apply the dragging effect to a group of sprites (a world map and a bunch of interactive sprites on top) -- so you'd be able to drag around the map and find things to collect. The tutorial has the dragging effect applied on just an image. I managed to create a group with the map and the sprites on top, so far everything works fine. My only issue is connecting the group back to the dragging effect. Basically, I'm a little confused about what this.scrollingMap represents syntax-wise, so when it comes to replacing this line with a group, I'm a little lost. this.scrollingMap = game.add.image(0, 0, "map"); Hopefully this is clear enough to understand! Thanks in advance! Link to comment Share on other sites More sharing options...
nazimboudeffa Posted November 16, 2016 Share Posted November 16, 2016 can you add some more code as i don't know this feature i'll wonder to have more code material to think on it also i have downloaded the code of the example and it doens't work Link to comment Share on other sites More sharing options...
issey Posted November 16, 2016 Author Share Posted November 16, 2016 Hi, Yeah, sure. Here's what I have so far: var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.image('map', 'assets/images/baseMap.png'); game.load.image('star', 'assets/images/star.png'); } function create() { // Creating the group world = game.add.group(); world.create(0, 0, 'map'); // Adding random sprites to it for (var i = 0; i < 10; i++) { world.create(game.world.randomX, game.world.randomY, 'star');} //This group works on its own. //I would like to link it to the dragging animation below "scrollingMap". //The Draggable Map from the tutorial // Adding the big map to scroll this.scrollingMap = game.add.image(0, 0, "map"); //<-- This is where I am having trouble changing from an image to a group. // map will accept inputs this.scrollingMap.inputEnabled = true; // map can be dragged this.scrollingMap.input.enableDrag(false); // custom property: we save map position this.scrollingMap.savedPosition = new Phaser.Point(this.scrollingMap.x, this.scrollingMap.y); // custom property: the map is not being dragged at the moment this.scrollingMap.isBeingDragged = false; // custom property: map is not moving (or is moving at no speed) this.scrollingMap.movingSpeed = 0; // map can be dragged only if it entirely remains into this rectangle this.scrollingMap.input.boundsRect = new Phaser.Rectangle(game.width - this.scrollingMap.width, game.height - this.scrollingMap.height, this.scrollingMap.width * 2 - game.width, this.scrollingMap.height * 2 - game.height); // when the player starts dragging... this.scrollingMap.events.onDragStart.add(function(){ this.scrollingMap.isBeingDragged = true; // set movingSpeed property to zero. This will stop moving the map // if the player wants to drag when it's already moving this.scrollingMap.movingSpeed = 0; }, this); // when the player stops dragging... this.scrollingMap.events.onDragStop.add(function(){ this.scrollingMap.isBeingDragged = false; }, this); } //End create function function update() { // if the map is being dragged... if(this.scrollingMap.isBeingDragged){ this.scrollingMap.savedPosition = new Phaser.Point(this.scrollingMap.x, this.scrollingMap.y); } // if the map is NOT being dragged... else{ // if the moving speed is greater than 1... if(this.scrollingMap.movingSpeed > 1){ this.scrollingMap.x += this.scrollingMap.movingSpeed * Math.cos(this.scrollingMap.movingangle); this.scrollingMap.y += this.scrollingMap.movingSpeed * Math.sin(this.scrollingMap.movingangle); if(this.scrollingMap.x < game.width - this.scrollingMap.width){ this.scrollingMap.x = game.width - this.scrollingMap.width; } if(this.scrollingMap.x > 0){ this.scrollingMap.x = 0; } if(this.scrollingMap.y < game.height - this.scrollingMap.height){ this.scrollingMap.y = game.height - this.scrollingMap.height; } if(this.scrollingMap.y > 0){ this.scrollingMap.y = 0; } this.scrollingMap.movingSpeed *= friction; // save current map position this.scrollingMap.savedPosition = new Phaser.Point(this.scrollingMap.x, this.scrollingMap.y); } // if the moving speed is less than 1... else{ var distance = this.scrollingMap.savedPosition.distance(this.scrollingMap.position); var angle = this.scrollingMap.savedPosition.angle(this.scrollingMap.position); if(distance > 4){ this.scrollingMap.movingSpeed = distance * speedMult; this.scrollingMap.movingangle = angle; } } } } nazimboudeffa 1 Link to comment Share on other sites More sharing options...
nazimboudeffa Posted November 16, 2016 Share Posted November 16, 2016 thank you, cool it's a little bit late here i'll take a look at it tomorrow because this question is really interesting issey 1 Link to comment Share on other sites More sharing options...
nazimboudeffa Posted November 16, 2016 Share Posted November 16, 2016 Hi, this tutorial seems to explain how to build an infinit scrolling world https://gamedevacademy.org/how-to-make-an-infinitely-scrolling-game-with-phaser/ and we can probably use this example to fix the problem https://phaser.io/examples/v2/world/move-around-world (but a t the moment there is an error loading the js file i've told the slack about it) btw, i am reading the code so there is two lines that are calling the same key world.create(0, 0, 'map'); and this.scrollingMap = game.add.image(0, 0, "map"); Link to comment Share on other sites More sharing options...
issey Posted November 28, 2016 Author Share Posted November 28, 2016 So after some time, I ended up finding the solution... First off, I removed all this.scrollingMap and changed them to scrollingMap to remove any confusion. Ended up still working perfectly. scrollingMap = game.add.image(0, 0, "map"); scrollingMap.anchor.set(0.05,0.5); scrollingMap.inputEnabled = true; [etc...] Next, Groups in Phaser don't seem to be able to have input working on elements together, only one at a time. So changing to something like wouldn't work: scrollingMap = game.add.group(); map = game.add.image(0, 0, "map"); scrollingMap.add(map); // The following line won't work scrollingMap.inputEnabled = true; I tried using the Align functions that Phaser offers... Until I ended up realising that you can actually nest sprites within other sprites like so: scrollingMap = game.add.image(0, 0, "map"); someSprite = game.add.image(100, 100, "sprite"); scrollingMap.addChild(someSprite); And voila! There's the solution, as simple as that. Note that you can also add groups as children: someGroup = game.add.group(); scrollingMap.addChild(someGroup); Found the solution here if anyone's curious: http://www.html5gamedevs.com/topic/7745-move-a-group-of-sprites-together-as-one-body/ Link to comment Share on other sites More sharing options...
Recommended Posts