mattstyles

Moderators
  • Content count

    889
  • Joined

  • Last visited

  • Days Won

    7

mattstyles last won the day on October 8 2016

mattstyles had the most liked content!

4 Followers

About mattstyles

  • Rank
    Advanced Member
  • Birthday

Contact Methods

  • Website URL
    github.com/mattstyles
  • Twitter
    @personalurban

Profile Information

  • Gender
    Not Telling
  • Location
    UK

Recent Profile Visitors

1,876 profile views
  1. Github pages is also free
  2. and you've got a `pixi.js` file in the same directory as your index.html? (there could be more going on than this, but its a start) You can check the network tab to see what the browser is trying to request and the response (from the server brackets fires up)
  3. How are you trying to include pixi into your project? Would help narrow down the problem.
  4. Sounds like the start of an Awesome Phaser List, https://github.com/sindresorhus/awesome, haven't seen one for Phaser Oop, https://github.com/Raiper34/awesome-phaser, maybe you could contribute your list to the Awesome List?
  5. Phaser States refer to game states, commonly something like Loading, Menu, Game, End would be necessary. Modular programming refers to breaking functionality into ever smaller pieces so that the code can be reused and repurposed. Separation of concerns is different to modular programming, and whilst Phaser States break a whole game into smaller chunks, modular programming refers specifically to code. Don't confuse Phaser States with the more general term Application State (or, in this case, Game State, usually just called State) which refers to each variable within the system, which describes all of the information regarding to that system at any moment in time, if one variable changes (even amongst thousands) then that represents a new state, sometimes this is called a new state frame, or just frame. The output of any system is determined by its inputs and its state, a pure, or referentially transparent, system has no state, only inputs and outputs. Phaser uses States to create a finite state machine, which is common pattern for creating games and many applications.
  6. They could also be cached by the browser, there's almost certainly a setting in WAMP to tell the browser not to cache them, or just disable caching in your browser of choice, this is easiest done from the developer tools, they all have this setting as its usually what you want for developing. Also for developing there are better choices than WAMP, so that you can have live reloading etc etc
  7. I've done it for web, using svg icons, the process is exactly how you describe, parse the string for bits to turn into images (in my case svgs), the algorithm for doing so would create an array of parts, either strings or svgs so that the result of that algorithm would go something like: //Input This is a {{test}} string // Output <span>This is a </span><svg>...</svg><span> string</span> Obviously the DOM would lay this out for me, based on CSS, but to translate into Phaser you'd basically do the same but change the render part so that it outputs Phaser structures, presumably Text and Images/Sprites, however, you have to manually position everything so you'd have to have some reliable way of calculating the length of Text images (unless Phaser has a helper for this you'd have to implement it yourself) so you can position stuff correctly.
  8. I'm no expert on Phaser loading patterns but its sounds like something isn't waiting for all the assets to load (your code looks like it is though...), when you keep hitting refresh the browser will be caching them so when it does work, I wonder if the browser cache is loaded up so that all the images have been loaded super quick, whereas your earlier attempts are still going over the wire and are too slow. Try some logging in your various different states to make sure that your main game state (presumably where you're trying to use the assets) isn't being fired earlier than you're expecting. I've just tried your url and this is exactly what I'm seeing, the gunbot.png is the most obvious, where its large it was taking nearly a second to get delivered to the browser but the game started way before that, almost immediately (given the first image takes just 54ms to arrive, it really is almost immediately, unless your main game state is actually starting before your preloader, I can't check that from the network tab). Definitely seems to be a case of running the main game before loading has completed.
  9. This article on game loops you might find interesting although it doesn't go into the nuts and bolts of using delta to calc movement speeds etc. Most physics libraries should run off of delta, Phaser implements P2 which certainly does, maybe the Arcade physics does the same? I'm not sure of any good tutorials on the subject, I like to work this stuff out myself or just use a physics library. It generally requires a bit of a change in how you think about your movement code. The simplest way is to move entities by a set amount, often this is implemented by moving them (e.g.) 1 unit per frame until they hit their destination. Using delta requires you to add another vector, namely time, so movement speed could be modelled by saying move 1 unit of distance in one second, you then take your delta (which is time elapsed) and use that to work out how much of a second has passed and move by that 'how much' for the elapsed time i.e. in the example above of moving 1 unit per second, if delta is 500ms then you'd move 0.5 units (delta / totalTime * distance or 500 / 1000 * 1), if a unit equals 20 pixels then you move 10 pixels for that tick. You can simplify this too usually, you might decide unit speed is a set 20 pixels per second, or 0.02 per ms, in which case movement per tick is delta * 0.02. In all of these cases positional data must be floats or you lose loads of precision, even though the renderer will display per pixel (integer).
  10. First you need to decide how you want to try and translate your key presses into touch actions, given that the input devices are totally different there is no clear 1-to-1 mapping so you have to choose how you want to implement moving with a touch interface. There are a couple of ways I've seen (I've added examples from free ios games, they're probably also available on Android too): * Swipe (e.g. Redungeon) -> not sure if there is a Phaser input method that helps with swipe, there probably is but if not, hammerjs is a nice clean mature module for handling this, although its not too difficult to work this out yourself either. * Touch near edge of screen (e.g. cardinal quest 2) -> Again, fairly easy to make happen e.g. fire tap event, get its position on screen, if it is (for example) on the left side of the screen then walk left. You have to tweak it to decide how big that tap area should be and you have to decide what to do if someone taps top-left corner of screen, do you have diagonal movement? or do they walk left or do they walk up? Or do you keep track of the last touch and move in that direction i.e. tap left -> walk left, tap top-left -> walk left, tap top -> walk up, tap top-left -> walk up (I haven't seen this done and it might well feel awful for the user). * Touch a tile to walk to (e.g. Quest of Dungeons) -> I've seen this done too, having previously played 'touch near edge' navigation games it feels a little odd but everyone is different. Works well for grid-based games, fairly easy to work out which grid cell has been tapped, but you'd have to do some path-finding to go from current location to desired location which could get tricky, i.e. for a classic roguelike you'd have to have a mechanism to stretch the movement over multiple turns (something like an action queue would do this). Given that you're using keyboard as your primary input currently this method of navigation is pretty different from your current implementation. For each of these methods you might want to repeat the action if the user holds down the key i.e. touch left and hold then keep moving the PC left. If you're feeling really ambitious you might want to implement multiple of these input methods and allow some sort of options/settings/config screen that lets users choose which input method they want to use.
  11. Browsers are capped at 60fps, hence you saying the quicker monitors are displaying the same speed of movement. The 60fps cap is based on how much the human eye can handle (actually its probably as much to do with refresh rates as anything), whilst some gamers will tell you they need higher fps every (albeit small scale and limited) scientific test into this (and yes, the entertainment industry was commissioning such research long before computers became mainstream) caps human rate of noticing fps at just over 30, not sure why browsers then whacked it up to 60, presumably its to do with monitor refresh rates. Most TV's run at 60 fps now, some can do more but they generally have to interpolate between frames to reduce the effect of motion blur (which is what most people report seeing as jarring), there is a difference between progressive and interlaced (I think) scanning for TVs that is tied to how many frames they can push, or are shot at. Higher refresh rates seem to be regarded as nothing more than a marketing ploy, with many expensive sets boasting refresh rates they don't actually hit! It's up to you, its normally a good idea to keep logic independent of frame rate, but its totally dependent on what you want to achieve, its certainly often easier to tie it to FPS. @Ralph, did you try this? If the other computer does not bottom out faster than your 'lower-powered' machine then it would logically seem to be something you're doing in your code that is causing the lower frames. Are you sure about stuff in the background? If I'm running something really GPU intensive, like max intensive, in the Chrome then I'll often notice that Atom (my editor, which is basically Chrome also) becomes very sluggish. Try to make sure nothing else is happening on the machine, which I'm sure you're already doing to test.
  12. You can get smarter than direct array access to make things a little more intuitive for you as developer. Take a look at ndarray, specifically array shifting to cut out part of the structure, this is one of the exact use-cases for the module. It's been a while since I mucked around with this stuff, but BitmapData is a load of ClampedUint8's right? Infact, I don't think it matters, you just create an ndarray based on the entire bitmap data, then use .lo and .hi to cut out a portion to create a shifted view of that array you can then manipulate: // Using pixels as its easier to manipulate, .data might suit better var image = ndarray(bitmapData.pixels, [4800, 2100]) var chunk = image.lo(400,400).hi(200,200) for (let i = 0; i < chunk.length; i += 4) { // Specify red (this might be how you do it, can't remember) // just saw this is wrong! haha, you'll get some colour though! let value = (255 << 24) | (255 << 16) | (0 << 8) | 0 // Set it to red chunk.set(x, value) } Chunk uses the same data structure as image and bitmapData so you're not duplicating arrays (memory), this does require you to keep track of it all and make sure you're not mutating the wrong underlying structure, but, well, yay javascript. edit: Just saw that, have you seen this? I checked the Phaser docs and BitmapData helpfully gives you both the Uint8Clamped view into the image data and the Uint32 view, the clamped view groups up pixels into 4 components, rgba, whereas the Uint32 grouped those into one 32-bit component (rather than 4 8-bit components, hence why they are known as views on to the same piece of memory). If you're having trouble updating the data in the array it could be you're using BitmapData.data which gives you the clamped Uint8, you might be expecting each array entry to represent a colour (e.g. 0xff0033ff) but it does not, the Uint32 version however, works exactly like this. Again, if you use ndarray because of the way it represents the data internally it is quite easy to use either structure and provide different ways of entering the data, e.g. if you change the stride you effectively change how it iterates over the structure, so you could use the Uint8Clamped views and change the stride to only target the alpha, then when you iterate through using `ndarray.get(0)`, `ndarray.get(1)`, etc you'd only get the 8 bits referring to alpha. All quite fun if thats your bag.
  13. Fetch is just used as an example here, its a browser api that can be accessed from JS, same as XHR but with a better api, fetch is understood by all modern browsers except safari. If you're more comfortable using XHR, or some sort of wrapper (like jquery's ajax helpers), then use that instead, the process is the same, GET the resource, parse it, use it. I mention sticking it in the console just so you can see it working, copy-pasting it into your code would work as well. If by, "Okay. I just tried that, but it only displays the first set tile, which is grass", you were referring to `console.log(tiles[0])` then it'll only display the first tile because you've only told it to log the first tile using standard array index notation. `console.log(tiles)` would show the whole array, use that array of tiles as you will.
  14. Did you inline the data structures as JS or load them in via JSON? The following is an example of loading json data from a data source (in this case its from the github api but its just an endpoint that is readily available and returns a list of objects): fetch(' https://api.github.com/users/octocat/repos') .then(res => res.json()) .then(data => console.log(data)) If you're using a new browser then just copy and paste that into the console, you should always be wary of copy-pasting stuff into the console so I'll briefly elaborate on what it does, feel free to check elsewhere too before copy-pasting: Fetch works like an old-fashioned ajax request, but with a cleaner api, one that is promise based. I'm fetching (performing a GET) to the url specified, this returns a promise, you may have heard this referred to as a 'future' or a 'deferred', all a promise does is return an object that will 'resolve' some time in the future, it is for performing some tasks that occur asynchronously, you may have done this before using callbacks. When the promise resolves, i.e. when the over-the-network request completes, it executes the callback within the '.then' block, the first one shown here converts the body of the response into an object (likely using JSON.parse under the hood) and then that data gets passed to the next callback, which just logs the data out. The data you get back (as you can probably infer from the url structure) is a list of the repositories associated with the user 'octocat' (which is a github example user for running examples or tests against, so a good choice here). Once you have that data list you can do what you like with it. In this case it'll return 7 objects. In your case it will return a list of your tiles. If you are using the Phaser loader they work similarly, but I think they are callback based rather than promise based but the process is largely the same, you make your request, you parse the response and then you use those data structure. The good thing here is that your data is separate from your code and you could update it without touching your code. The bad is that this happens asynchronously so you have to manage that, Phaser has a preload pattern for handling this already built in, so you'd do all this data loading in there, then move to the next lifecycle method (is it `create`?) and then use that data. If you inlined your data structure then the good is that it is immediately available but the bad is that it is baked in to your code (hard-coded) meaning that data changes require code changes and rebuilding/redeploying your app. Up to you which you choose, pros/cons to either approach. Typically in a real-life app all the data required to run the app could be prohibitively large (requiring you to load pieces of it as and when you need), depending on the scale of your project this may or may not be a concern.
  15. Sounds like @phreaknation is correct and you havent yet got your head round the difference between JS files and JSON files. JSON literally stands for JavaScript Object Notation and is a text specification for describing data structures, it is quite literally a minimalist format for creating raw data structures and as its primarily a JS format there are well-defined language level functions for converting it into JS objects (and vice-versa). Notice the difference between where my post specified the data structures directly into JS and phreaknations (which is what you want) code specified it in JSON. Typically you would load the JSON resource from a server and then parse that data into JS object/s so that you can use them (this can be done at build time depending on how you are building but its usually not ideal and mentioning it has probably complicated things for you). So long as you have well-formed JSON (use jsonlint if you're not sure) then JSON.parse() will do the heavy lifting of converting from a string (remember I said JSON is text, when you load it it will be a string) into a JS object, you can only specify one root JS object to create (it could be an array, but thats technically an object in JS, yes, JS is quirky!) but JSON.parse will work recursively over the structure which is often what you'd end up doing (so you could load all your tile data in an array rather than one by one). If you do not want to load the data then you'd have to write them in JS files and include those in the page, note that you'd have to write them a JS objects and not as JSON. for example: // data.js var tiles = [ { name: 'Grassland', textureID: 1 } ] // main.js console.log(tiles[0]) // HTML <script src='data.js'></script> <script src='main.js'></script>