issey

Hey everyone! Thought I'd share the first game I made. Made this for fun to share with friends, but since a bunch of you guys helped me out with questions in the forum, I thought I'd share it here too and spread some cheer (special thanks to the Phaser community!) It is still a work in progress as I update it by the day, with plenty of bugs here and there. But I thought I'd launch it anyway. I wanted to make an advent calendar type game counting down to Christmas, with fun facts revealed every day. I ended up turning it into a tour of Santa's Factory, to eavesdrop on little elves working, and added points and badges to collect. Tried to make it mobile friendly too! The plot is this: For the very first time, Santa’s Factory is opening its doors to the public, and YOU are one of the lucky few to get an exclusive tour and a firsthand elf training! Explore your surroundings as we unveil new rooms daily, and learn about the workings behind the jolliest time of the year. We’ll see if you have what it takes to work for the one and only, Santa! I'm still working on building a badge collection library to go through past saved cards, as well as an animated preloading screen. And fixing a bunch of things here and there. Would love to hear what you guys think, and if you have any advice! I'd love to hear you're guys' thoughts on the experience side of things - or even any ideas for the future! If they're simple enough, I could potentially add them before the countdown ends. Link to game: Santa Factory Game I am also posting screenshots regularly up on instagram if anyone's curious, with occasional behind the scenes stuff: Main account: https://www.instagram.com/trufffle_/ Behind the scenes stuff: https://www.instagram.com/isseymakes/ Happy soon-Christmas everyone!

Thanks!! I get how it works now!

Hi everyone! I'm looking to have sprites generated randomly within another sprite's bounds. I've seen examples of bounds used within sprites, like so for example (from this Phaser example): // Our sprite that will act as the drag bounds bounds = game.add.sprite(game.world.centerX, game.world.centerY, 'pic'); // And the sprite we'll drag sprite = game.add.sprite(300, 300, 'atari'); sprite.inputEnabled = true; sprite.input.enableDrag(); sprite.input.boundsSprite = bounds; However, I haven't seen this applied on a group of random sprites? And when I try this method on my group, it doesn't seem to work. Here is my code so far... I'm attempting to have the stars sprites randomly created within the room's image bounds. var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.image('star', 'assets/images/star.png'); game.load.image('room', 'assets/images/room.png'); } function create() { //*** The image I'd like to use for bounds room = game.add.image(210, 232, 'room') // Create random Star group starGroup = game.add.group(); // And add 3 sprites to it //** I'd like to have these sprites generated within the room's bounds only for (var i = 0; i < 3; i++) { starGroup.create(game.world.randomX, game.world.randomY, 'star'); } } Any help? Thanks!

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/

Hey thanks! That's exactly what the issue was. I didn't think of the global variable issue... Works perfectly now!

Hi there! I'm having a little issue with updating my game's score correctly. I set the score to += 10 on each click, but it gets stuck at 10. I also have my score displaying " score: [object Object]10 " instead of "score: 10". It probably has to do with how I added the score to the collectStar function? Here's my code: var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.image('star', 'assets/images/star.png'); } function create() { //Score var score = 0; localStorage.setItem("save", JSON.stringify(score)); console.log('Score: '+ localStorage.getItem("save")) var scoretext; scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '24px', fill: '#222' }); //Star Group starGroup = game.add.group(); for (var i = 0; i < 3; i++) {starGroup.create(game.world.randomX, game.world.randomY, 'star');} starGroup.setAll('inputEnabled', true); starGroup.setAll('input.useHandCursor', true); // Animate and destroy on star click starGroup.callAll('events.onInputDown.add', 'events.onInputDown', collectStar); } function collectStar (star, score) { // Add a timer before destroying star game.time.events.add(1000, star.destroy, star); // Add and update the score score += 10; scoreText.text = 'score: ' + score; localStorage.setItem("save", JSON.stringify(score)); console.log(localStorage.getItem("save")) } function update() {}

Thanks samme! Works like a charm. And thanks for taking the time to explain, I understand the issue better now. I ended up using game.time.events.add(2000, star.destroy, star); Cheers!

Hi everyone! I need a little help with understanding how to properly set timer functions. I'm new to javascript so I often run into syntax issues. I have a group ("starGroup") containing 10 "star" objects. When a user clicks on one of the group's "star" object, I'm hoping to have it tween before being destroyed. Everything seems to work properly up to the end of the tween, however I am having issues setting star.destroy until after the tween. I read in another post that we could use Phaser's timer for this instance, however my timer functions don't seem to be working. I get a return of: "Uncaught TypeError: Cannot read property 'destroy' of undefined(…)". A little help needed? Many thanks! Here's the code: var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.image('star', 'assets/images/star.png'); } function create() { //Create random Star group starGroup = game.add.group(); // And add 10 sprites to it for (var i = 0; i < 10; i++) {starGroup.create(game.world.randomX, game.world.randomY, 'star');} // Make them all input enabled starGroup.setAll('inputEnabled', true); starGroup.setAll('input.useHandCursor', true); // Call all in group starGroup.callAll('events.onInputDown.add', 'events.onInputDown', starClick); } function starClick (star) { starRemoveTweenA = game.add.tween(star.scale).to( { x:2, y:2 }, 800, "Elastic.easeOut"); starRemoveTweenB = game.add.tween(star.scale).to( { x:0, y:0 }, 800, "Elastic"); starRemoveTweenA.chain(starRemoveTweenB); starRemoveTweenA.start(); //star.destroy(); //Hiding this to set a timer instead //Setting a timer game.time.events.add(2000, functionDestroy, this); } function functionDestroy (star) { star.destroy(); // This is where the console is reporting an issue } function update() {}

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; } } } }

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!