dragonjet Posted October 1, 2014 Share Posted October 1, 2014 IntroductionHi, I'm new to HTML5 game development, but have an extensive background in Flash AS2 game dev. I've already quit the flash game industry before AS3 came out, so I'm also outdated there. Since then, I've been a web developer for PHP in startups and also did JavaScript. So I have background in both Game design and JS scripting, thus HTML5 would be a perfect comeback for me. SituationI've seen Phaser docs and it's example and I'd have ro say I'm excited to start using it in a project in my mind. However when I get down to the code, some basic things prevent me from progressing. The game I'm planning is a fairly large game, having multiple scenese, such as free-roam world, battle scenes, city with npcs, buy/sell, quests, equipment, so yes you're thinking correctly, it's an RPG. IssueHaving a PHP background largely involving OOP and frameworks when I code, the standards stuck to me and I'm looking for it in Phaser. I'm sorry if I think this way, but Phaser looks more like an API to me, rather than a framework. The statement should not be taken literal down to the last word, I just feel that way. It seems to me like a programming interface (api) where I can interact with the canvas or dom using its pre-built functions. However, the standards on where to put scripts, objects, images, or whatever is not part of Phaser. or I might just be missing a guide on how to do it. If so, please link, thanks! Alright, in the end, it's not about what you call Phaser, but how you actually do filesystem organization. I'd like to know how you guys do multiple scenes, with each of them having it's own JS file. Like when I enter an NPC shop it will load (or execute) a separate javascript file. This is how it was during my PHP days, where each page load has different JS file so you know which script is running where. So it's not about having it OOP, there are already guides for it, but the issue is really about filesystem and how you load a different script per scene / page. Or am I missing something that my approach is not applicable? Thanks guys for your input! Link to comment Share on other sites More sharing options...
lewster32 Posted October 1, 2014 Share Posted October 1, 2014 In JavaScript you tend to load most stuff up-front and organise it into objects which pose as classes. Phaser has a 'states' system which allows you to neatly separate scenes, levels or however you want to split your game up, but it defines many things at a low level as it tries not to impose a particular style upon the developer. For me, Phaser fits my expectations of a framework very well - a broad and varied set of tools that work well together and allow you to quickly create things. Link to comment Share on other sites More sharing options...
dragonjet Posted October 1, 2014 Author Share Posted October 1, 2014 thanks for letting me know there is such a thing, so now I'm looking at the Phaser.states docs. It looks very nice and makes your scenes modular! However, I'm still looking at how to load separate javascript files into the game, without importing them directly in the html via script tags. As mentioned the game will have many classes separated into javascript files which I'm only planning to load on demand. Is there like a way to add JS files into the current state's preload function or something like that? Link to comment Share on other sites More sharing options...
lewster32 Posted October 1, 2014 Share Posted October 1, 2014 RequireJS will do this sort of thing, and there are examples of how to integrate Phaser with it: https://github.com/photonstorm/phaser/tree/master/resources/Project%20Templates/RequireJS Usually though, projects are put together as separate files and then a build tool like Grunt is used to test, lint and concatenate the separate files into a single distribution file, and then minify for production. This can be automated and Grunt set to watch the files for changes as I have mine set up to do. Ideally you want to be deploying one minified file, rather than lots of separate files loaded on demand, as the HTTP overhead is far worse than the bandwidth consumed loading it all up-front. george and dragonjet 2 Link to comment Share on other sites More sharing options...
xerver Posted October 1, 2014 Share Posted October 1, 2014 Where to put your files so the framework magically picks them up is not what defines a framework, that is a specific feature of specific types of frameworks (convention over configuration). In JS this doesn't happen because you aren't loading files off disc, you can organize your scripts however you want. Include each of them with script tags, concat them to a build file and include that, build with browserify, build with r.js, pull in with require.js, there are tons of ways to organize your projects. Do whatever works best for you. Link to comment Share on other sites More sharing options...
sharbelfs Posted October 1, 2014 Share Posted October 1, 2014 I think would be possible to use the Loader.script to load a script file when you need. i already used sometimes and worked fine Link to comment Share on other sites More sharing options...
dragonjet Posted October 2, 2014 Author Share Posted October 2, 2014 Hmm I like this idea. Although it slightly came to me but I wonder why I never really considered it before. Minify-Concat would be the way to go for distribution. I just need to adjust myself to this new environment, thanks all! RequireJS will do this sort of thing, and there are examples of how to integrate Phaser with it: https://github.com/photonstorm/phaser/tree/master/resources/Project%20Templates/RequireJS Usually though, projects are put together as separate files and then a build tool like Grunt is used to test, lint and concatenate the separate files into a single distribution file, and then minify for production. This can be automated and Grunt set to watch the files for changes as I have mine set up to do. Ideally you want to be deploying one minified file, rather than lots of separate files loaded on demand, as the HTTP overhead is far worse than the bandwidth consumed loading it all up-front. Link to comment Share on other sites More sharing options...
Recommended Posts