mattstyles

Moderators
  • Content Count

    1,522
  • Joined

  • Last visited

  • Days Won

    13

mattstyles last won the day on August 25 2017

mattstyles had the most liked content!

About mattstyles

  • Rank
    Advanced Member

Contact Methods

  • Website URL
    github.com/mattstyles
  • Twitter
    personalurban

Profile Information

  • Gender
    Not Telling
  • Location
    UK

Recent Profile Visitors

5,651 profile views
  1. mattstyles

    HTML Source Code Game

    You always use that project as source material. I expect I ended up installing a newer version of socket.io and that is probably over a major version hence it is broken. So, yeah, maybe that project will help you get started. Either way, good luck getting something up and running. Multiplayer is hard so keep at it!
  2. mattstyles

    Porting HMTL5 Game made with Phaser 2 to Android & iOS

    Cordova is still (pretty much) the only way to do this using JS. The React-native project can also do this, without Cordova, puts it benefits are its tie-in with the React community, so isn't really applicable for your needs. Cocoon and other projects like Phonegap are just wrappers around Cordova. I can't really comment on their usefulness as I've never found Cordova particularly difficult to set up myself, the docs are excellent and they have good getting started guides. Cordova (and thus cocoon/phonegap/etc) work by creating a skeleton native app with a webview inside. They inject a number of things to allow better communication between the webview and the hardware without you as a web developer having to dig around in native code (i.e. you want access to native features that the web does not surface like persistent storage, menus, push notifications etc then Cordova plugins handle this for you and provide a web way to access it). Cordova punts whatever html you want in to the web view and also adds a ready handler (I forget the exact handler, think it might be `deviceready`), so, if you had canvas implemented JS game (i.e. limited DOM) your html might look something like: <canvas class='js-canvas'></canvas> <script src='game.js'></script> <script> document.addEventListener('ondeviceready', function start () { window.Go() }) </script> This assumes that your `game.js` exposes a global `Go` function which starts everything going. There are lots of other ways you can start you game going and they are mostly the same as the web with one key difference: the ondeviceready handler is crucial as that is when Cordova lets you know plugins and any other stuff is ready for your webview to start going. Normally this is moot in the web world, although its pretty akin to the domready event that some people still like to use.
  3. mattstyles

    HTML Source Code Game

    Unfortunately the git repo you posted for chowka-bhara does not contain a package.json, which it should. To make matters worse now.js no longer exists, there is a git repo for it here but looks like the author has kindly donated the npm name to a project which is maintained (now.js was last touched, in github at least, 7 years ago). You can get around this as you have the zip (I used your zip for now, haven't looked at the other) or you could grab and build it yourself from the above repo link. I managed to get it running (see attached screenshot) using the following slightly awkward process: * Make sure you are using an old version of node, this project is old and won't even fire up. I used 6.14.3. * install socket and node-proxy (npm i socket.io node-proxy) * unzip now-master and copy in to node_module/now (this is almost like installing from npm) * run the main.js file using node (node main.js) This fires up the server and starts it serving up the stuff it needs. Unfortunately there is also a problem in the repo with the client code so it errors and the program does not work as expected (it is unplayable), see error screenshot.
  4. mattstyles

    Using PIXI to achieve Sprite parabolic motion?

    Pixi just handles the rendering, apologies if I'm wrong but it does not include a physics library. The sort of ball mechanics I think you're after would be fairly easily modelled in any of the various physics libraries that are out there. I've played a little with both matter and p2 with Pixi, both are excellent (in my view), but there are many other alternatives that could handle this easily.
  5. mattstyles

    When to move on to a frame work?

    Pro tip: this never changes! I tend to type things out from tutorials or code snippets if I'm not comfortable with the underlying language or concepts in play. Sure, its time consuming, but, you'll be thinking about it whilst typing so you'll be learning. I'm not going to tell you not to follow your dream, but, this approach sounds very pragmatic. Don't go thinking its easier to get a job as a self-taught person though, depending on where you live, web development is very competitive (although probably not as competitive as web game development), anything that makes you stand out from the others is a good thing, and that includes some sort of formal training. It most certainly is not necessary (for most jobs out there) but, maybe consider if you could do a short course, it shows you are serious, but, it is usually time consuming and costly so may not fit your circumstances. Have a think about how you want to stand out. Hiring managers often have less time than they would like to review candidates, having easily accessible examples of your work (hobby work) is very useful, both the output and the source code. I'm not convinced this is true, but might be a geographical thing. It is incredibly hard for us to find decent Android devs, incredibly hard, even if blew the budget on it, conversely, finding a decent web developer (particularly if we could up the budget) would be relatively straight forward.
  6. mattstyles

    When to move on to a frame work?

    Trololololo He he, its all good. A large chunk of modern web dev is application development, given newer technologies for doing it there is a very good argument that the average web dev only needs rudimentary knowledge of CSS and the tooling takes care of most of the crud you have to deal with when relying on CSS. This is the key driver in everything you said. If you want a job at the end of this adventure then using tools like Unity, GM2 and Construct will only prepare you for a job in those fields. If you want a job more generally that utilises web dev (everything from gaming, to static site stuff to full blown applications) you'll need to know the language. In fact, not just one, you'll need to understand HTML, CSS and JS and, even then, you might well have to know how JS operates in different environments (Node vs Browsers, for example). With that in mind the question is: "Will using a framework prepare me more generally for a JS development role?" The conventional loudest voice, until recently, in this field is that (as you have hinted) frameworks will hide you from the actual language. Thankfully, the opposition to this view are getting noisier. Frameworks hide details to the advantage of speeding up development. What this means in practical terms is that you will be more productive if you reduce the amount of code you write, and using a framework, or, more generally, using modules or packages or libraries, reduce the amount of code you write. The practical up-shoot here is that you end up writing the code that directly does something in your application. The answer to the above question also hinges around what sort of learner you are. Again, it usually falls in to two camps: * "I like seeing things happening", "I like to visualise changes" or "I get demoralised if I can't see what is happening" -> if you find yourself agreeing with any of these then use a framework/library immediately to rocket fuel your productivity. Get things out there, get them finished if you can (don't get hung up on this whilst learning, but it is an important skill). * "I like knowing how things work" or "Whilst learning I like to get my hands dirty" -> if you agree with these then ditch the framework, at least in the short term. Sure, we could have an argument about how far you go, but, if JS is your language and you're primarily interested in getting something on the screen then the browser is your environment. No point in understanding what JS gets translated to to be run in a browser, JS is as low as you'd want to go.
  7. mattstyles

    Are 2D HTML5 games profitable?

    There's quite a few resources on this forum, have a look around, plenty of success (and not so successful!) stories. The simple answer is yes, although currently I wouldn't expect to become a millionaire overnight. Weigh it up carefully, many people making decent money out of it could arguable be making similar money working for someone else, but they do it because they really enjoy being their own boss and all the other things that come with that. How to get started? Depends on your situation, but, yes, make your game and throw it on your website. Then have fun generating traffic to your game. The alternative is to sell your game to various game portals and other outlets. Then have fun with business side of that. Writing your own top-notch game is only one piece of the puzzle, you'll also need to have fun with the business side too, unless you want it as a hobby.
  8. Hello arik, You're going to have to be a lot more specific than that... Outline the problem, try to isolate the problem so it is as 'simple' as you can, outline what you have tried (with no success, yet) and what you have learnt so far. These things will help you get an answer to the problem.
  9. mattstyles

    help me to understadn increment ?

    Your 2 examples aren't the same, and I can't see why you'd think they would be comparable. I can see why you'd be confused by the output of the 2nd though, but if you are confused by the output then its to do with the order of operations. Postfix operators (generally) have lower precedence so they happen after other operands, prefix operators (generally) are executed before. i.e. var x = 10 x++ + 2 => 10 + 2 => change x // 12, x === 11 x = 10 ++x + 2 => change x => 11 + 2 // 13, x === 11 I'm not sure on the exact order of operands in JS, but I'd pretty much expect prefix to happen first and postfix to happen last in most expressions.
  10. mattstyles

    Hello - new user - Matty (me)

    HI Matty, welcome to the forums If you have links to your games, whack them in the Games Showcase forum! _edit_: my bad, I see you've already done that! Strong work
  11. mattstyles

    listener in javascript

    You're doing this very naively, so you'd need the flag. The alternative is to implement an actual event pub/sub system (ala addEventListener, or, any pub/sub implementation out there) on your object i.e. import EventEmitter from 'eventemitter3' export const onChange = 'sprite:onChange' export class Sprite extends EventEmitter { scale = { x: 1, y: 1 } setScale (x, y) { this.scale = { x, y } this.emit(onChange, { type: 'scale', payload: this.scale }) } } import { Sprite, onChange } from 'sprite' function doSomething () { console.log('doing something arguments:', ...arguments) } const sprite = new Sprite() sprite.once(onChange, doSomething) Note I'm using ES6 syntax (inc. module syntax) and I haven't tested any of this (I rarely use classes so might have mixed up context or some other stupid error) but hopefully it's easy enough to follow. eventEmitter3 is a really simple pub/sub module and is a really standard implementation. `on` and `off` functions are analogous to DOM `addEventListener` and `removeEventListener`, the `once` method used here is just sugar around removing the handler/callback after the first time it is triggered. This actually functionally gets you to the same place you're already at, albeit without some implicit state hanging around. Depending on your exact use-case this might be more or less useful to you. What this is doing: * Attach a function to list of functions, key it against a string identifier (this is the event) * On another function call (emit) check the list of functions for the string which was emitted * Fire the function when the string is matched * Remove the function from the list of functions to check i.e. the next time that string is used it won't match that function again What you are doing: * Inspecting an object for changes by polling * Reacting to any detected changes by invoking a function * Deciding a course of action from within the function In different scenarios both of these approaches have merit so it's up to you which you prefer. Probably the 'most popular' way of solving this sort of problem is with pub/sub.
  12. mattstyles

    Introduction - HTML5 + Multiplayer Game

    ooooo, I'm not sure I would have arrived at that solution even if I'd seen your source code. Good fix, strong work. `type=module` is coming, but we're not there yet, and I'm not totally convinced we'll get there simply anyway.
  13. mattstyles

    Introduction - HTML5 + Multiplayer Game

    2 - I completely agree with your approach. Yep, some plugins will be too old and not published to npm. In theory you can do something like the following in your main code base: import $ from 'jQuery' if (window) { window.$ = $ } Then make sure your main codebase bootstraps first, then include the plugin script or, include the plugin script in your main bundle _after_ the above bit of code. It's a massive hack but would, in theory, (I've never had to do this) work. I have had to do something similar with Pixi (or maybe Phaser, I forget) plugins before ditching the whole idea as a huge mess and just including stuff globally via script includes. To be sure though, I agree with your approach with attempting to let npm do you package management and harnessing all the advantages you get from it. 4 - Oooh, interesting, you might need to find someone with more Phaser knowledge than I regarding why this actually happens but I know exactly what the problem is. You can see from the file path that the npm build (via the main field in the Phaser package.json) references the source files, so the src/phaser.js is the entry point, i.e. when you `import Foo from 'Phaser` or `require(Phaser)` it is this file that gets pulled in (any subsequent requires or imports being then pulled in and executed). Following that through the first thing that does is attempt to set up some polyfills and following that through we get to the point that the error message tells you about, specifically here when it attempts to check for the performance timing api. It is at this point that hell is unleashed. The cannot read property of undefined error is because your code (or, in this case, Phaser code) has asked the JS engine to inspect a property on an undefined variable type, quite specifically, `global.performance` i.e. you've instructed the engine to look for the prop `performance` on a `global` object, however, it is does not exist and is thus undefined and thus, hell unleashed. I know from memory that Phaser used to include a prolog and epilog to their builds, which basically mimicked the UMD (universal module definition) definition, but you can see from poking through the code base and package.json file you eventually end up in the webpack config and this line is instructing webpack to use a UMD plugin, which takes the place of the prolog and epilog. Again, I know from past experience that `global` is used in the 'semi-official' UMD, but we can confirm this by taking a quick look at the built Phaser output (top of this file edit actually not the top, its down the bottom, specifically this bit `/* WEBPACK VAR INJECTION */(function(global) {/**`). Anyway, I _think_ this means that Phaser plain won't work from npm, not unless maybe you also use a similar webpack build mechanism as Phaser does. You can solve this just by removing Phaser from being managed from npm, grabbing the built distribution, and including it as a script tag (or pulling it from some place like cdnjs.com) and making sure that script tag is above your own code so you know Phaser will be available globally. Not sure how this affects your server-side job, you could probably get away with slightly different builds server and client side i..e just use the source (where global namespace will work) on the server and the built distribution on the client. I don't really use Phaser so you'd probably need some more info on the _actual_ best course of action from something using it for this purpose.
  14. mattstyles

    Introduction - HTML5 + Multiplayer Game

    1) oh yeah, I ran into some pathing stuff too, I'd forgotten that! Mine was related to commonJS and node module resolution, NODE_PATH is an env var that node will honour to help resolve modules, browserify used to honour it (possibly Webpack does too, after transforming your modules to commonJS), but Parcel did not so my `NODE_PATH=src` and `import {foo} from 'core/somefile'` which previously resolved to 'src/core/somefile' now didn't work. To get around it I used a babel transform (module-resolver, this one) to transform paths and supply certain roots. Of course, no-one needs this, but it can be a useful thing to do, although it does up the complexity and 'magic' of your codebase so its a +/- (I _think_ Webpack might do it via aliases or some other plugin for adding resolution roots other than the standard node_modules root). 2) Thats awesome, and probably the _best_ way to do it, but I wouldn't sweat adding some things globally with script includes. You'd want to do that sparingly. Interestingly there could actually be some advantages related to both browser and CDN caches, but, in practise, these advantages are extremely minimal and the make the whole thing more complex by relying on external sources. 3) Awesome 4) Phaser itself doesn't really like being npm installed, it's best just to include it as a script include and accept that it'll be available globally. The actual error you get is related to some performance monitoring stuff and the browser timing API. Some questions: * Which browser are you getting the error in? Support is superb for the timing API so it probably isn't a browser, it sounds a little like it might be executing some code on the server, is this running in node? where performance is not available, nor requestAnimationFrame. * It also sounds like something that maybe Phaser would only include in a dev build to monitor any loop (game loop?), are you testing with a dev build or a prod build? Glad you're getting on well though, it sounds really ambitious what you're doing and its really interesting hearing how you're getting on and solving problems.
  15. mattstyles

    Introduction - HTML5 + Multiplayer Game

    Hi, welcome to the forums, cracking first post!! Server Integration Forum Regarding a specific server-integration forum, I think this has been mooted a couple of times but didn't necessarily garner the interest to make it a worthwhile part of the scope of the forums. Maybe its time to revisit that and see if we add it in. JS Bundlers Both Parcel and Webpack are generally superb. Webpack is extremely customisable and has a thriving community building plugins etc etc. If flexibility is key then Webpack is a superb choice, but, the downside is that the configuration is difficult and as the ecosystem moves very quickly (which is awesome) it often requires fairly consistent work to make sure you are getting all the good stuff. Parcel is newer and works in a slightly different way, personally I love it but I'd worry it might fall over if you're working on really complex stuff. Having said that it is gathering a lot of traction and these sorts of issues are being ironed out, the main point being that actually all this build stuff should be a simple as possible, which is a great goal. Webpack now has a lot of pre-configured stuff added in. Webpack is fairly low-level, I _think_ the intention was that lots of projects with opinionated configuration would arise on top but that hasn't really happened at scale, however, due to tools like Parcel simplifying how to scaffold and build projects Webpack now includes a really comprehensive set of default configurations to get you up and running quickly. For some anecdotal evidence: I've never been a huge fan of Webpack but have migrated most of my personal projects away from my custom Browserify (etc) build pipeline and moved to Parcel and have really really enjoyed the switch and got loads of stuff (like code splitting, asset imports and HMR) basically for free, and these were things I was a little scared to add to my own system. Webpack can do all of these things too (possibly out of the box) but I've loved the experience of using Parcel. I also work in eCommerce (on a wholly JS powered app) and am looking at moving our extremely complex Webpack set up to Parcel, not sure how that will go though, server-rendering is always a little tricky. Over the weekend I've started to release a small animation helper library and used Parcel to build some examples out, hosted https://mattstyles.github.io/animatron/. I had an issue with the root for serving assets via github pages, but it took 5 mins to find the answer. Apart from some very basic Babel config, everything else 'just worked', literally took 2 mins to set up a 'watching' dev build (with hot module replacement and progressive builds, the project is trivial but it rebuilds in milliseconds) and push out production code to github pages.