Fiona Posted June 28, 2018 Share Posted June 28, 2018 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. Link to comment Share on other sites More sharing options...
scope2229 Posted June 29, 2018 Share Posted June 29, 2018 I'll break it down for you on what you need to learn first before trying or at least have a good understanding. First you need HTML5. This will be a basic document that you can learn how to set up using w3schools tutorials. These normally work on any computer without any special server because your browser already has the ability to decipher local web pages like below. But for phaser you need a little more specialized hardware but very easy to set up. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="game"></div> <script src="phaser.js" charset="utf-8"></script> </body> </html> here you declare the type of document. https://www.w3schools.com/tags/tag_doctype.asp Next is the head this is all your meta data like SEO tags, default language, character set doesnt need to be set but i would always add it to save headaches. all your global content will go here import of phaser could also go here. Stylesheets etc. Body is the main content. while learning you will only ready have what i have above. Now you know the basics of a webpage you need to create a web server to handle all your requests unless you post like to sites like heroku etc. This will need LAMP WAMP npm node for myself i have a production server with LAMP configured for Ruby not php. on my development machine i just use npm for learning and if im developing for an actual website then im using Ruby on Rails. Next you need to learn Plain Javascript -- https://developer.mozilla.org/en-US/docs/Learn That is a great place to start. Also goto youtube, when i am coding i will have a selection of random javascript tutorials playing in the background. These often help with references. Now you should be able to create a basic and simple one file game. but thats no good. So now you need to learn to separate code into your scenes. for this try out cat small https://phaser.io/news/2018/04/coding-train-tutorial Once you've masrered this its time to learn ES6. This is still javascript but with a different syntax which you will need to learn how to translate this to browser friendly code but at this point you should already know about babel and webpack etc. After this you should have a good understanding and can move onto more advanced materials like assets from json files to speed up load times or adding cut scenes mid level etc. Ultimately there is no definitive answer for your question due to the several ways to set up a game depending on what your preferences are etc Hope this helps. Remember no matter how many times you get it wrong you only fail when you give up!!! quemarco 1 Link to comment Share on other sites More sharing options...
samme Posted June 29, 2018 Share Posted June 29, 2018 Probably you'll make a new project folder with your main index.html file and open the project folder in Brackets. The only file you really need from the zip download is dist/phaser.js. If you copy that file directly into your project folder, you'll reference it as <script src='phaser.js'></script> in your index.html file. (See minimal Phaser 3 project.) I think you'll probably have to use a local server together with Live Preview. See Using your own backend in How to use Brackets: Live preview. But even without a local server, you should be able to preview your new project to see if the links are working. The game will still run, but it won't load any images. quemarco 1 Link to comment Share on other sites More sharing options...
Fiona Posted July 13, 2018 Author Share Posted July 13, 2018 (edited) Thanks a bunch for your replies scope2229 and samme! I appreciate your thoughtful responses. It does almost feel like all developers are speaking an entirely different language though (and I'm actually not as much of a tech dummy as I'm sure I sound!) There obviously has to be a knowledge base and vocabulary for any kind of communication and maybe I'm just not there yet. Regardless, although I definitely appreciate your responses it wasn't really what I was looking for except for confirmation that I did indeed need to install a local server and that Live Preview in Brackets wasn't a substitute for that. I actually didn't find it especially straightforward to install the WAMP server either but once I did, I was able to find the "web root" that the Phaser Getting Started Guide refers to and get the Hello World code to show up. I started a document with my notes and will share it here in case it's helpful to other beginnery-beginners! Here is A Phaser Getting Started Guide for REAL Beginners. Please do let me know if I've got anything incorrect in there. You should be able to comment. Edited August 6, 2018 by Fiona Updated the link to my beginner guide - hopefully is a shared link now. Link to comment Share on other sites More sharing options...
iLKke Posted July 20, 2018 Share Posted July 20, 2018 Sad to hear you had trouble with Live preview in Brackets, it is definitely meant to remove the need to run your own server while working. In fact that is probably the main reason to use Brackets rather than say Sublime Text. Other than that I think that your beginner's guide is a great idea! But please consider allowing read access by default. As it is you have to manually allow every single person access to your document. Link to comment Share on other sites More sharing options...
Recommended Posts