Search the Community

Showing results for tags 'phaser3'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 149 results

  1. 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. 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: And on the Phaser 3 implementation from Jacky Rusly: As you will see I've considerable modified how the jrgame was interacting with 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: 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: 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
  2. I create simple scene, but I can't see any images or text. All images are loaded. Update is not called. What's wrong? export default class Play extends Phaser.Scene { constructor () { super('game'); this.staticBg = null; this.scrollingBg = null; this.text = null; } preload() { this.load.image('static-bg', 'img/Simpsons_22_15_P1_640x360_279961667900.jpg'); } create() { console.log("play"); // work this.add.image(0, 0, 'static-bg').setOrigin(0, 0).setScale(1.5, 1.7); // doesnt work this.text = this.add.text(10, 70); this.text.setText('Power: ' + 100); } update () { this.text.setText('Power: ' + 100); } } Game.js import Game from "./js/game"; import { Preload, Play } from './js/states'; const config = { title: "Donuts", width: 1000, height: 800, parent: "game", // backgroundColor: "#18216D", pixelArt: true, scene: [ // Preload, Play ], physics: { default: 'arcade', arcade: { debug: false, gravity: { y: 300 } } } }; window.onload = () => { let game = new Game(config); game.start(); };
  3. Ad4m


    Hi all, I'm wondering where can I find the game-configuration-object's description? I was browsing the docs here and, even if I don't know if it does have what I am looking for, when I clicked in the GameConfig param link, I got an 404 Error. So now I don't know where to look for. Can you help me understand the game config object?
  4. Hi there! I have released my first game on Kongregate, I've put a lot of efforts into it, and I can't figure out now - why it has so low rating? My only guess is that initially it was too hard and players who couldn't walk through the first levels have evaluated the game low. And now I'm working on it, trying to make game less hardcore. But maybe there are some other issues?
  5. I think there is a problem with adding callbacks for Whenever I do this enemyGroup ={ defaultKey: 'enemy', maxSize: 5, createCallback: function(enemy){ enemy.setData('health',3); console.log(enemy.getData(health)); }, }); the callback doesnt trigger but when i change `` to `` the callback fires. Is this a bug on Phaser 3? if so is there a work around?
  6. Hey I'm very new in javaScript and Phaser. So I'm not sure what wrong I'm doing. But my game is not Loading .It just stuck on 0% FBInstant.initializeAsync().then(function() { let gameConfig = { type: Phaser.AUTO, backgroundColor:0x87ceeb, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, parent: 'thegame', width: window.innerWidth, height: window.innerHeight }, physics: { default: 'arcade' }, scene: [welcomeGame, playGame, resumeGame, gameOver ] } game = new Phaser.Game(gameConfig); }); class welcomeGame extends Phaser.Scene{
  7. Hello everyone, my name is gedion101, I'm new in this forum and new using Phaser.js and quite a little long time in react-native framework, which is javascript framework for mobile development, you can see in this website (, or you can see the documentation if you curious ( Back to the topic, I have a wonder how to integrate the phaser.js module, for a react-native environment. So basically using npm way, and using <script> tag in HTML5 document, if I'm development target to the web, but different in react-native and you can't use <script> tag, because of a different rule. I found the alternative module, that call react-native-game-engine, is good, with matter.js as physics system in that game, but I have a problem, the game so lag, and to much render, for each asset to display on the phone. And another one, which is an ion-phaser, but I tried it and have a problem with that module, and the other is expo-phaser, is good, but in my workspace advice to me, don't use expo, find another way. so I give up, maybe in this forum, it will help me, to figure out this problem or some advices, to give which framework or tools for using phaser for mobile game development. for the code : app.js // import react module import React from 'react'; // import component from react-native module import { View } from 'react-native'; // import phaser module import Phaser from 'phaser'; // import scene for game import Scene1 from './src/exampleScene1'; // eslint-disable-next-line react/prefer-stateless-function class App extends React.Component { state = { config: { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 200 }, }, }, scene: [Scene1], }, } callTheGame = () => { const { config } = this.state; const game = new Phaser.Game(config); return game; } render() { return ( <View>{this.callTheGame()}</View> ); } } export default App; exampleScene1.js : // import phaser module import Phaser from 'phaser'; // import asset image import Gimo from './assets/gimo.png'; // create class for scene 1 class exampleScene1 extends Phaser.Scene { // build constructor constructor() { // create identifier for class scene super({ key: 'exampleScene1' }); } preload() { this.load.image('GimoAsset', Gimo); } create() { this.add.image(400, 300, 'GimoAsset'); } } export default exampleScene1;
  8. Hi all I'm using Angular4 with Phaser 3 beta 20. I need to have separate classes for the Game Scenes so that I can use different game scenes any time I wish. I need to be able to call a function in the parent component that affects the parent component variables. This is probably a totally newbie question so please forgive me, but it's stumped me for the moment on how the scope works. Please see the following code: import { Component } from '@angular/core'; import Phaser from 'phaser'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { phaserGame: Phaser.Game; carrot: any; preloadStatus: string = "Preloading"; config: any; gameScene: Phaser.Class; getScene() : any{ return { Extends: Phaser.Scene, initialize: function GameScene(config) {, config); }, preload: function () { this.load.image('carrot', 'assets/carrot.png'); console.log("Phaser game loading done"); this.FromInGame(); }, create: function () { this.carrot = this.add.image(400, 300, 'carrot'); }, update: function () { this.carrot.x += .2; } } } constructor() { let theScene = this.getScene(); theScene.FromInGame = this.FromInGame; this.gameScene = new Phaser.Class(theScene); this.config = { type: Phaser.CANVAS, parent: 'phaser-example', scene: this.gameScene }; this.phaserGame = new Phaser.Game(this.config); } FromInGame() : void{ console.log("called from in game"); this.preloadStatus = "Preload DONE!"; } } I need the FromInGame() function to be fired from the Scene's preload() function, which it is. However, in the FromInGame() function "this" clearly references the Scene because "theScene.FromInGame = this.FromInGame;" is setting it as a function on the Scene. Therefore when executing "this.preloadStatus = "Preload DONE!";" it adds a property preloadStatus with a value "Preload DONE!" to the Scene and rather than updating the this.preloadStatus in the Angular component. Any ideas how I would achieve this please? Thank you very much in advance. D
  9. So I am working on my just general knowledge of how phaser works, I have only done two tutorials. But I think I have a decent grasp on it so far. But I am running into a little problem, I am trying to use the Follower object, so that I don't have to create the vec2 and attach it, but I don't seem to understand the documentation or what it means by "If this Game Object is enabled for physics then this property will contain a reference to a Physics Body." I have scoured the docs for hours. I see how to 'enable' in arcade physics but I cannot find any reference to how with impact physics. I am able to create a body object, and assign it to the game object, as well as assign the the game object to the body, but they do not move in tandem. in fact the body does not move at all. P.S. This is not the only bug, when converting from matter.js to impact.js physics my logic on pausing player movement when the dialog modal broke. but one problem at a time.. P.P.S I know its not the best code //SHIVA path3 = new Phaser.Curves.Path(550, 450); path3.lineTo(450, 450); path3.lineTo(450, 505); path3.lineTo(550, 505); path3.lineTo(550, 450); path3.lineTo(450, 450); shiva = this.add.follower(path3, 550, 450, 'shiva'); //Phaser.GameObjects.BuildGameObject(this, Phaser.GameObjects.PathFollower) //, impact); shivaBody = this.impact.add.body(550, 450, 16, 12); //TRYING DIFFERENT WAS TO SET BODY //shivaBody.setOffset(550, 450, 16, 12); shiva.body = shivaBody; shivaBody.setGameObject(shiva); = "shiva"; shiva.setRotation(); shiva.depth = 30; //ALT WAY TO GET NAME // = "shiva"; shiva.setData(npc, true); shiva.setData("name", "shiva"); npcBodies[2] = shivaBody; npcs.add(shiva); shiva.startFollow({ ease: 'Linear', duration:6000, yoyo:true, repeat: -1, _delay: 200, delay: 100 }); P.P.P.S I also tried;; dialog_plugin.js game.js index.html city.json
  10. So lets say I want to make a pokemon game, how would I split my code into different files? My guess is, that you would make a scene for each area of the map (routes, cities, buildings), but how would you keep the same player code for each scene? Could someone show me an example of a big Phaser 3 game, with Levels or a big map, so I can copy the structure? Thanks in advance
  11. I am making UI Components Framework for Phaser 3, that is driven by JSFL-generated jsons and atlases. It means that you can build your UI in Abode Animate, export it with given script, and forget about manual code positioning and building stuff! Please, try it out. Docs, examples, tutorials: There are two basic things in this framework. First is ComponentClip, which is a view instance, it is recursively self-build by provided json and atlases. Second is UIComponentPrototype, which is clip controller. It can be easily extended to create any components, windows or whatever you need. Essential meaninig of it is that it doesn't need a clip to exist always. For example, you can change states of a root clip, and child clip can get new clip instances, ore lose them, and nothing bad happen. Some base components are already included UIButton has 4 states, "up", "over", "down", "disable" UIButtonSelect same as button, but behaves like checkbox, has 8 states, by adding "_select" suffix to UIButton's states when selected. UIButtonRadio Selectable buttons, that can be grouped to select only one of them. UIButtonDraggable same as UIButton, but also emits drag event, drag bounds can be self externally. UIScrollBar vertical or horisontal bar with draggable thumb and prev/next buttons. UIProgressBar Setup only start and end elements positions, scale, rotation or alpha, and this component will interpolate them according to provided progress value. UIScrollPanel Helper for scrolling any element with UIScrollBar. UIContainer Base container component to add other dynamically created components inside. Can be easily extended to create any types of lists, for example. I'm still working on new components and extending existing functionality. Tell me, would you use it, what other components you may need, and whatever you think about it. Any feedback is appreciated! Also I'll be thankful for any collaboration. Available at GitHub and npm
  12. 1-) I am new at phaser and I look for phaser3 Matter physic tutorials. 2-) Is there a way to search in phaser3 tutorials. It is too hard to find proper tutorial.
  13. Hello guys, I was really used to using GdxTexturePacker, when I started programming with Phaser, I really missed it, so I made some jar cross-platform executable (Already tested on Linux and Windows) for converting .atlas file to .json format, like the used for Phaser (Already tested), if someone wants it, I made the repository public and open source
  14. So, I guess it's time to show my latest project to wide public: Link to play it directly right now: Ammo:0 is an experimental game prototype (with stock graphics so far), designed to explore and refine basic concepts of antoshooter subgenre. It features warped space, intense explosions, rockets, rockets and some more rockets. Did I said about rockets already ? Oh, right. Tell me what you think about concept itself and current premise.
  15. Hello everybody, I am new to Phaser and thought why not start with Phaser 3. My program dynamically changes the rotation of a box and I wanted the collider to rotate as well, but I didn't find how to archive this. var config = { type: Phaser.AUTO, width: 800, height: 600, //window.innerHeight; physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug: true } }, scene: { preload: preload, create: create, update: update } }; //... function create() { //... blockAU = blocks.create(200, 200, 'block'); //... } function update() { //... if(rotateLeft) blockAU.angle -= 1; else blockAU.angle += 1; blockAU.refreshBody(); //... } I didn't find examples for this, and the API and Docs where pretty confusing. Maybe I am using the wrong terminology when searching. I really hope you can help me with this
  16. Hello, I can teach you using Skype. If you share your screen I can tell you what you need to install and press. I can show you how to: set breakpoints in VSCode in the project with a few files. We will use AMD and RequireJS bundle your source files to use them in Browser. We will use Browserify and UglifyJS compile Node.js server TypeScript scripts connect your server with client that is written in pure WebGL, Phaser, Pixi.js, Three.js or Babylon.js write Jasmine Specs (Unit Tests) for client and server set breakpoints in Jasmine Specs deploy you TypeScript server and client on Heroku connect your project with GitHub to automation deploying after push More about unit tests. I use TypeScript. I will give you my boilerplate for Jasmine and I will show you how to set up it. I will instruct you: How to set breakpoints in TS code in VSCode How to write Mock objects for dependencies that was injected How to build your unit tests in production (in bundle.min.js) I use AMD-build and RequireJS to debug mode (to set breakpoint in VSCode) and I use CommonJS-build and Browserify/UglifyJS to build unit tests to production My time rate is $10 per hour.
  17. So, I need to check whether or not the player is colliding with a tree. Once the player is colliding with a tree have it display a piece of text. Then, once the player is no-longer colliding with the tree; have the text disappear from the scene.
  18. Hello, What I am trying to accomplish is that I want to specify the type of tile the character is stepping at. But I'm stuck at "undefined tile property". Each of the tiles that have water in it has a "waterProperty" property name and type: boolean. So what I did is: var map = this.make.tilemap({ key: 'level1' }); var tileset = map.addTilesetImage('atlas_name','level1_tiles'); layer.setCollisionByProperty({ collides: true });; layer.forEachTile(function (tile) { console.log( // returns undefined. }); From: Phaser - Example - Matter Destroy Tile Bodies
  19. I am trying to put all my phaser 3 games into one ionic 4 application. I found the following example which works perfectly for phaser 2 ( however when I try to update to phaser three the screen goes blank. I imagine one of the problems is to do with how scenes have replaced states. does anyone have any ideas how to get around this or is this example workable anymore?? below is some code export class HomePage { constructor(private menuCtrl: MenuController) { game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'space- invaders', { preload: this.preload, create: this.create, update: this.update, render: this.render } ); that = Object.create(this.constructor.prototype); } preload() { this.load.image('bullet', 'assets/phaser/bullet.png'); game.load.image('enemyBullet', 'assets/phaser/enemy-bullet.png'); } } game.load works for phaser 2, if I use this.load in ionic it throws the following error ‘Property ‘load’ does not exist on type ‘HomePage’.’ With these changes to phaser is this method even possible??
  20. I tried to make a game tank and added radar to the tank to detect the obstacle. I use geom.intersect to do that. but when I tried to move the tank I got a problem, because there was only a centerOn method for attaching graphics on it
  21. This is a copy of the first devlog I published on my blog a few months ago. You can see all the devlogs and sign up for the newsletter to get the next ones directly to your email at Devlog 1 Few days ago I have decided to start an RPG project, as that’s what I’ve always wanted to make. I will be fairly limited with graphic assets and time, but at least the coding part will be fun. I will make do with what I have available. Right now I have depth sorting implemented: I’m using art assets. Tiled for level editor. Haxe as programming language. Phaser 3 as framework. Coffee as fuel. So far I’ve went through map loading (surprisingly simple in Phaser 3), animations based on keyboard input and basic collisions using Phaser’s Arcade. Then I switched to using Differ for collisions, because Phaser’s Arcade physics couldn’t handle custom shapes per tile by default. Given that I expect more requirements from the collisions/physics system, I like having more control over things instead of letting Phaser handle it all for me. After that, it was time to refactor all the code, because it was getting messy. I choosed to use ECS architecture, because I used it before and I find it very nice for these kind of games. Especially considering how big the game might grow, it’s important to keep the code clean. I was deciding between using Elias Ku’s ECX library and Kevin Leung’s ECS. Ultimately it probably doesn’t matter, but I chose Kevin’s. At this point the ECS consists of RenderSyncer, KeyboardInput, Movement, PhysicsDebugDraw, PhysicsSystem systems, and Velocity, ActorState, DifferShape, InputControllable, Position, Renderable, StaticCollidable components. This will change a lot as the work continues. Next I made a custom preprocessor for Tiled level files. I’m converting them to custom JSON that contains only the data I need, in format the game expects. This also allows for making rudimentary checks against typos and missing data. It also means I’m no longer using Phaser’s tilemap loader, and instead had to write a bit of code to populate the tilemaps myself. While this is some extra work, it allows for special handling. Last thing I did was implement depth sorting. Phaser can’t render different tiles at different depth, or allow you to insert something (like a moving character) in between tiles. If you look at the GIF on top, you see the character can move behind and in front of the tree log and the sign board. If they were part of a Phaser’s tilemap layer, it wouldn’t work. Instead, I mark the layer in Tiled as requiring depth sorting, and the game then creates individual depth sorted sprites. This way I didn’t have to change the level editing workflow and won’t need to manually handle future similar cases. Next I plan to work on some UI, changing location (loading different maps, like insides of a building), NPCs and interaction, and combat system. Subscribe to newsletter.
  22. I would like to share a website I built with Phaser 3. I believe Phaser is going to change the way we interact with online content, and I would love to play a part in that change. Here is the website: Although I have a desktop version, I recommend you check it out on your smartphone. The entire website was built on my phone, so mobile browsers will get most of the attention. In fact, the only time I’ve used a PC is to make sure my code is working. The mini games are built to show off the capability of Phaser, but I’m currently working on a platform puzzler with my slingshot character. I do believe these are the first games built with Phaser that utilize a slingshot, and if my website becomes successful, I hope one day to teach the functionality in my tutorials. For now I’m trying to establish myself as a programmer, because I don’t actually work in this field. Any feedback will be greatly appreciated. Thanks for checking it out!
  23. Hello everyone. I'm knew here and also knew to Phaser 3. I'm working on a game currently where you play as a lost ball who is trying to make it back to his owner. Anyway, I have my player movement working fine. I but when I keypress "w" or "a" I want the ball to also continuously rotate (to look like it's rolling) while those buttons are held down. this.ball.setRotation() will only rotate the ball once. I've done a lot of digging and can't seem to find what I'm looking for. update() { // Movement (left/right) if (this.cursors.left.isDown) { this.ball.setVelocityX(-225); } else if (this.cursors.right.isDown) { this.ball.setVelocityX(225); } else { this.ball.setVelocityX(0); } // Jumping mechanic if (this.cursors.jump.isDown && this.ball.body.touching.down) { this.ball.setVelocityY(-700); } }
  24. This is my second game made in Phaser 3. It is a side scroller and is made only for mobile devices. Do check out and review. Sketched
  25. Few days back I released my first mobile game made using Phaser 3 framework. It's a simple game but was hell lot of work. In the end I learnt a lot in the process.