• Content count

  • Joined

  • Last visited

  • Days Won


Everything posted by mattstyles

  1. 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.
  2. 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.
  3. 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.
  4. 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
  5. 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.
  6. 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.
  7. 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 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.
  8. 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.
  9. 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 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.
  10. mattstyles

    Create Galaxy

    A screenshot with a visualisation of 'something' is a long long long way from anything even remotely resembling a job spec, or something someone could price against. What actually do you want do to?
  11. Yep, I can understand that decision. I still have writing a text adventure on my todo list... most of that involves pretty boring data structure manipulation, but as kni does all that heavy lifting I wondered if that would take away the boring stuff and allow you to focus on the more interesting stuff like how to render and how let the user make decisions. I haven't tried it yet myself so I don't have any experience with how helpful it might be.
  12. mattstyles

    Multiple Canvas Renderers

    Multiple canvasses was one of the initial spec items for canvas usage, going as far as using it to render and animate iconography on a site. Not sure how that plays out with a webGL context or multiple large canvasses. Having had to work with various charting and data visualisation tasks I wouldn't be keen to do this all manually unless I just wanted to learn how to do it. Pixi is a renderer, a really good one, but it won't help outrageously with creating charts and animating them. Compared to D3, for example, even with the D3 learning curve, you'll be up and running doing far more interesting things in a fraction of the time and a fraction of your own code. Having said that, if what you have in mind isn't particularly friendly to do in D3 (or another lib) then using Pixi would be a great idea as you'll be doing a lot of manual work anyway.
  13. Kni could be an interesting choice if you fancy getting your hands dirty with coding. I haven't yet had a chance to have a play with it (I'm very keen to do so though) so I'm not sure how good the HTML renderer will be for you out of the box and the documentation is sketchy but there are plenty of examples. The engine provides a number of hooks so its pretty flexible and you can add your own UI on top of your story, again, there are some instructions for that.
  14. mattstyles

    How to force HTML5 Game to load in Landscape mode

    I don't know what Telegram is but you can't lock browser orientation (for very good reasons). Not yet anyway. If you're developing for a webview inside a native application then you can set orientation.
  15. mattstyles

    Pixel art vs vector graphics - a big deal?

    I'm not really sure what you're asking. Your game looks great, bit hard to tell if only the buildings are your own stuff but they look good, consistent and colourful. Pixel art is huge at the moment. Graphics are just about developing a feel for your game, pixel, vector, hand-drawn, 3d, 2d, it doesn't matter. Create an aesthetic for your game and make things consistent and you're probably on to a winner no matter what style you employ.
  16. mattstyles

    best way to convert ES6 syntax to ES5 ?

    Oooo, this thread could get flamey! Ha ha. There are numerous advantages to using ES6, a quick google search will give you heaps of reasons, with the only con being that you probably have to up the complexity to transpile back to es5/3, however, all modern browsers support most of ES6 (and newer) syntax so unless you're supporting really old browsers (and you stick solely to ES6) then you probably don't need to transpile. The biggest advantages of ES6 (for me, and I've missed loads here): * ES6 was pushed through to create more complex applications, as such it has a lot of syntax that is more useful for doing so. Some are sugar methods only, some actually provide newer functionality (particularly those related to primitives and/or the DOM). * New built-in extensions which make many tasks way way easier (and easier means less error-prone) * Sugar methods mean less dev typing which generally means less mistakes. Some things ES6 makes easy are very very hard in ES5 and they are often things devs rely on regularly so making them easier to work with means writing code is less error-prone and reading code is clearer so you can focus on what your code does, not how it does it. The biggest advantages of setting up a transpilation pipeline are (again, I'm missing loads): * Access to a module system * Access to whatever new syntax you want The con of a transpilation system is increased project complexity and you have introduced a build step which takes some time to run, as your project grows this sometimes becomes prohibitive but you do have to have a very large project for this to happen and most modern build tools abstract away incremental builds and caching i.e. they only re-build the changes so incremental builds become smaller and faster. Another con is related to the module system. Modules are awesome, very awesome. However, JS doesn't (yet) natively support them in the browser and even when they do there are additional problems i.e. if you use modules heavily (as you probably should) then your list of dependencies could easily be hundreds or even thousands of files, loading each of these one by one in the browser isn't a good idea and won't be in the foreseeable future. A module system also implies that you need some way of getting dependencies. This isn't technically necessary but is often helpful. If you are writing games then often you'll be using one (or maybe two) large frameworks to help, unless they work nicely with a dependency management system (i.e. NPM) then I wouldn't worry about getting them as 'real' modules, just include them on the page and use them, then use a module system for your own code if you want to. Newer syntax and mobile games Any gaming is typical performance sensitive, newer syntax has a few things to consider: * Browsers are well optimised for ES5, this isn't always true to ES6 (although ES6 is pretty good now as its fairly old and almost universally adopted in browsers) * Given the above, transpiling is often better for performance * The code generated by these tools during transpilation is superb, it is written by many many superb developers and has great community support so the hours invested in it must be astronomical i.e. in many cases these tools will write better code than you or I do! * It is not a silver bullet -> if perf is a concern for you then you are still largely the sole arbiter of whether you achieve your perf goals. How to use newer language features: Babel is the defacto tool (although it isn't your only option). Babel requires a bit of setup work and additionally requires you to set up a build process for your code. Again, there is tooling for this. Additionally, there are many project scaffolds out there (and tools for creating them) that can abstract this away. The absolute easiest way of getting access to these new language features but supporting older browsers is to use parceljs. Parcel abstracts away most of the complicated build stuff and has a superb feature set. It involves a few pre-requisites: * You must know how to run simple commands from the command line * You must have Node and NPM installed Once you have these things (which is generally true of any JS build system you might want to employ) then running builds is a simple one-line command. A watch task is also bundled in, this is another simple one-line command to run and watches the file system, every time you save a change it rebuilds only what has changed and propagates that to the browser. Parcel relies heavily on caching and multi-threading so is very very fast. Other tools include webpack (which is very complicated, although newer versions I think make things way way easier for most use-cases) and browserify (which is simpler in scope, but can feel a little low-level for many people).
  17. mattstyles

    Initializing a 2D Array with a Ton of Zeroes

    The most simple way is probably: const DIM = 100 const map = new Array(DIM).fill(0) For the 2D variant you're using: const X_SIZE = 4 const Y_SIZE = 2 const map = new Array(X_SIZE).fill(new Array(Y_SIZE).fill(0)) // Better: function createArray (length, fill) { return new Array(length).fill(fill) } const map = createArray(X_SIZE, createArray(Y_SIZE, 0)) Depending on your coordinate system you might want to invert X and Y. Note that fill is really naive, I normally use some other helpers that allow a 'fill' function to accept a function which allows a really nice clean API for creating simple or complex arrays.
  18. mattstyles

    New member want to say hi

    Welcome to the forums
  19. mattstyles

    Trying to make a Dating Sim...

    Unless your decision tree is absolutely huge there is no need to consider true database storage and all the issues that come with that, I imagine your data can be loaded in and that your application can be a stand-alone client-side application (which greatly simplifies things). It sounds a little like you are confusing two not-really related things: * How do I change application scenes? * How do I store the decision tree? I'm not really sure what a dating sim is so I'm going to assume it is a series of scenes, each with dialogue, and that your dialogue choices affect game play. Therefore, each scene has its own decision/dialogue graph. This really is a graph as nodes can be connected, but, if you can get away with it (you probably can), make it a tree. In a tree data flow down linear paths. i.e. A / \ B C / \ D E This really does simplify how you traverse and store this information. A graph structure is probably better, but its also a little trickier to use. Changing scenes is more to do with a larger change to your application and typically all games will have some aspect of this, they are often called game states but I think the term state is a little misleading as effectively the state of any system is made up of all of its constituent parts, not just whether that system is in the Main Menu or the Main Game states. Scene isn't perfect either, but its less confusing (to me anyway). Many applications apply a Finite State Machine to handle scenes, its hard to find an application without several state machines in operation, particularly where human interaction is expected. Phaser has a well-defined state machine mechanism with life cycle methods to handle scenes and their transitions. Maybe that would be a good place to do some research.
  20. mattstyles

    Lack of CoDs or CK2s that use HTML5/JS

    For rendering a browser gets pretty much the same access to the GPU as any other application, albeit with less control (and via an older spec, webgl isn't quite as good as you'd have with different avenues). For running calculations JS is impressively fast for a JIT compiled language but can't match any AOT languages such as most modern games would use. There is no getting around this, WASM (web assembly) is mooted, but, it may not quite get to the same place. There is also an argument that JS is not a particularly good language for larger teams, such as those involved in more complex application (i.e. AAA games). Again, there are some solutions for this, such as Haxe, TypeScript, Elm or even using LLVM to convert your code in to WASM (or JS), as always, there are trade-offs. The browser has some interesting restrictions that make achieving optimal performance tricky i.e. reliant on a platform canvas implementation, no UDP sockets, cross-platform differences are much trickier than most AAA games have to deal with etc etc. Websites have different load requirements than local applications i.e. most games require a hefty download (or a large storage device such as a CD or memory stick) to a local storage device, would you accept this wait every time you wanted to play? Because the browser is not permitted to store so much information locally (there are hacks around this, but, they are nasty) so you'd have it for every play. Browser users have expectations of browser-based applications that they typically do not for a local application, expectations can be broken down, but its hard. I still think there is one issue that trumps all of these above: monetisation. Closed application stores and closed source applications are opposed to the fundamentals the web is built on so a new method is required, which hasn't really happened yet.
  21. mattstyles

    How to display text based on variables

    You're almost certainly best of asking this in the Twine forums (I think they also have a Discord channel) to find out how to do it in that platform. In general programming you're talking about applied logic, specifically you're after a conditional. As this is (primarily) a javascript board the following is a JS example: // Create a variable, we're also initialising it here because we are pros var axe = 1 // Conditional if (axe === 1) { // This is an example of a function call, it just does 'something' setOption('Cut down the tree with an axe') } // Here is another function call setOption('Punch the tree') Twine has its own syntax (three by the looks of it) for doing the same as the above, in fact, I'm not sure I've ever heard of a programming language that can not do it.
  22. mattstyles

    Guidelines for posting in this board

    @pixel pugs you just got it, post and wait, now you just can post without the wait! Welcome to the forums.
  23. mattstyles

    Cobalt Dungeon

    I'm super late to the party, that write-up is awesome! Super super stuff. I've downloaded the game whilst typing this, it sounds a little similar to something I've been dabbling with on and off for a while without any real progress, really looking forward to playing your game.
  24. mattstyles

    SVG images not displaying in FF

    looks good in FF from here (59.02) Just updated to latest 61.0.1, still looking good
  25. mattstyles

    What lacks in HTML5 games in terms of revenue

    There are quite a few HTML based games already on iOS/Android/etc stores, they monetise (or attempt to) exactly as you suggest. All are valid ways to earn a crust. I don't know what services exist to save you coding, but, all of these things can be coded in to a web-based game.