mattstyles

Moderators
  • Content count

    1,430
  • Joined

  • Last visited

  • Days Won

    13

Everything posted by mattstyles

  1. This is actually part of the learning experience, googling a subject and being able to pick the good from the garbage. The problem is that most people writing about beginner subjects aren't much past the beginner level themselves so the info can be a little inconsistent or even incorrect. There is actually a double problem here for the web: because web tech develops at such a fast rate a lot of stuff goes out of date quickly. https://developer.mozilla.org/en-US/ MDN is a go-to resource. The W3C website has some similar resources but it isn't as well written or updated, plus its sometimes just inaccurate, but you will likely come across it. Just google for blogs and other resources, you'll often stumble across a few content creators you like, make sure you get a feed of their blogs and following them on twitter is a good idea. https://www.smashingmagazine.com/ is usually consistently high quality, although I haven't looked at it for a while and not sure how much beginner stuff it has. Not a gaming resource though. https://github.com/getify/You-Dont-Know-JS is a fantastic resource and Kyle Simpson is an incredible developer, its not a gaming slant but a fantastic JS series of books. That last one is a github link, once you get beyond the real beginner stage you'll need to be looking through any source code you can find, many people who shout about their games here also provide links to their github source code. This is extremely daunting at first though, so probably not that useful when starting out. In a similar vein, when you get going you'll probably want to start using third-party modules and import them in to your code. NPM is one such repository of packages (there are millions). You'll find that pretty much everything there is open source and will contain links to the source code. Once you get in to that you'll find you see the same names of people churning out modules, read their code, if they have blogs read them. Again, this is extremely daunting at first so tackle it later.
  2. Landscape or portrait mode for html5 game

    I'd totally forgotten about that API! Such a shame it doesn't have decent browser coverage, still, if your demographic are all Android Chrome users you're laughing!
  3. Error when adding sounds with phaser

    1. Why can i add pictures, animations,code and more from my harddrive but music is a no go?! Glad you got it working. 2. I want the Game runs complete offline. It's important because the guy i am making this game for is teacher and they still have no Internet in his school. (unbelivable but true) If everything works from file protocol then having a folder full of assets isn't a bad way of sharing your app and letting the browser handle cross-platform concerns. The other avenue you have is to create a proper deployable bundle. I think Cordova can do this for desktop OS's (although its normally used for mobile apps) but something like Electron or Node-Webkit is probably a better fit for you. Electron (for example) will create proper executables and you have other options for creating a downloader etc etc its a real app so the OS will treat it like one. 3. If I would setup a local server, then every who gets the game need one to?! Yep, and this is a pain as they'll have to install the necessary dependencies to run that server or you'll have to build an executable for your target platform (this can be particularly tricky if you're targeting Windows). Most users won't have the skills (nor the desire) to do this, and some, such as a school laptop, possibly won't have the permissions to do so.
  4. Landscape or portrait mode for html5 game

    Depends on the type of game. If you rely on keyboard input then you're likely targeting laptops/desktops, so landscape. If you're targeting mobiles then portrait as web landscape is pretty poor in most mobile browsers and you can't lock the orientation for the web (this restriction doesn't apply if you're embedding your web tech into something like Cordova and releasing your app as a "native" application). I'd guess mobile market is larger, but, it does depend on the type of game.
  5. Canvas Tilemaps - Javascript Help

    What sort of problems? var player = { position: [0, 1], health: 200, attack: 12 } Or, maybe you want to use a function to do it (often called a factory as it churns out new objects): function createEntity (name) { if (!name) { throw new Error('Entities need a name') } return { name: name, position: [0, 0], health: 10 } } var entities = [] for (var x = 0; x < 10; x++) { entities.push(createEntity('entity' + x)) } This way creates a list of 10 entities, which are all pretty much the same but that's the base, build out from there. I expect what you're having issue with is how to structure your data, and I agree, that's tough. Try first with an immutable tile map, that's your background (this is just a tilemap you create once at the start and don't touch). Then create another array of entities. I think this is probably easiest to get going, sure, you might find some problems with this approach but I think you probably just need to get cracking with a system. Build it this way, discover the pros/cons. Build it another way and do the same. Once you've done this a few times you'll be in a far better position to make decisions on the 'best' data representation for your use-case. It very much takes experience.
  6. Calling Button to appear and make it disapper

    Sorry, I didn't read all your code, but, 'If' is just about the simplest logic construct we have in almost every language (and most powerful), our usual problem is adding layers of complexity and abstraction when things like a simple 'If' are more than good enough. There are some patterns to stop lots of 'Ifs' in a row, or the dreaded if..else...else...else (switch being one, after that there are several design patterns to help, try googling Javascript Design Patterns, but they are obviously more complex than a list of ifs) but there is absolutely nothing wrong with it. Despite some formatting issues your code with those if statements is very clear, I'd maybe throw them in to their own functions, but thats just preference, it doesn't make a whole lot of difference. Someone once said (I don't remember who) "coding is just a load of if statements".
  7. There are quite a few threads on this that might be helpful, try searching the forums. I think there are a couple of quick things to think about though: * Coding is really hard. It is very rewarding (and fun) but quite difficult, be prepared to invest time and effort in to it (you may already be there on that!). * HTML5 makes things a little trickier as you have to consider JS, CSS and HTML. If you're coding canvas-based games (as most here do) then it's 99.9% JS. * You'll need to do plenty of reading (or listening) but get your hands dirty, write as much code as you can, solve problems in that code, dive into those problems. This probably means you won't get anything finished very quickly but it will mean you have a much much much better chance of getting things finished in the future, have an end goal in mind for a project but I wouldn't worry if you don't make it first time, what often happens is: Have an idea for game -> write some code -> find issues in the code -> dive into the issues and really learn -> have another idea for a game -> rinse -> repeat. At some point you need to be finishing things, but, not so much when you're learning, its more important to do some deep dives than skim over some complexity only to get things finished (totally opposite if you're earning money from it). * Ask lots of questions. Find a mentor if you can, but places like this forum can substitute for a human on the end of a phone or face to face. * If there are community JS meetups in your area try to attend them. Try to attend a conference with some topics you're particularly interested in (although this can get expensive). Both of these help to put faces to names and most speakers and people at meetups are very friendly, everyone is in the same boat, or, if they're in a more advanced boat now, they were in your boat before. The coding (and JS in particular) community is an incredible thing, its biggest asset, make use of that and be a part of it. Remember to give back when you make your way to 'Expert Coder' level. * Be wary of that 'Expert Coder' label I just used, its garbage! Always be learning, always be moving forward. This is true of any science but seems to be doubly true of JS and Web programming. * Be determined, its a hard road, lots of problems to solve, but keep going, the hill is steep at first but it flattens out a little as your knowledge improves, then ramps up again.
  8. Ticking time bomb in a game

    You're pretty much there you just need to delay things a little, `setTimeout` is your simplest friend here: const DELAY = 2000 tntCollision: function (player, tnt) { setTimeout(function () { ...do stuff }, 2000) } Bare in mind that, depending on the rest of the code, you need to make sure that `player` and `tnt` are representative of the state in 2 seconds time, usually (due to closure) those variables can become locked to when the call was initiated, try it and see. In your case it looks like your `tntCollision` function wants to do some work when the collision occurs and some other work in 2 seconds (for example) time so you'll have to dice it up how you see fit and use setTimeout to schedule a function to invoke after a set number of milliseconds. Also, Phaser has an idiomatic way of scheduling functions in the future so you shouldn't need to call setTimeout explicitly, have a google (or search these forums) for Phaser.Timer events (I think thats what its called).
  9. What is context

    Usually this is a mechanism to bind functions to a specific scope, usually changing the `this` value of a function. i.e. function nextTick (callback, context) { setTimeout(callback.bind(context), 0) } function log () { console.log(this) } nextTick(log) // Window nextTick(log, {foo: 'bar'}) // {foo: 'bar'} Note that if you're using anonymous/fat-arrow/lambda functions from ES6 (`() => {}`) then scope works differently.
  10. sprites with gradients / gaussian blur

    Yep, I agree, benchmarks are the only way to go. I'd have thought image contents makes no discernible difference unless it has transparent or semi-transparent sections.
  11. Canvas Tilemaps - Javascript Help

    I think the first distinction to make is to separate tilemap data from entity data, this makes things a little easier conceptually. Have one array for the tilemap and some functions to help you access it and do stuff like changing an entry or building it initially. If you're building a civ-like game then the tilemap is largely immutable (it doesn't change) so you can just generate your map structure and only worry about accessing parts of it to render it i.e. if it is bigger than your screen area then you probably only want to render visible bits. Keep your entity array separate for now and have different functions for accessing it and manipulating it. Your render method will loop over the visible portion of your tilemap and render it and then loop over your visible entities and render them.
  12. Canvas Tilemaps - Javascript Help

    Yeah I know that feeling of being beaten down by a problem to the point where its difficult to even express it! It's usually a clue for a good nights sleep and to be tackled again when fresh!! I think I know what sort of thing you're after. How to express a tile and entity map has about as many solutions as there are developers out there! A common starting point might look the following: So, your map might be a 5x5 2d grid of locations, to simplify things lets express tile types as integers, 1 is a wall, 0 is floor and to simplify our rules even further, you can step on the floor but not on the wall: var map = [ 1, 1, 1, 1, 1, 1, 0, 0, 0, 1 ... ] var width = 5 function get (x, y) { return map[x * (y + width)] } This is a simple 1d representation of a 2d tile map with an associated getter function to convert 2d to 1d (which requires knowing the width of the grid), note that [0, 0] is top-left, x going right, y going down (yes, coordinate systems are important but we've just chosen the "easiest" representation). Now you need some sort of entity object (you might call it a class, but thats a bit ho-hum in JS): var player = { x: 1, y: 1 } You might want to add this player to an array of entities (or, even, an array of alive entities, depends what you want). This is about all your renderer needs to get rendering, throw the map array and the width and tell it to draw, then draw your entity on top in the correct location. To handle collision detection lets do something really simple, the following is semi-pseudo code: function checkMapCollision (x, y) { var target = get(x, y) return target === 0 } function handleMapCollision (entity, desired) { var isOkToMove = checkMapCollision(entity.x + desired.x, entity.y + desired.y) if (!isOkToMove) { return } entity.x += desired.x entity.y += desired.y } function onKeydown (key) { if (key === 'left') { handleMapCollision(player, {x: -1, y: 0}) } ... } Something like this would work (I've done it quickly, might have made a stupid mistake). Attach the `onKeydown` function to a keyboard (or joystick, or mouse, or touch, whatever) handler which responds to a key press event, takes the player entity and checks for a collision with the desired location, if all is ok then it updates the entity position so you either need to re-render or if you're using some sort of rendering loop then the position will update on the next render tick. This is pretty much the basis of it. Your next requirement is to check for collisions with entities, you pretty much do the same but rather than a spatial look up against a grid you'd probably want to loop over all active entities and check to see if any of them currently occupy the desired target location, if they do then run a function that handles what should happen when that collision occurs, otherwise loop through the map spatial check (above) and see if the desired target location is ok on the map or not. That really is about it, most other systems just add complexity on top of this simplistic model (obviously this is a very mature field pretty much as old as computer gaming, which isn't much younger than computing!). Some stuff you might want to look at doing: * Sometimes its easier to use [x, y] rather than `entity.x` and `entity.y` * Integers are fine for representing tiles and/or entities but you'd want another lookup table that maps that integer to an object which represents the actual object i.e. a wall object might have a flag (boolean) saying it is impassable, whereas a water tile might have a flag that states only flying, swimming or floating entities can enter it etc etc etc. * You might want to forego the integer (id) representation and just embed whole objects into your map and/or entity array but consider how distinct each element is i.e. if ALL of your walls are the same in a map and your map contains thousands of them then thats a load of memory you don't need to consume, just keep one wall object somewhere and your map array just references it. * If some of your map entities do differ from the blueprint/template for, say, a wall object, maybe you only want to store the differences. * The suggestion above notes looping over your entire entity array to find collisions, with 1000's of entities all moving this is expensive. You might want to look at techniques such as Octrees to simplify the search space (this gets technical real fast! but if you're diving in, then dive in!), if you want a warm-up maybe read up on A/B (or Black-Red trees) as Octrees are a more advanced (extra dimension/s) version, again, this gets technical real fast! I'd say its key learning for any developer! * Consider using a 2d array (or, an array or arrays) to hold your data, personally I dislike this approach but you might find it easier to use `map[0][1]` rather than using a getter. * Think about what to do when you have a collision, do you want a handler that takes the two 'things' that are colliding which decides what to do? i.e. this handler would map a collision between player and wall to a function, between player and enemy to another etc etc etc. As your list of possible colliders grows this can get tricky to manage, so maybe make it a little more interesting and physics based by considering the 'stuff' that makes up objects i.e. if 2 objects are marked as solid then they can't occupy the same space. * The above precludes entities occupying the same space, but maybe you want that. * The above also assumes only 1 single tile occupies a location, maybe you want multiple tiles on a location, so maybe each location holds an array of tiles at that location, or maybe you want a linked-list if your other dimensions are sparse? * If your map becomes an array of locations, which each hold and array of 'things' on that location, maybe you don't need the entity array anymore and they can just live in the map. In some ways this simplifies things, in other it makes things trickier. Hope that helps you get clear which way you want to implement things, I'd say that if you're not sure have a play with various techniques, personally I love playing with 2d map representations and systems, maybe you will too!
  13. Using Phaser together with React

    There are a couple of approaches, there are also a couple of threads on this so try searching for more info. Your proposal is fine, and by far the easiest solution. React does its normal thing for your UI, but you expose a canvas element and initialise the Phaser stuff when it mounts. However, as you probably don't want to unmount and remount that component its not a great improvement over just having a canvas sat there in the DOM. There are also a couple of modules out there that swap React's DOM rendering layer with a canvas rendering layer, although that won't work with Phaser. Bare in mind also that if you're really pushing rendering perf then any elements overlapping the canvas element will have an effect on canvas refresh rates, depending on your style of game this may or may not be a major problem.
  14. Canvas Tilemaps - Javascript Help

    I'm not at all clear on what you're asking for? Do you want to know how to reference a 2 dimensional point (i.e. something like [1, 5]) from a 1 dimensional array? or whether you should represent your map as a nested (i.e. a 2 dimensional) array? Or something else?
  15. Creating an online chat game 2d

    Just using images and divs is a perfectly acceptable solution. Just bare in mind that DOM rendering is slow compared to canvas rendering, but, it may still be fast enough for your needs. Given the image you show there are lots and lots of images in there, you might want to consider aggregating it in to a sprite sheet rather than making individual requests for all those images.
  16. Anyone Using Redux with Phaser?

    @waechtertroll nothing very comprehensive re benchmarking as it was very much only a POC and I only needed an indicative idea of perf immutable vs mutable data. My tests comprised of a fairly large list of entities and having one of those entities moving so each tick updated its position and then rendered. This meant that each tick I had to search through the array for the entity I wanted, update its position, and return a new array, then render. I did this with immutable.js and then just with a plain JS array and objects, so this also involved some changes to the reducer to handle the difference between an immutable.js data structure and a plain one (its quite possibly my FPS drop was due to borking this implementation but I tried to keep it simple enough to minimise this risk). The immutable.js version ran at less than 50% the FPS of the plain object one and this issue only grew worse as I played with the number of elements in the array. Moving all elements vs moving one didn't change much, as you'd expect. I'd guess that things like ClojureScript and Elm enforce immutability in their data structures at the source level but then just use fairly plain objects when it gets into JS-land, whereas immutable.js would have to do a load more work to enforce immutability whilst the app is running i.e. I'm guessing ClojureScript throws an error at compile time (build time) if you're trying to mutate an object, whereas immutable.js would do this at runtime and all those checks are always going to be expensive at run time. I am only guessing here though. I've used redux (or a redux-like lib) and react for lots of games, but none of these games are spamming updates every tick, for things like animation I've tended towards using stateful components to handle those, moving them out of the central state object, which is pretty akin to your last couple of sentences. This has worked really well, but, yeah, could be a major headache for many types of games (none of the ones I have toyed around creating have had the same issues as your typical action-style game).
  17. New to phaser and html5

    I think some generic pros/cons would be (there are loads more I've missed too): Pros: * You're writing JS and your target platform understands JS, this decreases friction between your source code and your production running code * Phaser contains loads of code to reduce boilerplate meaning that you (as developer) can focus on adding features and coding up the logic that makes up your game rather than spend a lot of time on more generic things/boilerplate. * Phaser has great documentation, an active commit history and an active community. This means it is always improving and that lots of information exists out in the wild i.e. if you hit a problem its quite likely someone has already hit it and solved it, if not, there is an active community there to help you solve it for yourself and for anyone else who runs into the issue * As you're writing JS any other modules/code you add that Phaser doesn't include (stuff like some sort of router, advertisement libs, analytics/tracking libs, maybe websocket stuff) is probably pretty easy (ish) to include into your project as the library will be written in JS and your code will be written in JS so you don't need some sort of abstraction layer to make all the libraries compatible (or, at least, this will be far easier). * Debugging tools inside your target platform (the browser) understand JS so you _should_ have a far easier time debugging (and then fixing) problems you run in to. Cons: * JS isn't for everyone, it has its quirks, particularly for large and complex projects. Thankfully the JS community is super active and lots of user-land solutions exist (i.e. if you really really like data types then typing solutions such as TypeScript and Flow exist in user-land). * You might there are some problems that Unity (etc) solve that Phaser (or JS) make awkward or just don't solve for you. * I think Unity and some other engines have a pretty extensive UI and code-generation tools, with Phaser (and most JS stuff) you'll be writing stuff yourself rather than doing stuff like architecting a state machine in a UI. Again, some user-land tooling exists, e.g. tools to generate a sprite sheet in a format Phaser (or other JS libs) understand.
  18. New to phaser and html5

    Phaser is a framework and works as most frameworks do across languages, it sets some standards for how to structure and plan your application and contains loads of code and patterns to help you create your product without the hassle of writing loads of boilerplate. In short, if you follow the patterns it dictates then it should be a breeze to get things up and running quickly and focussing on the logic that is specific to your application rather than spend a lot of time writing generic things like a state machine, rendering layer or user input handlers etc etc etc. Whilst there are lots of modules out there you can consume for the generic stuff, Phaser also does the glue between these individual bits which elevates it to framework status rather than collection of modules. Take a look through some of the examples and then start googling, there are lots more user-land examples out there, some very detailed about how to structure and code a game using the Phaser framework.
  19. Can a container only have 1 container?

    How many containers can a container contain if a container can contain containers?
  20. How to improve performance on mobile

    Totally dependent on your market and any 'conclusions' should be driven by your own user base.
  21. How to improve performance on mobile

    This is incredibly glib, you can't go quoting 2018 and then saying that the performance on 5 and 6 year old devices is terrible. I've seen some incredible tech demos with webGL on new devices (i.e. a year or so old, max) and there are more and more real use-case webGL powered games filtering into the mobile market.
  22. Anyone Using Redux with Phaser?

    It's not the pub/sub (event dispatching) its the recreation of the state object each change, which could be 60+ times a second, for a large state object this is always going to be expensive. I also tried using stuff like immutable.js which, in theory, actually makes this cheaper but it introduced loads of other overhead so was much much slower (having spoken to a friend who does a lot of data visualisation they couldn't use immutable for the same reason). Of course, redux doesn't enforce that you create a new state object each mutation, you could just mutate the state object but you'd have to weigh that up with how React (or other complementary modules like reselect) does its work i.e. if anything is checking for a mutation with a `prevState !== nextState` (as React does) then things might start getting funky when it can't work out what has changed with a standard JS equality check. You could end up with a more manual tracking of whats changed but then you lose most of the benefits of modules you're using, you could use a more comprehensive equality check but then you ramp up the calculation costs, given you're likely going to be fighting for perf anyway then upping the calculation costs probably isn't going to work out very well.
  23. Anyone Using Redux with Phaser?

    I've got a number of tests for this sort of thing, biggest issue is simply with performance. Redux and redux-like libs aren't really designed for state that is changing frequently, the primary use-case being changes resulting from user or network actions, neither of which happen particularly frequently. Things like animations, which do trigger frequently whilst running, aren't usually kept within a centralised store. I've tested this with and without the complexity of rendering into a canvas (using Pixi rather than Phaser but the process is the same) and managing large lists of entities, all changing their position every tick, is pretty heavy, very hard to keep up with 60 fps. Depending on your use-case though, it is very definitely possible.
  24. which audio format do you use for mobile?

    I can't really answer your question specifically, but, for small audio snippets I've generally aggregated small clips into one larger file, the same as a spritesheet but for audio instead. That's not exactly an answer but maybe it totally avoids whether mp3 is efficient for small audio clips by aggregating all your small ones into one call. Due to the way things are loaded you might want to ensure small clips you want straight away are at the start of the file, that way you can possibly start using them immediately and not block your app from starting until the larger audio file is totally downloaded, of course, depending on your use-case you might not get away with this but you'll probably find you can at least join all your small snippets into a couple of files, likely still better than loading lots of small audio files.
  25. I think for some simple colour changes you might get away with some kind of filter but, more generally, the usual way I've seen of doing this is exactly the type of sprite layering you describe. This is relatively easy if you only have one character (or, more likely, one animation loop) but gets time-consuming to create all the required assets when you have multiple different types i.e. if character type A swings their weapon but character type B flips it in the air then you have to draw all of those frames for each new item or new character type you want to introduce.