mattstyles

Moderators
  • Content count

    1,405
  • 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

4,416 profile views
  1. Difficult game i made

    I get the same in FF, unhappy about something. Chrome works fine.
  2. Spirit animation not working - JS, Socket io, Express

    Sounds like you're doing really rather well and this is just a small kink in the road. I can recommend Pixi for canvas (webgl) rendering or pick a general web development technology (like React, Preact, Inferno, Vue etc) if you have any experience of that and don't need super fast rendering—either solution sounds like it could be overkill, especially considering you already have a rendering thing set up that works and don't envisage the rendering becoming vastly more complex than you're already handling. The only thing that possibly stands out for me from your structure is that it almost looks like you have some player data in `players.js` and maybe some more in `xyLocation.js`? I'd have thought you'd have something like player data, which would contain a reference to the image and <x, y> location data (as well as other stuff), and possibly some utilities to help with rendering i.e. do you store screen location in player data? or do you just work out screen location based from array position? i.e. char 1 is at 100, 600, char 2 is at 200, 600 char 3 is at x * 100, 600, for example. Your game then holds the array of active players. Some people prefer to have rendering functions separate from your entity data (i.e. in game.js or maybe a new render.js), some would prefer to have entities responsible for their own rendering code and just call something like `entities.forEach(entity => entity.render())` for example. Pros and cons to both approaches. Next question I guess could be how you're stuffing entities into the array i.e. is array index lookup robust enough for you to be able to manage your list of players? What happens to the array when you have 5 players and number 3 leaves? Do you leave a sparse array or splice number 3 out so you maintain a sequential array, but this time with 4 entries? Do you need id's associated with players? If so are you happy with searching the array to find one or would an object keyed against ids serve you better? For such a small array it likely doesn't matter much, only in terms of how you write the rest of your utility functions. At any rate, I'm expecting you to have an array (list) of players (looks like its in game.js) and during your rendering loop you iterate over the list and render each entity. Sounds like you have entities responsible for rendering themselves so you must have code something like: // render remotePlayers.forEach(player => { player.render() }) and likely also have something for updating players (I'm thinking you have them animating onto the screen so need to update positions): // render remotePlayers.forEach(player => { player.update(delta) }) and inside each player update you likely have some logic like: // Note you might be using this to reference a player as sounds like you're // using instance methods for this functionality and I'd expect your actual logic // to be a bit more involved than this small example player.update = function update (delta) { if (player.state === 'entering') { player.x -= MOVE_AMOUNT * delta } if (player.x <= player.desiredX) { player.state = 'entered' } } This sort of setup means that none of your rendering code really cares about entering and entered players, as you're iterating over an array of players you just need to make sure you instantiate a new player correctly (probably with a proper desiredLocation variable in this example) and just push it onto your players stack. Then just iterate and render/update right?
  3. Henweigh the Game

    Works super well for me in Chrome on my decent laptop, it actually gets really quite fast, which is tricky, but thats good right??
  4. Spirit animation not working - JS, Socket io, Express

    Yeah, Gios hit it straight on the head, I take the approach that the absolute simplest conceptual module is to redraw everything every frame, of course, this isn't efficient in the slightest and only the most trivial of games/apps can get away with it, but, many libraries should abstract the complexity away so you only deal with the simplest case of redrawing everything every frame i.e. Pixi has a scene graph, you just call render and it works out what work it needs to do, in the general web dev world React works in exactly this way as well (and many other frameworks are taking this approach too, its nothing new). This shifts the complexity of working out what has changed away from you as the application developer and gets it handled by your framework/module/library of choice. Depending on how you're doing things this might be easy or hard. Try to separate what is logic in your game and what is 'cruft', i.e. players are either in or out of your game, the movement that is visualised when they become in is 'cruft', it isn't core logic, its a bit of visual candy that makes your game a little more interesting for the user. It still sounds like you have a single player entity somewhere in your code, when what you need is to manage an array of entities, so that when a 2nd player joins you (conceptually) render the first one and render the animation as the 2nd one trots on to the screen (I say conceptually as you may not actually re-render the first one, but, its easier to think about it as if you were re-rendering that first one each frame even though it hasn't changed and doesn't technically require a re-render), whereas at the moment it almost sounds like you're rendering the character and then when a new one joins that new one become THE character that you're rendering. Does that make sense? Or is helpful?
  5. phaser@beta: npm run build problem

    @RiCoTeRoX Yeah I missed that you were manually running yarn inside the dependency to grab those dev deps. Is there a reason why you'd want to build from the dependency? Is it just that it isn't yet available anywhere else as a built dep? Just interested as the build script seems to just minify things up, which you'd probably be doing anyway? I'm not totally clear on what webpack does out of the box, is there more that is desirable about building it yourself vs including it from /src?
  6. phaser@beta: npm run build problem

    @RiCoTeRoX That won't quite work as you still won't have Phasers' dev dependencies. @WizaEric Following on from the above, why are you trying to build Phaser? Assets on npm are expected to be built and consumable assets, there is no enforcement on this, but usually this is the case. Webpack is a development dependency for most libraries, not an actual dependency, if this is true for Phaser (it likely is), then when you install Phaser npm will recursively install its dependencies (it actually has none), but, crucially, not its development dependencies as they are not required. Rather than installing Phaser as a dependency via npm, if you want to build it you should clone the repository and build from source. There's a really detailed guide on getting started in the repo. edit: I did see that Phaser doesn't export its distributable files to npm, which is a little odd, I've never encountered this pattern before, but I think its just that the source is already distributable, which is actually awesome. Generally anything inside `node_modules` should not be touched, but, the problem is simply that you don't have the dependencies to do the build. Phaser will route through any `import Phaser from 'phaser` to `./src/phaser.js` so building isn't going to be very useful for you but, run `npm install` inside the phaser directory then `npm run build` and you'll get a `./dist/phaser.js`, you'd then either want to change the package to point at the built file or use something like `import Phaser from 'phaser/dist/phaser'` to get it, but, I don't think you'd need this file anyway if you're going down the npm and modules route.
  7. Make a Text game on HTML

    Hello, and welcome to the forum. Most important thing is to get coding. Just get something up there on the screen in your browser and then keep working forward. Your first challenge is just working out how to get a simple message on the screen, this is the start of your text-based RPG and can be as simple as throwing an element in an HTML document and firing it in to your browser. Next challenge would be accepting some user input. So throw an input field on there. Now things get trickier. Work out how to get user inputted text out of that input field, you'll need to use that. This is a bit trickier but there is loads of information out there so get researching (get good at finding good information, MDN should be a first stop). Now that you know how to get user input and display some things on the screen its time to react to the user input. So you work out how to setup a handler that listens for the Enter key, when the user presses this you get the text out of the input field and work out what to do next. You probably want some conditional logic so a series of `if` statement could help, maybe even a `switch` (when you get really good there are some design patterns that can help you here), this is actually the start of your input handler code. By now you actually have a game of sorts, you've displayed a message to the user, gathered user input and reacted to that user input, this is 90% of most games. You are also starting to have a bit more code now so you'll want to start researching and thinking about different ways you can structure your code to make things easier for you. Where will you stick variables? Do you have any variables that affect your conditional logic when handling user input? If so, how do you make it available? The most important thing is to get coding. Don't get swayed by the 5000 JS frameworks and libraries out there, yes, lots of them will be useful to you, but its easy to get lost as JS is a very thriving language. Keep to the basics, learn how JS works, learn how it interacts with CSS and HTML, learn how to fire up a local server to get stuff in to the browser, none of these things are particularly trivial so take your time, do you research, and write lots and lots and lots of code, doesn't matter if most of it is crap, learn why its crap and how you can improve on it, even after 20 years of coding you'll still look back on some of the code you wrote last week/month and know that you could do it better, or learn (or remember!) a technique that would have helped. The most important thing is to get coding.
  8. Best Typescript/Phaser IDE?

    It's so amazing how tied to their editors people get! All of the HTML powered editors use the same typescript modules underneath, they are all identical for TS support! Anyone that says 'VSCode is the best for TS' hasn't got a clue, its no better nor worse than any of the others as they all use the same modules underneath. I agree with @Refeuh, personal preference should justify fiddling a bit, they'll all much of a muchness. I also stay away from larger IDE's as you don't need what they offer for web development, but, again, this isn't a hard rule, it really is just a personal preference. For me I wanted an HTML-based editor (VSCode, Atom, Brackets) as I wanted to dig in to it, I stuck with Atom because I contributed code to it and will only move when it becomes prohibitively slow to use. VSCode is very popular amongst the devs I work with (10-12 teams, so 50-60 devs). Spend an hour with each and see which one you like, your criteria might be plugins/modules they support (they ALL do the same stuff, like TS integration), might be theme availability (bare in mind you're a web dev and they're web tech so you can change things easily), might be some rare feature that only one of them supports. Get a feel for the community, this is mega important, as you'll want to make sure it is regularly updated, new features added where necessary and that all the plugins you rely on are well supported. Atom and VSCode are particularly well supported, you could even go so far as to say VSCode (which is newer) has really shaken things up again and started a mini editor war, which is awesome for all of us as users.
  9. Spirit animation not working - JS, Socket io, Express

    This has nothing to do with multiplayer (express/socket.io) and, to be honest, you're not ready to tackle a multiplayer game. This is just a problem with how you're representing your game data. We can simplify things down easy enough. When the game starts create an array called `entities`. Now enter the main game loop. The game loop is simple and consists of: * Clear the current screen * Render the new screen * Gather inputs * Handle logic And that is it, this repeats until some exit condition completes (or crashes) your game. The bit you mention in your post happens in the `gather inputs` section so lets consider it, the `gather inputs` section is actually pretty dumb, it literally just gathers inputs, the next section deals with handling those inputs. Usually stuff in gathering input would be gathering mouse and keyboard interactions from the player. You're doing multiplayer so things shoot up in complexity as you must also handle network events, for now, lets just assume that we don't care about things like latency and packet drops and that all network traffic is a stream of events, this means they're basically synchronous, i.e. you can just handle them as they come in. You need to handle 2 network events, players joining and players leaving. You listen for these events in the gather input phase and handle them in the `handle logic` phase, although these two steps could intermingle (I'm not suggesting that, but it often happens, it isn't great but, depending on how complex you want to go might be the easier route). When a player joins give them an id and pop them on to the entity stack. When a player leaves inspect their id, find them in the entity stack and remove them. Each `render` phase loops over the entity stack and renders them. This is independent from the network and player events you're handling, shared only by read-only access to the entity stack.
  10. Contributing to Phaser 3?

    Sounds pretty clear to me! I'd certainly be pretty happy with a clear bug report like that! @rich or one of the team can confirm but I reckon that's a useful open issue. Might be worth adding `v3` or `[phaser 3]` to the issue title, seems like a few of the open issues have such a tag in the title, not sure if thats just assumed or an actual convention for the project though.
  11. How to make secured online scoreboard?

    Using https gets you a long way towards making it more secure, this doesn't really stop people from 'cheating' their score if they inspect network calls and then try to fake one with an absurdly high score, hence why most online scoreboards for games are garbage. You could try some other steps like 'initialising' a session when the client hits the 'play a game' button, this would send off a request to the server which responds with an id, you store the id and the time initiated on the server and when you get a 'post this score' request to the server you could try cross-referencing the time with the init time and see if there has even been enough time to accrue such a score, you could even try posting (using that id) during the session (i.e. at the end of each level) to see if that session has a 'reasonable' play time and progression for the given score. Not completely foolproof of course but would make it very tricky to 'fool' the system.
  12. Contributing to Phaser 3?

    I'd imagine thats a pretty good way to get going, there's a contribution section on the readme with some links to more details on how to contribute, not sure if these will be adapted at all for v3 but I'd guess they'd stay pretty much the same.
  13. Visualization of large data sets - seeking advice

    I did read something fairly recently evaluating different libraries for large data tables (sorry, I can't find the link, but googling has plenty of examples and run-throughs), I can just about remember the take-aways though (this just dealt with data tables): * It evaluated different libraries that were tied to different 'frameworks', generally speaking anything in the Vue/React/Angular2 world was the slowest but by far the easiest to set up, style and use. All struggled with large datasets although some used various techniques to reduce the amount of render i.e. React-Virtualised is a basically a list management library that ensures that the DOM is as minimal as possible, so, whilst your data set might contain several thousand (or million) lines of data the screen is only ever going to be able to render 20-30-40 at a time so these tools aim to reuse 'exiting' lines and replace them as 'entering' lines (very similar to object pooling) so that the DOM is only ever rendering the minimal amount, so long as you get the scroll right then rendering is super snappy (load times of all the data is obviously a little slower). This is the exact same method iOS uses to render list views (Android might do the same, I dont know). * Vanilla JS libs weren't much faster than those tied in to the rendering lifecycle of Vue/React/NG2/etc, the only real gain is in the loss of the perf overhead those libs introduce, or, perhaps more accurately, their rendering lifecycles are more optimised for the exact use case. * By far the fastest was a wholly canvas based renderer (I think this one cost some cash, and I don't know what it was called). This one was also easily the hardest to use, definitely the hardest to style and layout and, out-of-the-box, looked absolutely terrible. But, if huge datasets are your thing then its the only real viable solution (although the minimal-DOM approach explained above wasn't terrible, even on mobiles). For charts and stuff I don't think I've ever looked far beyond d3. It's more work to setup and use than HighCharts as its a lower-level library but it can handle a number of visualisations and its primary goal is performance so large datasets aren't always a big issue. It's been a while since I used it but I think its a pluggable library so you can bolt on DOM or canvas-based renderers as appropriate for the type of visualisation you want. I don't see HighCharts as a competing library to d3 as they have slightly different scopes and I don't know any real competition for d3 either. d3 is probably lower-level than you want to go (its a 'draw a line' api rather than 'draw a chart') but there are millions of abstractions (modules) on top that give you a 'draw a chart' api.
  14. Can anyone help with this phaser example?

    Global variables are fine (if thats your thing), and semicolons are optional in JS, its rare a missing semicolon would cause a problem (rarer than using them actually, but thats a different discussion!). What is the error? I'm expecting a syntax error, as ugajin pointed out, the collectStar function should be causing an error. The console should have thrown you a pretty informative error about this, did you check it?
  15. Native dialog sounds fine, although not sure it can accept user input beyond button clicks (maybe it can, example above doesn't show that). What's wrong with a DOM input field? Pretty sure there are a couple of Phaser Input modules kicking around that fake this in a more Phaser-idiomatic way as well if you wanted to stay within the Canvas and keyboard event listener realm.