Julz57

How large are the files? Page flipping? Linking to databases?

Recommended Posts

Hi,

Yes a NOOB!

Never used Phaser before and wondering how large the files are. I am hoping to remake basic retro games using only four colours. Simple sprites and tile based most likely.

Does the system use page flipping, or the equivalent, to draw off screen and then place on screen? The code to change background colour will be awesome if the answer is no in any event.

The games will be developed for an educational Not For Profit organisation and web hosted. My role is that of an interested volunteer. Ultimate goal is to provide a zero to low cost service to remote areas that do not have access to normal support systems.

Can scores be saved to web server databases to keep user name, current settings, levels, scores and also for review by others? Presume so but did not see it on first glance through.

Otherwise what I have read about Phaser sounds bloody brilliant and cross platform given HTML5 support.

My coding skills are limited (Delphi 5 "spaghetti code" many years ago) but the examples here and tutorials should make the learning curve easier than I expected. Yippee!

Thanks in advance.

Julz57

Share this post


Link to post
Share on other sites

Current v2 (2.6.2 I think) is pretty hefty on disk at about 791kb for the minified build, but this gzips to ~170k (if you serve from somewhere like https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js) and you can create customised builds to further shrink this down if you wanted to.

Phaser is a client-side framework, there is no integration with a backend, if you want to save/load data then use a different library (or create one) to help fulfil this requirement.

Phaser v2 uses a slightly modified version of Pixi (an older version I think) which is super-fast canvas and webgl rendering library, Phaser v3 will move to a different rendering layer but both Phaser and Pixi are heavily performance tested across a wide range of devices as well as being battle tested in production by 100's (if not 1000's) of apps/games so short of creating your own custom rendering layer (which requires a large time-investment and no small level of skill) to target your own specific requirements its about as fast at rendering as you can currently get.

If you're looking at targeting remote areas with sketchy or slow internet you might want to look in to mechanisms for avoiding online loading of assets such as appcache (now deprecated), service workers (replaces appcache functionality and more) or bundling into a native app wrapper (Electron, Cordova etc). These are well outside of the scope of Phaser and can be considered advanced web development.

Phaser has a nice API, solves a lot of common problems, has a fairly shallow learning curve and really benefits from top-notch documentation, examples, community help and active development. This second set of pros really help set it apart from alternatives.

Share this post


Link to post
Share on other sites

Modern browsers handle all of the back buffer processing for you (i.e. your page flipping question), so you don't have to do it yourself, and Phaser doesn't worry about it either. The canvas is cleared down each frame and each item is re-rendered in the position it needs to be in. There are ways to avoid this, like using a BitmapData object instead, or just accepting that is how modern browsers work and going with the flow!

Share this post


Link to post
Share on other sites

Thanks rich and mattstyles.

I'll start with Phaser as I like the documentation and forum here. If slow speed when loading becomes a problem I will have learnt some good coding practices in any event. :)  Data management will still be an issue but I will find a way around that. Might be a bit clumsier than hoped for but then life doesn't always give us everything we want. :(

Even just prototyping the game concepts to workable examples and handing the reins over to someone else down the track will be a huge step forward for the organisation. They have no one capable of helping them in this area at present. I've recently retired and thought what a great productive hobby and all for a worthwhile cause. They may be able to apply for Government funding or I could even try working with a University programming department and make it a project for their students after prototyping.

Which is the preferred OS when developing with Phaser? I note that there are multiple options. I can access Linux (which version is recommended?) and Windows 10 easily so these are my preferred options. Are all OS's updated to the latest release at the same time?

What is the recommended editor tool? Any recommended books as references? The tutorials seem pretty good thus far.

Does the "online sandbox" version actually allow saving of files to the PC or a thumb drive? My understanding of a sandbox is that anything done during a sandbox session vanishes when the sandbox is closed.

Sorry to have lots of questions again but I couldn't find answers for them on the site.

Thanks for your help

Share this post


Link to post
Share on other sites

I can't answer all your questions (great questions BTW I think).

9 hours ago, Julz57 said:

If slow speed when loading becomes a problem

Honestly, this is probably not going to be a problem. 170k gzipped is a pretty standard JS weight (rightly or wrongly). Rubbish internet areas and rubbish devices (JS parsing can take a significant amount of time on low-powered devices and this is before you even start doing anything) always require special attention. Rich (or others) can correct if I'm wrong here but I expect the Phaser.min file to include all the Phaser stuff, some of which you won't need i.e. I think both Arcade and P2 physics will be included and P2 does a lot of stuff so is probably a little hefty, if you don't need that physics stuff then I think creating a custom build is easy enough and you can omit these from your bundle.

However, start with everything, test, and only look in to a custom build if it becomes a problem, my guess is that it probably won't be a significant problem.

9 hours ago, Julz57 said:

I've recently retired and thought what a great productive hobby and all for a worthwhile cause.

What an awesome thing to do! I wish all the luck.

9 hours ago, Julz57 said:

Which is the preferred OS when developing with Phaser?

OS is irrelevant for browser development, the browser is your platform. Use whichever OS and editor you are comfortable with.

I use Atom on OSX. Phaser doesn't care. VSCode seems pretty popular at present and Sublime is always popular for web development. 

OS only becomes an issue for build tools, which Phaser isn't concerned with, but nowadays this isn't really a serious issue. Windows peeps sometimes need a few workarounds to get working happily but it's usually fairly trivial. I work in a building with lots of teams and lots of devs, mostly Mac, but plenty of Linux and Windows users splattered around, no issues with multiple OS's for code development.

Some devs love to bikeshed over editor choices, but, just use whatever you're most comfortable with. Any popular (and most unpopular) choices will all do the same stuff anyway.

What I would say is that using a Version Control System (use Git) is a real boon, if you're not comfortable with using one then it's worth learning. It's not essential immediately (or even at all) but it will really help, particularly when you start working with others or a team.

Share this post


Link to post
Share on other sites

Hi Matt,

I am a retired optometrist and want to build my games for a not for profit professional body which has a specific trust for helping disadvantaged children. Having also traveled in outback Australia I know the hardship and isolation of many of these communities. My games will be designed to treat lazy eyes and other eye co-ordination problems. My goal is to give the IP to the organisation and allow them to bill optometrists to provide income for the Trust. I previously made a series of games with an engine built on C+. Hence the page flipping question earlier.

To do this I need to present unique images to each eye. There is a process that I developed to select specific colours as background and foreground for each eye. I have effectively donated this IP to the Trust and supported them financially as well via sales. BUT the software was reliant on Windows OS and many wanted apple, linux variants. Hence my interest in HTML5, and Phaser, as a cross platform system.

My intention is to recreate my original software in Phaser plus add more 'game style features' for patient, aka children, motivation.  That's why  I wanted to link the scores to actual patients and their referrer in a database on the server. Their website uses Joomla to manage groups and access to webpages. All software is to be based on the Organisation's server and access given to practitioners for payment of a fee which will go to the Trust. They in turn will give access to their patients. Free access would be provided those who would be referred by social agencies.

I know their is no database link but am assuming scores, levels achieved,.. can be saved to a text file. If on the user or server isn't essential but server would be nicer as the referrer can then review results directly.

I posted a question on graphics and collision detection if sprites or layers are made invisible. This would do the 'page flipping' which is essential for my programs to control view by each eye. Two layers would be setup and foreground / background colours used to make each layer and sprites visible to one eye only at a time. Just wondering if you could have a look and give me a thumbs up or down. Once I know it is doable I will start digging deeper and deeper into the software systems and teach myself enough to do what needs to be done. My goal isn't beauty of coding but rather something that just works.

My specialty in practice was helping Learning (Reading) delayed children. While not 'Dyslexia' this term is easiest to understand in the general population. Reading can be unlocked in these children by reprogramming neural pathways using a range of physical and computer based activities. So once the lazy eye stuff is done then i''l shift gears into the other. One in three children are in the bottom one third of the classroom. Sad isn't it? I used to be able to do the training with the aide of parents in 6-12 weeks, with some requiring repeat of 6 week blocks of therapy down the track. In this area the software needs to be made to train the parent more so than anything else.  The other wonderful thing with my process was that reading was unlocked without showing the child a single word of the english language. This makes the process international.

So I've got a lot on my plate to keep me going in retirement. And the best thing is that I don't want a dime for my knowledge and experience. My profession and my patients were good to me so now I'm giving back. It feels wonderful not to be driven by the mighty DOLLAR!

Thanks

Julius 

BScOptom MScOptom FACBO FCOVD

 

Share this post


Link to post
Share on other sites

What a fantastic project! 

I'll have a look at your other thread to see if I can help. The community here is very knowledgable and very active so don't hesitate to post queries, no matter how small, it's helps us all by working through problems that projects face. Also, make sure you post links when you get finished (or even earlier if its in a workable state) to help get feedback.

My daughter has a bit of 'bonky' eye which will likely require surgery in a few years to rectify (she's too young at present) so this type of project strikes a personal chord. I wish you all the best in making this happen.

How do you present an image to one eye at a time? Do you use something like Google Cardboard to have a split screen view? (Google often give these out for free to various organisations and good causes, I've done some prelim work for a charity a few years ago that proposed using Cardboard, never got off the ground unfortunately).

If you need any help scaffolding a project, or with building JS for production, or with setting up Git repos or stuff like that please give me a shout and I'll help if I can, this sort of stuff is tedious, time-consuming and can get fiddly if you haven't done it 100 times before (which I have, and I have loads of junk lying around to make the process easier when I set up new projects).

Share this post


Link to post
Share on other sites

Hi Matt,

Thanks again. The trick to presenting to one eye at a time is to use coloured filters before each eye. Then when particular background and foreground colours are used then it is possible to show an image to one eye at a time. So "page flipping" from RE to LE with different images for each eye. This is a much better approach than the split field with cardboard dividers. The approach is akin to the early 3D movies that relied on wearing coloured glasses but taken to a higher level as it is designed to be therapeutic. Filtering of colours must be precise as leakage of what the bad eye needs to see to the good eye undoes the whole process.

I have the "page flipping" solved as with each game cycle I can switch background colours and make sprites visible or not by changing the render property to True or False without changing Collision properties.

Games can be designed to say have the child see the character and enemies with just the weaker eye and paths with the good eye. So success only comes with using the bad eye and thus the brain encourages development of new neural connections to make it happen. There are actually four modes used in therapy.

Anti-suppression:- This is where we start to wake up the bad eye. This stage is an ongoing feature but sometimes real shock therapy is needed at the outset to get the ball rolling. It is also important to check the type of eye deviation and secondary adaptations before starting this process or the patient can end up with permanent untreatable double vision.

Monocular:- one eye only: aka patching the good eye 

Biocular:- Both eyes working but only one eyes sees the fine detail. This is done by leaving both eyes open but only the weaker eye sees what is on the screen. It is the intermediate step between Minocular and Binocular which many people forget to use. It is important as for most children once the patch is removed the bad eye just shuts down again and leaves it to the good eye. So it is important to teach the brain to let the bad eye work with both eyes open.

Final mode is Binocular:- This is both eyes working and where things like stereo vision (3D) happen. There is a lot of background muscle control and high order neural processing happening at this stage to keep the eyes in good alignment or we get double vision.

Happy to help if I can with info for your daughter. I'll give you my contact email so it can be offline.

My work will be donated to the Australasian College of Behavioural Optometry (www.acbo.org.au) and the monies to go to the Susan Larter Trust. I've already given them my left over vision therapy products to sell to raise money for her Trust. Susan was a great optometrist and friend. She died tragically and her loss impacted the Behavioural Optometric community. Neuro-developmental optometry is a better word to use but the other is historic. More importantly I want to create an ongoing income stream for the Trust hence my project.

I need to get the concept to a usable program before I make presentations to the Board of ACBO. The games are simple retro games like Pong, flash Cards, Platform Horizontal scrolling and "Find the letter" or any arcade game but emphasis on movement is more horizontal than vertical as this is how we scan when reading on computers or those old things called books.

BTW. My first PC was an Amstrad with a cassette tape to load programs and store data. It had a whopping 64K of memory! Yippee!

So now you know what, where, when, how and why of my goals. Any help would be greatly appreciated.

BTW I quote "If you need any help scaffolding a project, or with building JS for production, or with setting up Git repos or stuff like that please give me a shout and I'll help if I can, this sort of stuff is tedious, time-consuming and can get fiddly if you haven't done it 100 times before (which I have, and I have loads of junk lying around to make the process easier when I set up new projects). " WTF?

Yes my skill level in this area is currently very low. But I have been a lecturer, a clinical researcher and many other things during my eclectic career so I love a challenge and am looking forward to it as much as helping the Trust. I have no funding but plenty of time to do the hack work needed to make it happen. But some assistance to get me going would be wonderful. But presume thatI know very little. I have just started an online course on basic HTML scripting if that gives an idea of my skill level in this area. :( It doesn't seem that intimidating so far; more like learning another language than anything else. They all have their quirks, rules and key words. Never used JS or Python so a bigger challenge here.

Cheers

Share this post


Link to post
Share on other sites
On 02/09/2017 at 2:25 AM, Julz57 said:

BTW I quote "If you need any help scaffolding a project, or with building JS for production, or with setting up Git repos or stuff like that please give me a shout and I'll help if I can, this sort of stuff is tedious, time-consuming and can get fiddly if you haven't done it 100 times before (which I have, and I have loads of junk lying around to make the process easier when I set up new projects). " WTF?

Ha ha, ignore that for now! Don't worry about it, you don't need it. 

Git is a system for making revisions to your code, so, a typical development cycle would go something like:

* Make changes to your code

* Commit those changes, this creates a code revision

* Repeat

This is the basis of using Git, it just means you can go backwards to any point in time. Step 2 (above) does not store the whole codebase, just the differences from the previous revision, which is as much about saving disk-space (etc) as anything else, but, it has the advantage of telling you the differences between revisions to see what changes have occurred, sometimes this can be useful i.e. if you've introduced a bug somewhere it can sometimes be useful to see when it started occurring and it can be possible to pinpoint the exact code change that introduced the bug.

The other big advantage is that you can create an account at Github.com (or others, such as bitbucket, or gitlab, there are lots) and have all your code stored remotely. This adds one extra step to the above 3, once you 'commit' changes, you then push them up to the remote (at Github.com, for example) so all your code is kept externally (as well as locally). If your HD breaks, no worries, you can just get it from the remote. If another developer starts working on the project they get the code from the remote and git has lots of features to let plenty of developers work on the same codebase.

I'd recommend you get going locally and learn the coding stuff, then worry about grabbing a github acct, installing git (Macs have their version preinstalled, probably most linux distros do too, windows you'll have to do it yourself) and doing this stuff.

It's something to keep in mind but don't worry about it yet.

On 02/09/2017 at 2:25 AM, Julz57 said:

But presume thatI know very little. I have just started an online course on basic HTML scripting if that gives an idea of my skill level in this area

Learning web stuff can be hard in a way as you generally have to learn some HTML, some CSS and some JS to get going. In your case you are starting with canvas rendered stuff so this actually simplifies things as your HTML/CSS skills will hardly be tested at all and it's all JS skills and an understanding of canvas APIs (Phaser wraps most/all of these for you).

On the face of it JS is very easy to get going with as its very forgiving, as you get a little further you'll realise this 'forgiving' trait is bad and there are lots and lots of gotchas with JS, but, persevere, JS is quirky but its very easy to get something on the screen and to debug it whilst its running.

Share this post


Link to post
Share on other sites

Thanks Matt,

The Phaser Editor has been recommended to me so will probably go down that path to simplify things. Just a few questions though.

  1. Does it get updated as new versions come on stream. I'm seeing a lot about Phaser 3 being in the pipeline. So to wait or not?
  2. An IDE is??? My understanding is that it is a coding shell reducing effort and simplifying the processes as all are combined into one entity. If it is a program then is it OS dependent or rendered by the browser? I can't find info on this.
  3. Is installation easy for a noob? I gather there must be support for this somewhere. Getting the programming structure up and running is a bit daunting but slowly getting there.

Other than that liking Phaser more and more. Doing background reading aka Game-Development-for-Human-Beings-ebook and HTML concepts on 'Tutorial Republic'. I know you said js is forgiving but starting on the right foot is always an advantage down the track. Bad habits can be difficult to break. I taught myself Delphi by buying a book on it and reading it from cover to cover. Took me two weeks to go through,  back and forth, and my wife thought I was mad. So never had any formal training in coding.

Would you recommend anything on game design logic? I'm thinking that the planning stage should be the longest and most demanding. Once concepts are honed then the coding is the simple(?) part especially if the planning takes into account the software's capabilities. So like Delphi I will read and read until things begin to come together and then start getting my fingers dirty on the keyboard.

Also thinking from the promos for the Phaser editor that multilevel games are possible along with loading and saving data. Already been given a link to 'HTML5 local storage' which I reckon will meet my needs: hence reading Tutorial Republic.

Also thinking heaps of tutorials and examples to get me going once my initial hurdle of understanding the development environment as cleared in my mind. A really great community here. I'm lucky that I don't have to reinvent the wheel as in a game concept. I'll just clone and reformat to my 4 colours and bingo, it's done.

Sounds quick and easy when I say it.

Cheers

Share this post


Link to post
Share on other sites
47 minutes ago, Julz57 said:

Does it get updated as new versions come on stream. I'm seeing a lot about Phaser 3 being in the pipeline. So to wait or not?

I think its just version 2 of Phaser and I'm assuming it does, or that you can choose which version of Phaser (which makes sense in case a new version breaks something you rely on, which should be a very rare occurrence).

I'd say get cracking with v2, I think v3 is a little way off and v2 will work great for the foreseeable future.

49 minutes ago, Julz57 said:

An IDE is??? My understanding is that it is a coding shell reducing effort and simplifying the processes as all are combined into one entity. If it is a program then is it OS dependent or rendered by the browser? I can't find info on this.

Generally, an Integrated Development Environment is a program that everything you need to get going. For other languages this will include compilers, debug tools, package managers, editors etc etc, for JS much of this is not necessary so the benefits (or necessity of) an IDE diminish. A text editor really is all you need to get going as you can fire client-side JS in to the browser and rely on browser debug tools.

It depends on what you are used to. I use the command-line extensively to do stuff like run builds (I use newer JS syntax, ESNext, or ES2016, ES2017 if you've heard those terms, which require a build step to work in all browsers), access npm as a package manager etc. I then use Atom as my editor, code completion is decent enough, its fast enough and I can customise the look and feel easily as its web tech.

Other popular editors for web development are Sublime and VSCode, some prefer bigger editors like WebStorm. There are even online editor environments that run in your browser.

54 minutes ago, Julz57 said:

Is installation easy for a noob? I gather there must be support for this somewhere. Getting the programming structure up and running is a bit daunting but slowly getting there.

Phaser installation is dead easy, just download the relevant version file and include it as a script tag in the page, alternatively include it from a cdn like https://cdnjs.com/ (this will require you to run a local server for development, and require internet connection, you might not be running locally yet so just download the Phaser file and load from disk).

56 minutes ago, Julz57 said:

I taught myself Delphi by buying a book on it and reading it from cover to cover.

https://gumroad.com/l/ySfMa/ is a good place to start I imagine and I think there are loads of good Phaser tutorials out there to get started.

58 minutes ago, Julz57 said:

Would you recommend anything on game design logic?

Resources can be really varied on this as its a huge field. I've found some of this http://gameprogrammingpatterns.com/game-loop.html to be a good read, but there is loads out there, many will target JS specifically to explain concepts.

1 hour ago, Julz57 said:

I'm thinking that the planning stage should be the longest and most demanding.

Planning is, of course, very important but JS is very easy to get up and running so you really benefit from taking the opposite approach of getting things up and running, inspect how it works, gain insight, react to your inspection by iterating on your build. Agile methodology is based on a lot of these benefits. Get stuff up and running as quick as possible, then react and iterate on your product, gaining insight from working software along the way. You will occasionally hit issues where you 'man, I wish I'd planned this better up front', but that is the value of experience, without that experience you won't design it right anyway so you might as well get to a point where you have as much info as you can (generally, at the start of the project you have the least amount of info to make decisions against so deferring making those decisions until later can be advantageous).

Share this post


Link to post
Share on other sites
12 minutes ago, mattstyles said:

Phaser installation is dead easy, just download the relevant version file and include it as a script tag in the page

Yes can download the file and save it but then 'include as a script tag in the page". WTF! I need a cook recipe to start with pictures!!! Once in I'll have a shit load of fun.

Ok am thinking a script tag is part of a HTML page but where do I find, create, get access to this page. Herein is my dilemma and reflects my poor knowledge of HTML and JS.

I use Firefox as my browser but beyond that nothing more in terms of HTML application, let alone what you say is easy. Easy if you know how but not when you have no idea.

Agree that just getting my hands dirty and start coding is a good idea once I know how I am going to do it. And so I go around in circles as I do not know where to get off.

I thought it might be a good idea for me to do a tutorial "Getting started with Phaser for ABSOLUTE dummies" and publish for others like me who are intimidated by the starting process. It would also help me BETTER understand what I am doing and hopefully help others. Interested in co-authoring? If not know someone who might?

Share this post


Link to post
Share on other sites

Ok Matt, I think the light is beginning to shine for me. I've been Googling JS script coding and found freebies like JS Bin which is used for testing and debugging web based scripts. So is this the page I am meant to copy the Phaser link to and then i see it all on 'my web page'? Sorry for being such a pain in the arse but it is all Chinese with a little bit of English as the fog clears.

Share this post


Link to post
Share on other sites

Hi @Julz57

Yep, don't worry, there is a lot to learn, particularly if you want to go down the modern JS development route.

https://github.com/mattstyles/phaser-es2015 I have a very very basic Phaser template project here, but this is likely a bit more complicated than you want as it involves a build step to turn your source code in to stuff that the browser can actually run. To get your hands on it install git on to your machine and run `git clone https://github.com/mattstyles/phaser-es2015.git` which will whack the repository on to your local machine, alternatively there is probably an option to download a zip (or tarball) and unpack it on your machine. You'll then need to install node (which will, in turn, install npm), latest version should be fine. Then (as documented in the readme) you just run `npm install` from the command line to install dependencies, and finally `npm start -- -open` to start a development server. This is perhaps more work than you want to do.

If you look at the html file in that repo you'll see it contains 2 script tags:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Phaser Browserify ES2015 Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.6/phaser.min.js"></script>
</head>
<body>
  <script src="index.js"></script>
</body>
</html>

The first tells the browser to download (and then run) Phaser 2.4.6 minified build. Once done the browser continues to parse the html and ends up at the 2nd script tag, which it tries to load from a relative path. The first script tag gets it from the internet (from a cdn) so requires a proper server to be running, which is also probably more than you want. If you set up a folder structure that contains (download the phaser file and stick it in the same directory as your index.html):

project
  - index.html
  - index.js
  - phaser.min.js

Then use:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Phaser Browserify ES2015 Example</title>
  <script src="phaser.min.js"></script>
</head>
<body>
  <script src="index.js"></script>
</body>
</html>

Double click (or open) the index.html file and most OS's will fire that into your default browser (likely Firefox in your case) and you'll notice the url is something like `file://path/to/my/index.html`. I'm not sure if Phaser works serving from file protocol but if it does you are now up and running and can start coding into your index.js page.

The reason the cdn script tag does not work is that file:// protocol has a number of restrictions, this being one of them (I'm pretty sure).

Share this post


Link to post
Share on other sites

Hi @Julz57

Phaser Editor author here!

12 hours ago, Julz57 said:

Thanks Matt,

The Phaser Editor has been recommended to me so will probably go down that path to simplify things. Just a few questions though.

  1. Does it get updated as new versions come on stream. I'm seeing a lot about Phaser 3 being in the pipeline. So to wait or not?

 

Each time Phaser is updated we deliver a new version of the editor, to keep it in synchronization. That release could take a week more or less. The update is automatically. When Phaser 3 gets stable we are going to support it.

 

 

Quote
  1. An IDE is??? My understanding is that it is a coding shell reducing effort and simplifying the processes as all are combined into one entity. If it is a program then is it OS dependent or rendered by the browser? I can't find info on this.

 

Yes, it is an IDE. Actually, it is a set of plugins on a rebranded Eclipse IDE. It runs on Windows, Linux and MacOS. The games created with the editor run on the browser, but the editor itself is a regular desktop application.

 

Quote
  1. Is installation easy for a noob? I gather there must be support for this somewhere. Getting the programming structure up and running is a bit daunting but slowly getting there.

It does not require any installation,  just unzip the downloaded file and execute the PhaserEditor.exe file. When you get into the editor you can start with many of the project templates based on the official Phaser examples. It is a nice resource to learn Phaser, because you can modify the examples and run them again. When you feel ready to start making your game you can create a regular project and the editor will do some basic setup for you so it helps too, to get everything working right away.

In addition to the project wizards, the editor provides:

  • A Phaser documentation search tool (Chains) that is special for newbies.
  • A local http server, so you can run the games with a click.
  • A texture packer.
  • An assets manager.
  • An assets navigator and previewer.
  • A smart JavaScript/TypeScript editor.
  • And what is the killer feature: a visual scene maker that you can use to create your levels by dragging objects and making prefabs. Actually, the scenes are compiled into plain Phaser code so you can learn from it or use it with other tools. Phaser Editor can be used  as complement to other text editors like those recommended by @mattstyles

Sure, Phaser is so friendly that you can create beautiful games by just typing in a notepad! However if you try the editor and you like it, please contact with us (developers@boniatillo.com), we have special promos for people who "build games for a not for profit professional body which has a specific trust for helping disadvantaged children" ;-)

 

Here the documentation of the editor:

http://phasereditor.boniatillo.com/docs/first_steps.html

 

Regards

Arian

 

Share this post


Link to post
Share on other sites

Hi Matt,

All beginning tomake sense now. My biggest hurdle was realising what something like Js Bin will do. Namely a webpage and coding repository all in one. And so this was the 'page' you were talking about and yes I could see the 'cdn'  when loading from off site. It was one of those light bulb moments and things began to fall into place. 

Yes still a few steps to get to using phaser but well on the way. So thank you very much for your help.

More than happy to help with info about the 'bonky' eye along with resources and second opinions. I am sure that I can demystify the medico speak for you and put things into perspective. Did so for many years as this is/was my domain. You can contact me on my email directly which i presume you have access to as an administrator. It would a pleasure to return the favour.

Getting back to Phaser I can see there is still some learning for me which I will pick up over time. Yes your proposed path is still a  it of a 'geek speak' nightmare for me but now have the gist of the processing being applied so not as scary. :)

Adrian from Phaser editor has contacted me and I think my easiest path will be to start with an all in one package. I can start getting my hands dirty and coding instead of trying to go through the process of setting up. Still happy to go through it with you as a noob to create a tutorial for ABSOLUTE dummies like me if you are interested. Lecturing to students, my peers, other professionsand the public was one of my pleasures in my career. It was a skill used daily when helping my patients understand under their visual problem, illness and treatments. So well practiced in the process so to speak.

Again thank you so much. Be in touch if i can help.

Share this post


Link to post
Share on other sites
4 hours ago, Julz57 said:

More than happy to help with info about the 'bonky' eye along with resources and second opinions.

Many thanks, I've PM'ed you, I can't see your email, that's kept private.

4 hours ago, Julz57 said:

Adrian from Phaser editor has contacted me and I think my easiest path will be to start with an all in one package.

This sounds like a great idea, sounds like the Phaser editor solves a raft of annoying and time-consuming problems (setting up a project, dev server, versioning etc etc) that you don't want to tackle at the moment.

Share this post


Link to post
Share on other sites

Hi matt,

I've had a look at the help filefor phaser editor and have noticed repeated statements as to not doing exactly what phaser engine aants or likes as well as some .auto fill commands missing. So not sure now. Went back to the sandbox and that looked a lot cleaner in documentation and fully integrated. Am I correct in saying this?

It would make life simpler but then perhaps not if I  need to know what phaser code should be  to compensate for the anomalies of phaser editor.

Have spent a lot of time Googling and looked at cloudeflare, cdn ,... so what was chinese before is becomkng intelligible . The acronyms used are the most daunting component of getting started. Without an insight into those it is all gibberish and meaningless. A bit like wanting to get into a building with a 10m high wall surrounding it and no gate to walk through. Yes frustrating for experienced users but even more frustrating for noobs because we can hear you from the outside but can't get in!

One query with the sandbox. Where and how does it save the files to? There is no Save button. Presume it defaults to the directory where the web page resides and places it all there when Run is launched. Loved its built in code completion which seemed vastly superior to phaser editor. A fair comment?

Thanks again. Will contact you re the other matter directly.

Share this post


Link to post
Share on other sites
2 hours ago, Julz57 said:

The acronyms used are the most daunting component of getting started. Without an insight into those it is all gibberish and meaningless.

Yes, there are many many components that go into creating web products and we haven't even touched on VCS branching strategies, CI/CD, TDD/BDD or DNS. Ha ha!

Thankfully, many acronyms and stuff you see can safely be ignored for now.

2 hours ago, Julz57 said:

One query with the sandbox. Where and how does it save the files to? There is no Save button.

https://phaser.io/sandbox/edit/1 (is this the sandbox url or is there something else I'm unaware of) I could be totally wrong here (I've never used the sandbox nor Phaser Editor, but Arian can correct me if wrong) but the sandbox is just for trying out ideas, hence no save functionality. Phaser Editor is a tool to build a real game/product.

2 hours ago, Julz57 said:

Presume it defaults to the directory where the web page resides and places it all there when Run is launched.

I would guess (it is a total guess) that it collects all your code into a single code file and then runs that in an iframe possibly. Not sure if it does this all on the client or if there is any server integration at all to create the runnable code.

 

Share this post


Link to post
Share on other sites

Thanks again. Have been in contact with Arian and I suspect using both will be the best. This way I can use the auto  complete of Sandbox on top of what his editor does. His simple approach to keeping all files together and packaging them will be marvelous for my needs. Both are good products and getting the best of both worlds is the ideal solution.

I am nervous about installing his software Editor on my laptop (Linux Lite) as they warn anything not approved by them for their distro can cause a system failure. I had enough trouble just rescuing this laptop from a Windows 10 upgrade so will wait until I get home in 2-3 weeks. Will keep busy reading about HTML and Phaser and also keep going through Phaser examples.

Forever learning and having fun(?)

Share this post


Link to post
Share on other sites

Hi @Julz57

 

12 hours ago, Julz57 said:

Thanks again. Have been in contact with Arian and I suspect using both will be the best. This way I can use the auto  complete of Sandbox on top of what his editor does. His simple approach to keeping all files together and packaging them will be marvelous for my needs. Both are good products and getting the best of both worlds is the ideal solution.

 

Please feel free to open an issue here (https://github.com/boniatillo-com/PhaserEditor/issues) if you find any problem or have  suggestion regarging the Phaser Editor auto completion. 

 

12 hours ago, Julz57 said:

 

I am nervous about installing his software Editor on my laptop (Linux Lite) as they warn anything not approved by them for their distro can cause a system failure. I had enough trouble just rescuing this laptop from a Windows 10 upgrade so will wait until I get home in 2-3 weeks. Will keep busy reading about HTML and Phaser and also keep going through Phaser examples.

Forever learning and having fun(?)

I don't think it is going to break your system :), anyway a good reading is good and Phaser can be developed with a notepad. I thought you just tested the editor since you found the autocompletion is not working :)

Share this post


Link to post
Share on other sites

@samme Concept / example  , this one is actually kind of interesting:

"The Main Library at Indiana University sinks over an inch every year because when it was built, engineers failed to take into account the weight of all the books that would occupy the building." ,

EDIT:  possible hoax it seems.

Edited by samid737
hoax

Share this post


Link to post
Share on other sites

Hi @Arian Fornaris

No I haven't used the editor yet. I always scan through documentation first to get an idea of what, where, how and why. Just an old habit. I tend to get an overview and then jump in. So I saw the exceptions listed in the Phaser editor documentation link that you provided. For example not recognising the '.' and needing to use '_' in some cases for autocompletion.

You said it was just an executable file so I can just download it and save in my file system and it will work? Thant sounds just too easy to be true and my kind of installation. This would reduce the fear of the risk of my Linus distro crashing irreparably. I worry about the things that I do not know or understand. Linux and Windows are different executables?  Presume yes. Are the help files inbuilt or a separate download?

The exceptions listed was in your link why I was interested in Sandbox. Using two tool instead of just one.  I really don't think my coding is going to be very complex so perhaps I am worrying about nothing? The most complex aspects will be the HTML API calls to Save and Load/Read files. And from you say this will be simpler in Phaser editor. Only .txt files in any event.

Cheers

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.