Search the Community

Showing results for tags 'phaser3'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 196 results

  1. Hi! I'm working on a project where I have a Map scene. I remove and add this scene to the phaser game a lot because I have to populate map depending upon the data I provide to this scene. After updating the map many times, it just vanishes and doesn't render and it happens randomly. I'm creating some images and texts in the map scene that change depending upon the data I pass in Init function of the scene. this.game.scene.remove('map'); let map = new Map(); this.game.scene.add('map',map,isLoaderComplete,mapData); I'm also attaching a screen shot. Any help would be much appreciated, Thanks!
  2. Introduction I am a big fan of strongly typed programming languages, and a big fan of Phaser. So TypeScript was a no brainer for me. The thing about TypeScript and phaser for me was a bit of a learning curve in terms of project setup and configuration. The last thing I was using was a combination of gulp, browserify, watchify, and uglify. Plus, setting up a nodeJS server, in order to boot phaser in localhost, and furthermore, run the server in a cloud service, in my case, I used Heroku. This can be a little bit of a turn off for most users who just want to start building video games. This was not my case particularly, but I indeed wanted to get to a point of writing the least amount of code as possible for setting up a project. Even more if I'm just prototyping. The solution for all of the above, is ParcelJS. Installation First of all, of course you will need to install Node.js from https://nodejs.org/en/download/ or from your system's package manager. After that you will need to install the TypeScript and Parcel packages globally through npm. npm install -g typescript parcel-bundler Then we can create a folder for our project and initialize a node project mkdir MyNewGame cd MyNewGame npm init -y At this point we need to install the packages at project level npm install --save phaser npm install --save-dev typescript parcel-bundler Now we can fire up our text editor, in my case I'm using Visual Studio Code. I find it really lightweight, customizable and robust. code . Now we'll create a folder called 'src' and add two files to it: main.ts and index.html In main.ts we'll create an instance of a Phaser game, with it's config. import * as Phaser from "phaser"; const config: Phaser.Types.Core.GameConfig = { type: Phaser.AUTO, width: 800, height: 600, }; let game = new Phaser.Game(config); Then at index.html we'll add a basic html structure, and add a script tag with a source pointing directly to the main.ts file. Yes! We do not need to transpile the .ts file to .js! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My New Game</title> </head> <body> <script src="main.ts"></script> </body> </html> And believe it or not. You only have to go back to your terminal and point parcel to the index.html file. parcel .\src\index.html You should get the following response in your console If we open a web browser and access the localhost at the port printed in your console. We can see the Phaser black canvas rendered on the page. And if you open the developer tools you'll see Phaser 3 running, and no errors in the console. Just to have something to display on the screen we can add a quick text like so Create a new folder inside src called scenes, and create a new file called mainScene.ts export class MainScene extends Phaser.Scene { constructor() { super({ key: "MainScene" }); } create() { this.add.text(220, 150, "TITLE SCREEN", { fontSize: "48px", color: "red" }); } } Then modify your main.ts file config to use this new MainScene class import * as Phaser from "phaser"; import { MainScene } from "./scenes/mainScene"; const config: Phaser.Types.Core.GameConfig = { type: Phaser.AUTO, width: 800, height: 600, scene: MainScene }; let game = new Phaser.Game(config); Now you only have to save both files and parcel will detect the changes, re-transpile and re-bundle everything, and even refresh your browser. That's it for this first part. Covering mostly setup. For the next parts I will explore an easy approach to multiplayer online with Google Firebase, with zero server-side code, and automatic deployment alongside source control in GitHub. I really hope this is helpful for anyone, I would love to hear about your experience with bundlers, and what are your recipes of choice, and if you find this to be a good choice Take care everyone!
  3. I want to deploy my game to Android through Apache Cordova, so I need buttons on screen for movement. I have tried it doing and almost succeeded. I am using Phaser 3.24.0 and Arcade Physics. My independent move function: function move(dir) { if (dir == "left") { this.player.setVelocityX(-100); this.player.anims.play('move', true); this.player.flipX = true; } else if (dir == "right") { this.player.setVelocityX(100); this.player.anims.play('move', true); } else { this.player.setVelocityX(0); this.player.anims.play('idle', true); } } And the update function : function update() { if (cursors.left.isDown) { move("left"); } else if (cursors.right.isDown) { move("right"); } else { move(); } this.leftArrow.on("pointerdown", function() { move("left"); }); this.rightArrow.on("pointerdown", function() { move("right"); }); } The keyboard function works very well, and when I press the button (sprites) it moves for just a few pixels and stops. What can be done to achieve the desired effect?
  4. I’m trying to make a game with a rocket ship navigating in a cave. The cave is broken up into 400x400 big tiles that’s combined to form a bigger cave. They all have physics-maps from “PhysicsEditor” that seems to work correctly. My tileclass: export default class Tile extends Phaser.Physics.Matter.Sprite { constructor(scene, x, y, sprite, phymap) { super(scene.matter.world, x, y, sprite, 0, { shape: phymap }); this.setStatic(true); this.setBounce(0.05); scene.add.existing(this); } } And these are added in game.js: tilemap[1][0] = new Tile(this, 0, 0, 'ground', tile_body.ground) tilemap[0][0] = new Tile(this, -400, 0, 'bottom-left', tile_body.bottom_left) tilemap[0][1] = new Tile(this, -400, -400, 'vertical', tile_body.vertical) But the tiles are all over the place, if I set them all on position (0, 0) you can see it more clearly: Any ideas to what I am doing wrong? I thought all would be on top of each other if created at position (0, 0) with the same height and width?
  5. Doctor Simon's Time Crash (Download in Google Play) Doctor Simon's Time Machine has crashed and now he is stuck in a time loop! You're his only hope to come back to the present. Memorize the shapes and colors of the combinations and click the buttons on the correct order to break the loops. Travel through time and discover new ages and backgrounds. Play with special features and bonus and unlock all the rewards to complete the game. I developed this game for Ludum Dare, a JAM event in which you have to create a game from scratch in 72 hours or less. In this case, the selected theme was 'Stuck in a loop', a tricky one. I used Phaser 3 for the coding and photoshop for designing characters, backgrounds, buttons and bars. It's my fifth game uploaded to the Google Play Store, with my Game Studio, Funsmith. All of them developed with Phaser. Here's the Google Play link to download in Android devices: https://play.google.com/store/apps/details?id=es.timecrash.app If you have iOS or you want to try the game but not download it in your phone, here's a HTML link. But please, remember, if you like it, download it! http://gonzalolhm.es/doctorSimonTimeCrash/
  6. //In the following phaser programme a player is shown which can be moved using the arrow keys. //The platforms contains some pictures above them, when the player collides with any image, //Scene changes and the corresponding video plays on the new scene. //Assets used are 1 image for background, 1 for platform, 3 for interaction with player, //1 player sprite sheet and 3 videos. //We will create the first scene GameScene1 var GameScene1 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene1 () { Phaser.Scene.call(this, { key: 'GameScene1' }); }, preload: function(){ //We will load all the images and spritesheet here this.load.image('background', 'assets/sky.png'); this.load.image('ground', 'assets/platform1.png'); this.load.image('img1', 'assets/pet.jpg'); this.load.image('img2', 'assets/eye.png'); this.load.image('img3', 'assets/cupcake.png'); //Make sure to get the frameWidth and framHeight of the sprits in the spritesheet accurate this.load.spritesheet('player', 'assets/reddude.png', { frameWidth: 64, frameHeight: 64 }); }, //Preload function ends here create: function(){ //We added the images and sprites //We added physics component to the images such that we can detect collision this.background = this.add.tileSprite(0, 0, config.width, config.height, 'background').setScale(2); this.img1 = this.physics.add.image(80, 130, 'pets').setScale(0.1); this.img2 = this.physics.add.image(750, 100, 'eye').setScale(0.08); this.img3 = this.physics.add.image(650, 300, 'cupcake').setScale(0.08); //We create a variable for platforms //We used StaticGroup as we dont want the platforms to move on appling physical force platforms = this.physics.add.staticGroup(); platforms.create(425, 570, 'ground').setScale(2.2).refreshBody(); platforms.create(550, 400, 'ground'); platforms.create(50, 250, 'ground'); platforms.create(700, 230, 'ground'); //We will add the player sprite as this.player to make it more accessible //We will add a little bounce and gravity to the player to make it jump and fall down //We have added world bounds such that player won't be able to leave the bounds this.player = this.physics.add.sprite(100,450, 'player'); this.player.setBounce(0.2).setGravityY(300); this.player.setCollideWorldBounds(true); //We have add the collider between the platforms and the player this.physics.add.collider(this.player, platforms); //We will add text here to provide some information to the payer txt = this.add.text(10,570, 'Click on image to load video, use arrow keys to move player'); cursors = this.input.keyboard.createCursorKeys(); //We will add the animations here this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('player', { start: 4, end: 7 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('player', { start: 8, end: 11 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'turn', frames: [ { key: 'player', frame: 0 } ], frameRate: 20 }); }, //Create function ends here update: function(){ //Update function is called every frame //Here using the cursor input created in the create function we can assign movement of the player to different arrow keys if (cursors.left.isDown) { this.player.setVelocityX(-160); this.player.anims.play('left', true); } else if (cursors.right.isDown) { this.player.setVelocityX(160); this.player.anims.play('right', true); } else { this.player.setVelocityX(0); this.player.anims.play('turn'); } if (cursors.up.isDown && this.player.body.touching.down) { this.player.setVelocityY(-330); } //This is the function that detects collision between player and the images //If the collision is true it implement the function which in this case is scene change this.physics.world.collide(this.player, this.img1, function(){ game.scene.start('GameScene2'); }); this.physics.world.collide(this.player, this.img2, function(){ game.scene.start('GameScene3'); }); this.physics.world.collide(this.player, this.img3, function(){ game.scene.start('GameScene4'); }); }, // Update function ends here }); //GameScene1 ends here //We will create the second scene GameScene2 var GameScene2 = new Phaser.Class( { Extends: Phaser.Scene, initialize: function GameScene(){ Phaser.Scene.call(this, {key: 'GameScene2' }); }, preload: function(){ //We will load the image and video here this.load.image('background', 'assets/blackbg.jpg'); this.load.video('dogvid', 'assets/dogbanana.mp4'); }, //Preload function ends here create: function(){ //We added the image and text this.background = this.add.tileSprite(0, 0, config.width, config.height, 'background').setScale(2); txt2 = this.add.text(config.width - 200 ,0 , 'Go back').setScale(2); txt2.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); //We will assign the video (dogvid) to the variable video var video = this.add.video(config.width/2, config.height/2, 'dogvid'); //This plays the video as soon as the scene is loaded video.play(true); }, //Create function ends here update:function(){ }, }); //GameScene2 ends here //We will create the third scene GameScene3 var GameScene3 = new Phaser.Class( { Extends: Phaser.Scene, initialize: function GameScene(){ Phaser.Scene.call(this, {key: 'GameScene3' }); }, preload: function(){ //We will load the image and video here this.load.image('background', 'assets/blackbg.jpg'); this.load.video('eyevid', 'assets/eye.mp4'); }, // Preload function ends here create: function(){ //We added the image and text this.background = this.add.image(400, 300, 'background').setScale(2); txt2 = this.add.text(config.width - 200 ,0 , 'Go back').setScale(2); txt2.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); //We will assign the video (eyevid) to the variable video var video = this.add.video(config.width/2, config.height/2, 'eyevid'); //This plays the video as soon as the scene is loaded video.play(true); }, // Create function ends here update:function(){ }, }); //GameScene3 ends here //We will create the fourth scene GameScene4 var GameScene4 = new Phaser.Class( { Extends: Phaser.Scene, initialize: function GameScene(){ Phaser.Scene.call(this, {key: 'GameScene4' }); }, preload: function(){ //We will load the image and video here this.load.image('background', 'assets/blackbg.jpg'); this.load.video('cupcakevid', 'assets/cupake.mp4'); }, //Preload function ends here create: function(){ //We added the image and text this.background = this.add.image(400, 300, 'background').setScale(2); txt2 = this.add.text(config.width - 200 ,0 , 'Go back').setScale(2); txt2.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); //We will assign the video (cupcakevid) to the variable video var video = this.add.video(config.width/2, config.height/2, 'cupcakevid'); //This plays the video as soon as the scene is loaded video.play(true); }, // Create function ends here update:function(){ }, }); //GameScene4 ends here //We will set the configuration of the game here var config = { type: Phaser.AUTO, width: 850, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 0 }, debug: false } }, scene: [GameScene1,GameScene2,GameScene3,GameScene4] }; var game = new Phaser.Game(config);
  7. //Using tweens and particles to simulate the smokey emissions of a rocket in Phaser 3. var config = { width: 1280, height: 720, type: Phaser.AUTO, autoCenter: Phaser.Scale.CENTER_BOTH, physics: { default: 'arcade', }, //We us the default arcade physics game engine. scene: { preload: preload, create: create, update: update } }; var player; var cursors; var smoke; var game = new Phaser.Game(config); function preload () { this.load.image('bg', 'assets/space.jpg'); this.load.image('player', 'assets/ship.png'); this.load.image('smoke', 'assets/smoke.png'); } function create () { bg = this.add.image(0, 0, 'bg'); bg.setScale(1.35); cursors = this.input.keyboard.createCursorKeys(); player = this.physics.add.image(400, 300, 'player'); player.setScale(0.2); player.setCollideWorldBounds(true); smoke = this.add.particles('smoke'); var emitter = smoke.createEmitter({ speed: 100, scale: { start: 0, end: 1 }, blendMode: 'ADD' }); emitter.startFollow(player, 0, 80); emitter.setScale(0.1); emitter.setGravityY(20000); emitter.flow(1, 5); //The smoke effect is created using the emitter var tween = this.tweens.add({ targets: emitter, loop:-1, }); tween.play(); } //The rocket can fly up,down,left and right using arrow keys. function update () { player.setVelocity(0); if (cursors.left.isDown) { player.setVelocityX(-500); } else if (cursors.right.isDown) { player.setVelocityX(500); } if (cursors.up.isDown) { player.setVelocityY(-500); } else if (cursors.down.isDown) { player.setVelocityY(500); } }
  8. //Here is a template for scenes in Phaser3. //This can be used to ease the development of Phaser 3 games. New scenes can be added in a similar manner and existing scenes can be removed easily. //For any changes in the number of scenes do not forget to make appropriate changes in the scene:[ ] in the config settings at the end of the code. //Each scene is labelled with corresponding scene number. //The scenes can be switched to the next scene using the next button. //The main menu button can bring you back to GameScene1 from any other page. //Each Gamescene has 4 functions. // -The GameScene function calls the scene. // -The preload function is where you load all the media. // -The create function can be used to call items and events when the scene is invoked. // -The update function calls the methods inside it once per frame. var mainbtn; var GameScene1 = new Phaser.Class({ //The scene is noted. Extends: Phaser.Scene, initialize: function GameScene1 () { //GameScene1 is called Phaser.Scene.call(this, { key: 'GameScene1' }); }, preload: function () { //preload media for GameScene1 here }, create: function () { var gs = this.add.text(500,500, 'GameScene1'); var txt1 = this.add.text(400,300, 'next'); txt1.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene2'); }); }, update:function(){ } }); //create a scene with class var GameScene2 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene2' }); }, preload: function () { //preload media for GameScene2 here }, create: function () { var gs2 = this.add.text(500,500, 'GameScene2'); mainbtn = this.add.text(400,50, 'main menu'); var txt2 = this.add.text(400,320, 'next'); txt2.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene3'); }); mainbtn.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); }, update:function(){ } }); var GameScene3 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene3' }); }, preload: function () { //preload media for GameScene3 here }, create: function () { var gs3 = this.add.text(500,500, 'GameScene3'); mainbtn = this.add.text(400,50, 'main menu'); var txt3 = this.add.text(400,340, 'next'); txt3.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene4'); }); mainbtn.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); }, update:function(){ } }); var GameScene4 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene4' }); }, preload: function () { //preload media for GameScene4 here }, create: function () { var gs4 = this.add.text(500,500, 'GameScene4'); mainbtn = this.add.text(400,50, 'main menu'); var mainbtn1 = this.add.text(400,360, 'next'); mainbtn1.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene5'); }); mainbtn.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); }, update:function(){ } }); var GameScene5 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene5' }); }, preload: function () { //preload media for GameScene5 here }, create: function () { var gs5 = this.add.text(500,500, 'GameScene5'); mainbtn = this.add.text(400,50, 'main menu'); var txt5 = this.add.text(400,380, 'next'); txt5.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene6'); }); mainbtn.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); }, update:function(){ } }); var GameScene6 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene6' }); }, preload: function () { //preload media for GameScene6 here }, create: function () { var gs6 = this.add.text(500,500, 'GameScene6'); mainbtn = this.add.text(400,50, 'main menu'); var txt6 = this.add.text(400,400, 'next'); txt6.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene7'); }); mainbtn.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); }, update:function(){ } }); var GameScene7 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene7' }); }, preload: function () { //preload media for GameScene7 here }, create: function () { var gs7 = this.add.text(500,500, 'GameScene7'); mainbtn = this.add.text(400,50, 'main menu'); var txt7 = this.add.text(400,420, 'next'); txt7.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene8'); }); mainbtn.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); }, update:function(){ } }); var GameScene8 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene8' }); }, preload: function () { //preload media for GameScene8 here }, create: function () { var gs8 = this.add.text(500,500, 'GameScene8'); mainbtn = this.add.text(400,50, 'main menu'); var txt8 = this.add.text(400,440, 'next'); txt8.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene9'); }); mainbtn.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); }, update:function(){ } }); var GameScene9 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene9' }); }, preload: function () { //preload media for GameScene9 here }, create: function () { var gs9 = this.add.text(500,500, 'GameScene9'); mainbtn = this.add.text(400,50, 'main menu'); var txt9 = this.add.text(400,460, 'next'); txt9.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene10'); }); mainbtn.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); }, update:function(){ } }); var GameScene10 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene10' }); }, preload: function () { //preload media for GameScene10 here }, create: function () { mainbtn = this.add.text(400,50, 'main menu'); var gs10 = this.add.text(500,500, 'GameScene10'); mainbtn.setInteractive().on('pointerdown', function() { this.scene.scene.start('GameScene1'); }); }, update:function(){ } }); //settings required to configure the game are as follows //the physics type applied is arcade. // the resolution is set to 800 x 600 pixels. // the background color is set to brick red. //Make changes in the scene[ ] attribute for any corresponding change in the number of scenes. var config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade' }, //set background color backgroundColor: 0x841F27 , scale: { //we place it in the middle of the page. autoCenter: Phaser.Scale.CENTER_BOTH }, //set scenes scene:[GameScene1,GameScene2,GameScene3,GameScene4,GameScene5,GameScene6,GameScene7,GameScene8,GameScene9,GameScene10] }; var game = new Phaser.Game(config);
  9. I made a small game for moving an image to a location where the use clicks. The game is set in space where the user is controlling a rocket The catch to this game is the place the user clicks, the rocket as well as the asteroid moves. So, the user has to avoid the asteroid and keep moving. There are two scenes in this game. Scene 1- Here is the main game In preload, we load 2 images this.load.image('Ship', 'ship.png'); this.load.image('asteroid', 'asteroid.png'); In create, we add these images to the scene source1 = this.physics.add.image(100, 300, 'Ship'); source2 = this.physics.add.image(250, 250, 'asteroid'); In update function, we take the input from the cursor and give the position values to a variable. Then we move the images to that position and also check if they collide or not. If they do collide then we switch to scene 2. this.input.on('pointerdown', function (pointer) { target.x = pointer.x; target.y = pointer.y; target1.x = pointer.x-10; target1.y = pointer.y-20; this.physics.moveToObject(source1, target, 200); this.physics.moveToObject(source2, target1, 50); }, this); this.physics.world.collide(source1, source2, function () { source1.setVelocity(0); source2.destroy(); console.log('hit?'); this.scene.start('SceneB'); }); Scene 2- Scene 2 is just a scene with an image of "You Died". preload () { this.load.image('died', 'died.png');} create () { this.add.image(500,200,'died');}
  10. //Flap zone The code creates a square-shaped zone and when our game object crosses the zone, the zone gives an indication by changing its color. var config = { type: Phaser.AUTO, width: 800, height: 600, parent: ‘phaser-example’, physics: { default: ‘arcade’, arcade: { debug: true, gravity: { y: 200 } } }, scene: { preload: preload, create: create, update: update } }; var zone; //declare variable new Phaser.Game(config); function preload () { this.load.image(‘block’, ‘assets/sprites/block.png’); //block image } function create () //zone creation { zone = this.add.zone(300, 200).setSize(200, 200); this.physics.world.enable(zone); zone.body.setAllowGravity(false); zone.body.moves = false; var group = this.physics.add.group({ key: 'block', frameQuantity: 4, bounceX: 1, **//box bouncing** bounceY: 1, collideWorldBounds: true, velocityX: 120, velocityY: 60 }); this.physics.add.overlap(group, zone); } function update () //when the box will fully be captured in the zone then the color of the zone will change. { zone.body.debugBodyColor = zone.body.touching.none ? 0x00ffff : 0xffff00; }
  11. // In this game, the user moves around the map as a Mummy and has to go towards the pumpkin // to proceed to the next level, in this example I have showcased Animation, Scene change and // Collision in Phaser 3. // creating Game Scene 1 var GameScene1 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene1 () { Phaser.Scene.call(this, { key: 'GameScene1' }); }, // In the preload function, we load the objects from either from the web server or the local // directories of the user. preload: function () { this.load.spritesheet('Mummy', 'mummy.png', {frameWidth: 24, frameHeight:32, endFrame: 12}); this.load.image('Room1', 's1.png'); this.load.image('Room2', 's2.jpg'); this.load.image('Pumpkin', 'pumpkin.png'); }, // in this function we are instantiating objects as well as defining the animation // and associating it to different keyboard keys. create: function () { ground = this.add.sprite(390, 300, 'Room1'); ground.setScale(1.5); cursors = this.input.keyboard.createCursorKeys(); this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('Mummy', { start: 3, end: 5 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('Mummy', { start: 9, end: 11 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'up', frames: this.anims.generateFrameNumbers('Mummy', { start: 6, end: 8 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'down', frames: this.anims.generateFrameNumbers('Mummy', { start: 0, end: 2 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'pause', frames: this.anims.generateFrameNumbers('Mummy', { start: 6, end: 6 }), frameRate: 3, repeat: -1 }); Mummy = this.physics.add.sprite(200, 100, 'Mummy'); Pumpkin = this.physics.add.sprite(710, 510, 'Pumpkin'); Pumpkin.setScale(0.06); Mummy.setScale(5); }, // Update function is used to detect user input and based on that move the player and // play the assigned animation of the key. update: function(){ if (cursors.right.isDown) { if (Mummy.x !=790) { Mummy.anims.play('left', true); Mummy.x += 2; } } else if (cursors.left.isDown) { if (Mummy.x !=20) { Mummy.anims.play('right', true); Mummy.x -= 2; } } else if (cursors.up.isDown) { if (Mummy.y !=30) { Mummy.anims.play('down', true); Mummy.y -= 2; } } else if (cursors.down.isDown) { if (Mummy.y !=570) { Mummy.anims.play('up', true); Mummy.y += 2; } } else { Mummy.anims.play('pause', true); } // destroying the enemy on Collision this.physics.world.collide(Mummy, Pumpkin, function () { Pumpkin.destroy(); console.log('hit?'); this.scene.scene.start('GameScene2'); this.scene.scene.pause('GameScene1'); }); } }); //create a scene with class var GameScene2 = new Phaser.Class({ Extends: Phaser.Scene, initialize: function GameScene () { Phaser.Scene.call(this, { key: 'GameScene2' }); }, // in this function we are instantiating objects as well as defining the animation // and associating it to different keyboard keys. create: function () { ground = this.add.sprite(390, 300, 'Room2'); ground.setScale(0.5, 0.7); cursors = this.input.keyboard.createCursorKeys(); this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('Mummy', { start: 3, end: 5 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('Mummy', { start: 9, end: 11 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'up', frames: this.anims.generateFrameNumbers('Mummy', { start: 6, end: 8 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'down', frames: this.anims.generateFrameNumbers('Mummy', { start: 0, end: 2 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'pause', frames: this.anims.generateFrameNumbers('Mummy', { start: 6, end: 6 }), frameRate: 3, repeat: -1 }); Mummy = this.physics.add.sprite(150, 200, 'Mummy'); Pumpkin = this.physics.add.sprite(710, 510, 'Pumpkin'); Pumpkin.setScale(0.04); Mummy.setScale(3.2); }, // Update function is used to detect user input and based on that move the player and // play the assigned animation of the key. update: function(){ if (cursors.right.isDown) { if (Mummy.x !=790) { Mummy.anims.play('left', true); Mummy.x += 2; } } else if (cursors.left.isDown) { if (Mummy.x !=20) { Mummy.anims.play('right', true); Mummy.x -= 2; } } else if (cursors.up.isDown) { if (Mummy.y !=30) { Mummy.anims.play('down', true); Mummy.y -= 2; } } else if (cursors.down.isDown) { if (Mummy.y !=570) { Mummy.anims.play('up', true); Mummy.y += 2; } } else { Mummy.anims.play('pause', true); } // destroying the enemy on Collision this.physics.world.collide(Mummy, Pumpkin, function () { Pumpkin.destroy(); console.log('hit?'); this.scene.scene.start('GameScene1'); this.scene.scene.pause('GameScene2'); }); } }); //settings required to configure the game var config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: 10, } }, //set background color backgroundColor: 0x8080, scale: { //we place it in the middle of the page. autoCenter: Phaser.Scale.CENTER_BOTH }, // defining the number / name of the scenes scene:[GameScene1, GameScene2] }; var game = new Phaser.Game(config);
  12. sanojian

    LoopyDraw

    I made this collaborative drawing game for Ludum Dare 47 in order to learn Phaser 3. LoopyDraw Entry Page If you try it, please keep the drawings relatively family-friendly. There are a lot of young kids playing it.
  13. How about Internet users? I am new to the forum and I have a very small javascript tour, perhaps my problem was that as soon as I entered javascript a friend was teaching me React. Sorry for my bad English, I'm Spanish-speaking. I suppose that many have already touched on this topic but I want you to clarify my doubt that if you can or not, to start with phaser I have more or less a week I did a lot of practices and everything was fine, but when I decided to create a platform project myself Example they have in phaser but in es6 and typescript I wanted to implement the philosophy of react separating the project into pieces in such a way that the code can be reusable, for example, if I need another button, I simply reuse the component that generates the button. All good so far, my question is the following I want to create a class of "Player", if I am not mistaken more or less this is the code to implement. class Character extends Phaser.GameObjects.Sprite { constructor(config) { super(config.scene, config.x, config.y, "character"); //keep a reference to the scene this.scene=config.scene; config.scene.add.existing(this); What I want is to know if I can place the image loads (preload) within that code, and the same movement mechanics (update) because what I have even understood is that for each scene it seems that you have to reload the images and as I said my idea is to reuse the codes creating class, I do not know if this is the correct idea, but I have been trying and I do not achieve anything, I have reviewed the example and I only see that they create the class alone without loading images and mechanics on the outside and they put everything in a file making it tedious, I repeat the attempt to implement the react philosophy and in order not to waste much time I ask them if I can achieve such a thing. In theory I want to achieve something like this, "WARNINGi" is just an assumption I know the code is wrong. Really thank you for your time I hope you can clarify my doubts and I hope you are well. :) class Character extends Phaser.GameObjects.Sprite { constructor(config) { super(config.scene, config.x, config.y, "character"); //keep a reference to the scene this.scene=config.scene; config.scene.add.existing(this); } // load images preload () { this.load.image('character', 'assets/sprites/character.png'); } update () { // player movement mechanics } } export default Character;
  14. Hello, I'm looking at creating a fully responsive Phaser 3 game that would work for mobile (landscape/portrait) and desktop. I've been working with game development for a couple of years and I have a total of 7 years of programming experience. I recently started creating a game in Phaser 3 (5 months ago) and found it difficult to scale the game assets if you want the canvas to fit the entire parent div (which happens to be 100% window height and width, without using fullscreen). I've attached an image that somewhat describes what I'm trying to achieve. If the blue rectangle was the canvas I could be using the Phaser.Scale.FIT property and then positioned the canvas using a parent div. But, this is not what I need. My problem is with mobile portrait, I need the red area to also be canvas, whilst the blue area is the game (as it would look on landscape / desktop). This way particle effects or score could be drawn in the red area instead. The dream would be that I could make the game camera act the same way inside the canvas, as the canvas can inside a parent div. But I've only found the setZoom function on cameras that doesn't seem to do the job. Is there anyone of you that can recommend any resources (books, forums) that I can read to get a better understanding of how to scale a game in Phaser 3? Or perhaps have some tips on how assets/game can be scaled this way inside a canvas? I found some examples from phaser 2 and 3 that I've looked at for inspiration before deciding to create this post: https://www.html5gamedevs.com/topic/5949-solution-scaling-for-multiple-devicesresolution-and-screens/ https://www.html5gamedevs.com/topic/21639-phaser-scale-manager-show-all-not-working/ https://www.html5gamedevs.com/topic/33206-scalemanagershow_all Important notes: The game assets are designed based on canvas size 1280x720. The canvas has a transparent background, so it's really only important to make assets fit the blue area and without being stretched.
  15. Hi all, Sorry if this is a very newb question... I have created a scene that uses a class instance. Within the class that is called, I have a constructor method that renders an image to use. The constructor method looks like this: export default class Gamepiece { constructor(scene){this.render = (x,y,sprite) => {let gp = scene.add.image(x,y,sprite).setScale(1.0,1.0).setDepth(100).setInteractive(); scene.input.setDraggable(gp);return gp; }} I call the class from a scene, and the returned class instance works fine until I try to apply drag events to it. Here is the working call to the class: let testObject = new Gamepiece(this); testObject.render(boardLayout[0].x,boardLayout[0].y,'gamePiece'); Unfortunately, it errors if I attempt to assign drag events to it. Here is the snippet for assigning the drag event: testObject.on('dragstart',function(){ console.log("dragstart fired"); }); The error is 'Uncaught TypeError: testObject.on is not a function' I see that an object that works normally with drag events is a graphics object. When I export the object to console, the object I am creating looks like this: Object{ render: function render(x, y, sprite) <prototype>: {…} circlesAvailable: circlesAvailable(gamePiece, connections) length: 2 name: "circlesAvailable" <prototype>: function () constructor: class Gamepiece { constructor(scene) } moveGamePiece: function moveGamePiece() <prototype> How (or is it possible) to reference this object to attach drag events to it? I've dug around, but can't seem to make it work. I'd assume the reference might be something like: testObject.prototype.graphics.on(){etc}. But I'm stuck. Feel free to suggest more efficient/practical ways to approach this. Thanks for any help you can provide! -Bruce
  16. Hi everyone! Before anything I wasn't sure if this was the correct place to post this, please moderators move it as you consider if this should go to some other place like Projects and Demos. https://github.com/damian-pastorini/dwdgame Also, please consider that this is my first implementation ever! I've never used neither Node.js, even less Parcel, Colyseus or Phaser, my world before this first incursion in game development was all about PHP and Magento, so that should give you an idea from where I'm coming. This quite awful but working example took me 75hs, including the time I've used for research and for decide which platform use for the server and the client. After all the research, Node + Colyseus and Phaser 3 looked as the better start point since I was familiar with JS and HTML of course but had zero knowledge about Unity (the other option I would like to use), but I've prefered make the learn curve not so slow. So.... This is a really simple base MMORPG game created based on the Colyseus samples: https://github.com/gamestdio/colyseus-examples And on the Phaser 3 implementation from Jacky Rusly: https://github.com/jackyrusly/jrgame As you will see I've considerable modified how the jrgame was interacting with Socket.io in order to make it works as how the Colyseus example was working, I've thought that was the better way to do it (follow up on server ready samples and break apart the client sorry Jacky!) The game basics are login through DB, loader, scene change, players sync, but nothing like chat, items, or attacks was implemented here (so far). Here's the link to the repo: https://github.com/damian-pastorini/dwdgame Please feel free to create any tickets or pull requests for questions, fixes or improvements, I would love to get good feedback! I don't have a public link to show it yet but I'm planning to create a dev server soon (for now you will need to install it and run it to see it), at the end it will look like: https://jrgame.herokuapp.com But you will see the login screen first which in the server side will connect to the DB and all the players sync was done with Colyseus. I saw comments from people looking for Colyseus integrated with a DB engine (in this case I've chosen MySQL), so at least that part should be useful. I really hope this help more than one person, maybe someone like me who would love to get this as starting point. Best, Damian Reply
  17. I made a game in a week for a game jam with Phaser 3 and React: itch.io's page: https://ldd.itch.io/re-wand Youtube let's play (not by me):
  18. Hi, I'm trying to develop a game in Phaser 3 where player is able to select a stage (basically a scene) of their choice. I want this selection menu to be like a map. This is how SVG file looks like. <svg> <g> <path id="land" class="land" d="M138.114,402.543l0.683,1.604l-1.204.(truncated)"> <path id="ice" class="ice" d="M238.114,402.543l0.683,1.604l-1.204..........."> <path id="water" class="water" d="M538.114,402.543l0.683,1.604l-1.204........"> </g> </svg> How do I add event to each of these path ? They all are inside one svg file. Normally, in vanilla JS we could select an element by id or class. If I load entire image at once using load.svg() adding event affects entire svg image. I can't tell which path was clicked. After more digging, I thought of drawing the map using Phasers graphics.fillPoints(). That way I could have reference to each area I draw. But again fillpoints expects arguments to be an array of Geom.Point and SVG's path attribute has different format (d="M238.114,402.543l). So, I can't do this either. I appreciate any help or suggestions for achieving what I am trying to do.
  19. I am trying to get all the children of a container displayed inside a zone. var container = this.add.container(200, 200); var sprite0 = this.add.sprite(0, 0, 'box'); var sprite1 = this.add.sprite(0, 100, 'box'); container.add([ sprite0, sprite1 ]); var graphics = this.add.graphics(); var color = 0x00ffff; var thickness = 2; var alpha = 1; graphics.lineStyle(thickness, color, alpha); graphics.strokeRect(32, 32, 256, 256); graphics.fillStyle(color, 0); graphics.fillRect(32, 32, 256, 256); container.mask = new Phaser.Display.Masks.GeometryMask(this, graphics); However when they are outside and overlapping is seems like they are blending on each other? How should I proceed?
  20. Hi all, I'm making a shmup game at the moment. I'm trying to animate player's diagonal movements but can't get it to work. Any help you could offer would be greatly appreciated. First, I created the animation: this.anims.create({ key: 'rightUp', frames: this.anims.generateFrameNumbers('player', { start: 30, end: 33 }), frameRate: 10, repeat: -1 }); then when the player wants to go up&&right: if(this.keyLeft.isDown&&this.keyUp.isDown){ this.player.anims.play('rightUp', true); var isPaused = this.player.anims.currentAnim; var progress = this.player.anims.getProgress(); // console.log(isPaused) console.log(progress) } Everything else works perfectly fine (e.g. left, right, up, and down). My console just returns 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 when I press the up and left arrow at the same time. In contrast for any other motion, it returns the frame number it's playing. Thank you in advance, Bong
  21. I was wondering how I could animate my player and the other players once they start moving. I tried to create an event called "animate player" in my server file like this: socket.on('playerMovement', function (movementData) { players[socket.id].x = movementData.x players[socket.id].y = movementData.y players[socket.id].playerFrame = movementData.playerFrame socket.broadcast.emit('playerMoved', players[socket.id]); socket.emit('animatePlayer', players[socket.id], this.anims) }); Then in my phaser scene file I have my animations defined in the create function: this.anims.create({ key: "up", frames: this.anims.generateFrameNumbers("player", {start: 12, end: 15}), frameRate: this.frameRate, repeat: -1, // Infinite loop }); this.anims.create({ key: "left", frames: this.anims.generateFrameNumbers("player", {start: 4, end: 7}), frameRate: this.frameRate, repeat: -1, // Infinite loop }); this.anims.create({ key: "right", frames: this.anims.generateFrameNumbers("player", {start: 8, end: 11}), repeat: -1, frameRate: this.frameRate, // Infinite loop }); Finally in the update function in the same phaser scene file I handle the "animate player" event that is back in the server file: this.socket.on('animatePlayer', function (playerInfo) { this.playerObj.anims.play("left") }); The console returns "Uncaught TypeError: Cannot read property 'anims' of undefined". I have my playerObj defined in add new player, which is also a function that is called from the server, when a player joins: addNewPlayer(self, playerInfo) { this.numberOfPlayers++; this.playerObj = this.physics.add.sprite(playerInfo.x, playerInfo.y, "player") } Any help at all would be greatly appreciated.
  22. It is my first time to use phaser 3 for developing game , I have a weird issue when i run the project from brackets it run smoothly without any error but when i try to open the project from the html page direct it dies not open and this errors appears on console , can anyone help me please ??
  23. Babel Tower is an incremental idle clicker game where you manage the building of the Tower of Babel. You can mine stone, process the stone to create bricks, chop trees, build crane, sell resources, even invite tourists to your tower, to make money! The game is on ArmorGames: http://armor.ag/BabelTower (rating 65%, 50k plays) The game was made with Phaser 3.19
  24. I am new to coding in Phaser 3 and I was told that the best way of learning was to look up the examples. I currently do not have the speed to run them online, so need to have a local copy. That's why I was wondering how big the examples are.
  25. Hi, i'm new to phaser 3 and would have some clarifying answers on the Calss Pointer here: in particular: I want to create an Pointer instance using the following code: var gun = new Pointer(manager,0); I know that the "manager" argument refers to a InputManager object, but i don't understand how to create/configure it, i tried this: var manager = new InputManager(this, this); but obtain the following error log: ReferenceError: InputManager is not defined Can someone help me on this problem? Thanks!