Search the Community

I realize this is a tremendously dumb question but I've been struggling for months (intermittently) with just getting the files set up so I can start doing some Phaser tutorials. I've read and tried to follow the Get Started guide, but being new to development in general I'm having a really hard time understanding what they're asking me to do. Where I'm at: I have downloaded phaser 3.zip and put it onto the hard drive of my computer, and unzipped it. I have installed the editor Brackets, which has a live preview that (I think - but am not sure) I can use instead of a local web browser. I have purchased a Phaser course from Udemy, originally created I think by Zenva, but it's not been especially helpful so far with this very first "set up" section. I have also completed a basic Javascript course provided by Kahn Academy (which was a great course btw), but since that was all in-browser, it didn't require all this setting up of editors and all that. The problem: I don't know where to put the downloaded phaser 3 folder on my computer, and in relation to the html file the tutorial wants me to create with Brackets. I don't know which part of the downloaded Phaser 3 folder I need to "put in" to Brackets in order for the files I'm creating to reference the Phaser framework. I do know how to open a folder in Brackets, but if there's a reference type connection I'm supposed to make, I don't know how to do that part. The getting started guide says something about finding the web root, which I don't understand, and can't find instructions about when I've tried googling it.

Hi Phaser community! I know It's simple to just use the CDN but as I want to use the latest technology and following the best practice of modular code, I think that only npm give me that power. I'm a web developer and I want my project to be modular like when I'm developing with ReactJs. The core problem is that I don't know how to create a structure like ReactJs because I create a React project I use the react cli `create-react-app app` so I don't know what's going on behind it.

I am just starting to look into testing Phaser3, but I am trying to figure out what is the best way to set it up on my mac book pro. I have tried sudo npm install phaser3-project-template but the npm install always fails. I do have the latest node LTS installed (8.9.4). Is there something I am doing wrong or is there a better way to get started. I appreciate any assistance, thank you.

Hey everyone, I'm one of the developers of Curve Fever which is a multiplayer snake game. Due to a complete redesign and performance/loading issues we plan to remake the game with HTML5 canvas. We've already done a little bit of research but I'm already noticing there are hundreds of options for everything. Reading through each option would first of all take a lot of time and secondly it's always advertised better than it is and it leaves out the downsides. I'm looking for some general advice and some advice on frameworks and tools to use. I have a few concerns and requirements listed below along with the information about our current project/setup. About the project The current game is made in Unity and exported to WebGL. However, 20% of the users are unable to load the game and 25% of the users that can load the game has FPS below 40. This is too high and we've had several talks with the developers that work on WebGL in Unity but they say that it's unlikely that it's gonna have massive improvements. Totally understandable because Unity is a massive engine and WebGL is mostly used for demos and such and not full games. Our game is a 2D topdown multiplayer snake game played by milions of users. The servers are custom made with Go(lang) and the communication is done with websockets using Protobuf messages. Most of the game is actually UI for things like chat, friends, shop, lobby, profile, popups and so on. Requirements These are the main requirements we have for our new setup. Exportable for standalone (Windows, MacOS and Linux) - Preferably with generic API's for native things. Exportable for Android and iOS - Preferably with generic API's for native things. Exportable for web portals and Facebook. Being able to run the game locally on Windows, MacOS & Linux. Great workflow for quick development and design. Structured code base (Typescript?) Easy for designers to create UI elements and such. Easy to create UI animations. (or animations in general) Rapid prototyping. Quick load times Good performance on multiple devices. Some kind of versioning would be great. It's also quite important that it's open source. Specific questions Here are some specific questions we have currently. We're mostly just looking for general advice on what to use and what not to use with the requirements we have. Is there something like Electron that also exports to mobile or do we have to use two services? Is it correct that it's best to create UI in the dom? If so, how well will it work with services that export the game? Since most of our game is UI would it be wiser to not use a game engine like Phaser? To give some more context, basically all we have to do in the game is render curves (lines) on the field. The curves will have to be erased too because of client side prediction (multiplayer networking). Is there something that lets us create UI elements easily with animations and such like it's done in Unity? I know that a lot can be done with HTML, CSS and JS but not all game designers may be experts with this and it'd be much easier if there was some sort of software where designers can design the game in. How good are the profilers/debuggers in the available engines? Or do people often only use the browser profiler/debugger? Just putting this here for people that only read these questions. What are some good practices and workflows. Would be great to hear what stack of tools and libraries etc people use and why.

Hello, Everybody! I'm currently planning to create a browser game using the Babylon.js framework. I am confused about deployment and how to actually release the game, so I would appreciate if you would solve a couple of mysteries I have about this. First of all, I can see that I need a webserver in order to use Babylon properly. I understand that this is because I need to define a custom MIME type for the .babylon extension to be loadable. Alright, so basically, all I need to do is use the js framework to craft my own game by implementing game mechanics and importing files from Blender with the .babylon extension, all of this running on my Apache local webserver? If so, then how can I redistribute the game? I will make users download the games files (js scripts, .babylon files, css files and actual html files that link everything) but how can I be sure that the user will actually have a webserver installed? What if they don't? Because my point is to make the game work offline, not in such a way that the users will need to access my website everytime they want to play the game. And then I thought about Node.js. Do you guys think I can include node.js along with the game files? I mean, will that create a node local server on every user's machine when they download the files, so the game will be ran on that node.js server just as it runs on my own local server on my machine? How can I do that? Is this what I'm supposed to do? Or, perhaps, this is totally wrong and I should simply host the game files on my online server and only allow users to play online? Thank you!

Let me introduce you to the Phaser Goldilocks Template. It combines everything I wanted during that first week of Phaser. This solves a few things. First, for development all code can be separated into different JS files. For production, all JS files can be combined into a single one for the fastest loading. The second thing this solves is the common scoping pitfalls I see many people encounter. So no need to use prototype as the game variable is available in each file. https://github.com/EddieOne/phaser-goldilocks-template

I created a little library which sets up all the minimal stuff I need to create a PIXI screen and "game loop". I am heavily relying to this in each of my projects. You just need to incorporate jQuery [edit: jQuery not needed anymore in v0.3], pixi and RUNPIXI (in that order), create a div or something with a given size and an id, and then call: <script> function myloop() {} // do your looping stuff here RUNPIXI.initialize("mypixidiv", myloop); // [edit] removed jQuerys # selector. </script> ..and that's it. I think this could be usefull for everyone who is new to pixi and also for other "lazy" people. What it does now is the following: It creates the pixi screen in the given element, using the size of that element. It creates three containers to draw on, from which the middle one can be scrolled with arrow and asdw keys. (You can turn scrolling off, of course) Also it registers a resize event, which resizes the pixi context when the element resizes. You can add and apply shaders with your desired names. v0.2 enables you to capture the screen to a texture or array. Oh, I almost forgot: Here's the link, have fun with it and gimme some credit if you like it. (in text/reputation form, I don't want your money.) "Documentation" is in the readme file. https://github.com/ben0bi/RUNPIXI.js

Phaser Project Setup Using Typescript via Terminal and GruntJS I'm trying to start my first Phaser project ever but I want to do it with typescript since it's one of the main reasons why I'm doing this project to begin with in order to learn Typescript. I'm working of an old Mac Pro 3,1 running Snow Leopard and there is no way for me to upgrade, just in case that issue comes up. I'm also coding via terminal using GruntJS as my preprocessor, MAMP as my webserver and for everything else I use sublime. Anywho because I don't have VS and most tutorials regarding Typescript and Phaser use VS as the main IDE, I figured I may have lost a couple of steps along the way or something. All I know is that my Typescript is giving me errors no matter what I try. The precompiler which is grunt-ts seems to be working jst fine but right away I get an error in my code on line 1 column 1, so I'm guessing it's something I'm doing wrong codewise. here is my app.js: /// <reference path="../typescript/phaser.d.ts"/> class SimpleGame { constructor() { this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { preload: this.preload, create: this.create }); } game: Phaser.Game; preload() { this.game.load.image('logo', 'phaser2.png'); } create() { var logo = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'logo'); logo.anchor.setTo(0.5, 0.5); } } window.onload = () => { var game = new SimpleGame(); }; and Here is the error I get on grunt-ts while compiling to javascript: Running "ts:dev" (ts) task Compiling... ### Fast Compile >>ts/app.ts ### Fast Compile >>ts/phaser.d.ts Using tsc v1.6.2 /Users/ish/Games/Phaser_html5/demo_01/ts/phaser.d.ts(1,1): error TS6053: File '/Users/ish/Games/Phaser_html5/demo_01/ts/pixi.d.ts' not found. /Users/ish/Games/Phaser_html5/demo_01/ts/phaser.d.ts(2,1): error TS6053: File '/Users/ish/Games/Phaser_html5/demo_01/ts/p2.d.ts' not found. /Users/ish/Games/Phaser_html5/demo_01/ts/phaser.d.ts(7,15): error TS2300: Duplicate identifier 'Phaser'. /Users/ish/Games/Phaser_html5/demo_01/ts/phaser.d.ts(56,16): error TS2300: Duplicate identifier 'Phaser'. /Users/ish/Games/Phaser_html5/demo_01/typescript/phaser.d.ts(7,15): error TS2300: Duplicate identifier 'Phaser'. /Users/ish/Games/Phaser_html5/demo_01/typescript/phaser.d.ts(56,16): error TS2300: Duplicate identifier 'Phaser'. >> 6 non-emit-preventing type warnings >> Error: tsc return code: 2 Warning: Task "ts:dev" failed. Use --force to continue. Aborted due to warnings. Which, for me, begs the question: How do I reference all of the Phaser framework files when not using an IDE like VS? How would I manually incorporate the Phaser engine into my project and reference the files? Say if I download the Phaser framework manually via my browser. How would I setup those files in that folder on my project? I can't seem to find a direct reference or tutorial to that anywhere. The ones involving typescript use Visual Studio as the ide and the ones that do not use VS only use plain vanilla javascript code. I'm looking for tuts that use Typescript but not any particular ide preferably just terminal or command prompt. Any help appreciated. Thanks.

http://www.youtube.com/channel/UCLj4fAgRzjHaD7vICKaUbZA/videos This channel has everything step by step from the beginning of setting up phaser to using it for mobile games. It deserves more attention. It currently has about 5 views per video.

I downloaded Brackets and opened my files in it, but once I open the html file the canvas is all black and two errors come up. These are, error 1: Failed to load resource: the server responded with a status of 400 (Bad Request) and error 2: Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://127') does not match the recipient window's origin ('http://127'). *note: I took out some of the numbers in the brackets of the second error since it displays personal data regarding the server. Thanks for any help

Hi. I started reading all post in this forum from the oldest to the newest in order to understand Phaser a little better and to see if I find out some of my own doubts already asked / answered. Notwithstanding I have some very basic doubts about how to configure my development environment (I think that mainly because I'm still learning JavaScript). Currently I'm creating a folder with the following structure (It's based in the post Is there a tutorial on a basic setup for Phaser?): mygame/+ +-img/ +-lib/ | +-phaser-min.js +-snd/ +-src/ | +-game.js | +-file1.js | +-file2.js +-index.htmlWhere file1.js, file2.js, and so on are files called by game.js My next step would be to generate an output folder ( say, named build ) that would contain all JavaScript merged into a single file as well as minified. Something like the following: mygame/+ +-img/ +-lib/ | +-phaser-min.js +-snd/ +-src/ | +-game.js | +-file1.js | +-file2.js +-index.html | +-build/ +-img/ +-snd/ +-game.js +-index.htmlThe point is I don't have any clue how to do it. Is there any script / tool available for that? Preferably command line tools that I can call from shell scripts / bat files or directly from VIM. Another point I'd like to understand is the folder structure of Phaser. I imagine that for develop a game I just need to use either phaser.js or phaser.min.js file and that the remaining files are either for development of Phaser itself or example files to guide us. Right? What's better to use during game development: either phaser.js or phaser.min.js file? Regarding the index.html file, in examples, usually I see JavaScript embedded in it: <script type="text/javascript">(function () {...})();</script>Can't I just create a function (say run()) and call it: <script type="text/javascript">run();</script>Is there any implication in doing this? Any special care I should take? If someone could point me how to debug the my code it would be nice. Any other tips you judge useful are very much appreciated. Thank you all.