Jump to content

Search the Community

Showing results for tags 'phaser3-typescript'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
    • Paid Promotion (Buy Banner)
  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
    • GameMonetize
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered
    • Marketplace (Sell Apps, Websites, Games)

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 4 results

  1. Hello everyone , im sorry for my english so im pretty new to phaser3 and i want to create educational coding game for kids using typescript ,the kid should drag the arrows and drag them into places and then hit the button run so i declared an array to stock every arrow (image) that he dropped and then when run is clicked, i itterate the array and in function of the image's name the sprite get animated my code looks like this : //paly is the run button // this.play.on('pointerdown', () => { for (var i = 0; i < array.length ; i++) { console.log(array); switch (array[i]) { case left: { this.player.setVelocityX(5); player.anims.play('left', true); break; } case right: { this.player.setVelocityX(5); player.anims.play('right', true); break; } } } } the images are stored but when i hit run the sprite is animated by the last animation like if my array is like this {'left','left','right'} just the right animation is getting excuted ,please im stuck help me !!!
  2. Hello, Is there a way to save actual map state, for example after moving player and boxes in Sokoban? I got my map in json file
  3. 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!
  4. // Scene { create: function() { // I add a group let titleGroup = this.add.group() // add something... let title = titleGroup.create(0, 100, 'title') let bird = titleGroup.create(100, 100, 'bird') // now I need adjust the group to appropriate position // compile Error! titleGroup.getChildren.forEach(child => { child.setPosition(50, 20) }) // comment last few lines! // ok~~ titleGroup.getChildren.forEach((child: Phaser.GameObjects.Sprite)=> { child.setPosition(50, 20) }) } } So, getChildren seems return something like <T> extends GameObjects would be better??
  • Create New...