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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 155 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. 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
  2. Hi, I'm happy when I found this forum couple of weeks ago. I was reading many of the post regarding frameworks to learn more. Thanks! We (University of Extremadura) want to develop a free and open source game for highschools for the girls and boys to learn to program. The idea that we have is really similar to this game mechanisms: https://hoc.codewards.org (thematic and language to learn will be different and our target are mobile web browsers). For the code editor we have already selected codemirror. However, for the game framework, being a really simple moving and interaction mechanisms (no phisycs, 2D, only with 4 different rooms and badgeds as reward), we are not sure about going directly with typescript, pixi or phaser. Any advice would be welcome.
  3. 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.
  4. there seems to be something wrong with the code, one button has to slow down and one button to speed up when I add this code, this.downButton = this.add.image(80, 530, 'up-bubble').setInteractive(); this.upButton = this.add.image(230, 530, 'down-bubble').setInteractive(); this.input.on('gameobjectup', function (pointer, gameobject) { if (gameobject === this.downButton && this.spinSpeed > 0) { this.spinSpeed -= 0.1; } else if (gameobject === this.upButton && this.spinSpeed < 9.9) { this.spinSpeed += 0.1; } }); but, when I add this code between generateBalls (), it doesn't work at all, it doesn't work, generateBalls() { const hitArea = new Phaser.Geom.Rectangle(0, 0, 32, 32); const hitAreaCallback = Phaser.Geom.Rectangle.Contains; const circle = new Phaser.Geom.Circle(400, 300, 220); const balls = this.add.group(null, { key: 'balls', frame: [0, 1, 5], repeat: 5, setScale: { x: 3, y: 3 }, hitArea: hitArea, hitAreaCallback: hitAreaCallback, }); this.downButton = this.add.image(80, 530, 'up-bubble').setInteractive(); this.upButton = this.add.image(230, 530, 'down-bubble').setInteractive(); this.input.on('gameobjectup', function (pointer, gameobject) { if (gameobject === this.downButton && this.spinSpeed > 0) { this.spinSpeed -= 0.1; } else if (gameobject === this.upButton && this.spinSpeed < 9.9) { this.spinSpeed += 0.1; } }); Phaser.Actions.PlaceOnCircle( balls.getChildren(), circle); return balls; } generateDance() { this.spinSpeed = 0.003; return this.tweens.addCounter({ from: 220, to: 160, duration: 9000, delay: 2000, ease: 'Sine.easeInOut', repeat: -1, yoyo: true }); } update() { this.playerEyes.update(); Phaser.Actions.RotateAroundDistance( this.balls.getChildren(), { x: 400, y: 300 }, this.spinSpeed, this.dance.getValue()); } I took the code from the Phaser 3 example this is https://phaser.io/examples/v3/view/tweens/tween-time-scale
  5. Here is some Phaser 3 / SignalR multiplayer Tanks game for desktop or mobile: https://tanksapp.azurewebsites.net/ Please PLEASE send me some feed on your first glance of the game, and thank you in advance!! Edit (2019-Dec-19 10:25 p.m.): Fixed canvas for mobile but im working on buttons, so desktop meanwhile Edit (2019-Dec-21 06:02 p.m.): Added mobile joystick and button to shoot, it enables/disables when u r on mobile or not, in PC uses arrows and space bar. Added some console to check on objects. Edit (2019-Dec-23 12:13 a.m.): Added preload screen, ordered some messed code, and added Ping number to console. Soon: Players Hall of Fame! Edit (2019-Dec-25 10:42 p.m.): Had some problems with my hosting, so moved to Azure and now websockets work nicesly!. Fixed some animation and bugs too. Edit (2019-Dec-28 10:06 p.m.): Added High Score, now dead players/bots drop some "hearts" that give the one who take it some health, added input for "Player Name" to score the High Score. Edit (2019-Dec-29 10:06 p.m.): Fixed some bot AI issues to improve performance. Edit (2020-Jan-04 12:39 a.m.): Added tile map (and map collision logic applied to tile map).
  6. Hi all I have small problem. I have an spritesheet and background music, when i click on my sprite the music should be muted and I want to achieve this by watching variable named musicMuted. So when variable is false then music should play, else not. The problem is that when I change the variable in create function it is not updating i update function (always return false) Codepen below: https://codepen.io/mejs/pen/mdyeGjo
  7. I really like the GitHub Game Off contest, because you have one month and can improve basic ideas. This year's theme is LEAPS AND BOUNDS. I was thinking about something like you have the pinfold with sheep and you should keep sheep from wolves and from escaping. But this idea seemed too complicated, so I changed it. Now the player has lost all the sheep and must collect them again. I already had a library for symbol recognition, so I improved it a bit and adapted it to this game. To find one sheep, you need to draw several characters correctly. I also added a mode in which incorrect input leads to the loss of all found sheep, a kind of rogue-like game component. So, I hope you will enjoy this game You can try game here https://vmikhav.itch.io/keep-your-sheep
  8. Dear community, I would like inform you that "War IOM" v2 have been re-work graphics and added more feature to serve user experience. Here is my banner screenshot: You can access to the website and play it directly on your phone (Chrome mobile, Safari iPhone, iPad) or your Laptop Link to play: https://www.iomgame.com/wariom/ ++++ Game description: The rule to win the game is very simple: buy the soldiers, defeat the enemy army and then destroys the flag. Try to use fireball to wipe out the enemy. The game had the shop to buy new soldier, upgrade soldier and choose the team out. Game data be stored on both user's device and server so never lost data again. ++++ Here is the look and feel of War IOM icon on your Home-screen phone Rumor: You can get double gem receive if you beat the mini boss at level 3. Also win level 3 will give you a lot of Gem, use it to buy new solider and upgrade your army! My facebook page: https://www.facebook.com/Iomgame-245553622715070/ /******** Change log update 08/26 ********/ -- Add new game play for level 6. -- Improve camera. -- Improve game performance. /******** Change log update 08/31 ********/ -- Improve sound load time. No painful for waiting sound loading any more! /******** Change log update 19/09 ********/ -- Add level 7 with new game play. Regards, Gafami .
  9. 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(); };
  10. Ad4m

    GameConfig

    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?
  11. 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? https://www.kongregate.com/games/Trobing/batty-the-bat
  12. I think there is a problem with adding callbacks for physics.group. Whenever I do this enemyGroup = this.physics.add.group({ defaultKey: 'enemy', maxSize: 5, createCallback: function(enemy){ enemy.setData('health',3); console.log(enemy.getData(health)); }, }); the callback doesnt trigger but when i change `this.physics.add.group` to `this.add.group` the callback fires. Is this a bug on Phaser 3? if so is there a work around?
  13. 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{
  14. 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 (https://facebook.github.io/react-native/), or you can see the documentation if you curious (https://facebook.github.io/react-native/docs/getting-started.html). 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;
  15. 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) { Phaser.Scene.call(this, 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
  16. 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) //this.game.physics.enable(shiva, 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.name = "shiva"; shiva.setRotation(); shiva.depth = 30; //ALT WAY TO GET NAME //shiva.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 this.physics.world.enable(shiva); this.impact.world.enable(shiva); dialog_plugin.js game.js index.html city.json
  17. 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
  18. 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. https://xense.github.io/phaser-ui-comps-docs/tutorial-showcase.html Docs, examples, tutorials: https://xense.github.io/phaser-ui-comps-docs 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
  19. 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. https://phaser.io/news/category/tutorial
  20. 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 https://github.com/MrcSnm/GdxPackerToJSON
  21. So, I guess it's time to show my latest project to wide public: https://github.com/Guevara-chan/Ammo-0 Link to play it directly right now: https://guevara-chan.github.io/Ammo-0/main.html 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.
  22. 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
  23. 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.
  24. 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.
  25. 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 }); this.matter.world.convertTilemapLayer(layer); layer.forEachTile(function (tile) { console.log(tile.properties.waterProperty) // returns undefined. }); From: Phaser - Example - Matter Destroy Tile Bodies