11 ms·
HTML5 Games Workshop: Make a Platformer Game with JavaScript
- james-skemp 10y agoI was wondering what framework they used, and am glad to see them use Phaser. The TypeScript definitions are pretty nice (at least for the last official 2.x release), so if you're interested in learning TypeScript it's a great way to start. Life has gotten in the way so I've slowed down, but I kept track of the Phaser tutorials I followed at https://github.com/JamesSkemp/PhaserTutorials https://github.com/JamesSkemp/PhaserTutorials (and converted the later tutorials to TypeScript while I was following them).
- k__ 10y agoPhaser is a good choice for TypeScript, as most game engines it has a rather big API and TypeScript makes working with it a charm.
- deleted 10y ago[deleted]
- twoquestions 10y agoHas anyone here used Phaser (the framework in the article) or any other JS technology to make a game that they ultimately made money off of? I understand engines like Unity and Unreal can now target JS as a compile target, but most of the games I play are native.
- dmwallin 10y agoI actually currently work at a company that makes playable mobile advertisement games using web technologies. We have our own engine though.
- danbolt 10y agoI made a game[1] as a hobby with Phaser and packaged it with NW.js. I worked on it for about six months, but not as a commercial project. I haven't done any marketing or advertising. I've made about $8 US from the game passively existing, which I'm quite happy with. [1] https://danbolt.itch.io/superradishwitch https://danbolt.itch.io/superradishwitch
- whatever_dude 10y agoI haven't done any, but I know there are different publishing models where JS frameworks really shine. It's not normally about creating a standalone game/app that you sell, but more about creating an easily accessible web game that attracts an audience and then you capitalize on tangential in-game goods like coins or abilities. Think more Kongregate (or even the Mafia style games) rather than App Store. Those rarely need a full blown engine like Unreal or Unity.
- kyle_u 10y agoI haven't made a single cent off it, but my solitaire game (https://solitaire.gg https://solitaire.gg) uses Phaser, I found it to be a great engine, if a bit heavy for a card game.
- crizzooo 10y agoI have just finished a game that has fun core gameplay, and Id like to continue building it out for optimization. However, we were already running in to issues where phaser was limiting us. Current build already has server lobbies, and after putting that into prod, I'd like yo add matchmaking and team based modes. Genzed.herokuapp.com
- enkephalin 10y agoat my last job, we developed games for online casinos with phaser (mostly slot machines). development started in 2014, and we looked at all the major html5 game frameworks, and phaser stood out by far for our requirements.
- Blaiz0r 10y agoI recommend you take a look at http://playgroundjs.com/ http://playgroundjs.com/ The owner has a few games on Steam, and is currently developing a free game http://wilds.io http://wilds.io
- golergka 10y agoI work in a company that uses Cocos2d as a primary game engine (JS or C++ bindings in different projects - moving to JS lately), and we recently celebrated 100 mil installs on mobile.
- ioulian 10y agoI've done a few games for a company I work for. These were developed as minisites for marketing purposes. I used Construct for the first game and that was very limiting (but very "easy" to use.), but in the end this created a lot of bugs (as you can't fully control the logic sometimes) and it's not easy to extend. The next 3 or 4 were done in Phaser. It was very easy to setup and to code your own stuff in it. It runs very well and because you can code around it, server connections were also easy to do. The next game will be done again Phaser.js.
- irrational 10y agoI'm going to try going through this workshop with my kids. One of the challenges of teaching my kids to program is finding interesting projects that are within their scope of interest. I've tried MindStorms, Ardrino, and various online tutorials but so far nothing has interested them for very long. Maybe making games will interest them.
- paulcole 10y agoMaybe programming's just not their thing?
- Tepix 10y agoTry Minecraft with the Python plugin.
- Shengbo 10y agoIf they're not interested, just keep them in the loop. Show them some of the cool stuff people build every once in a while or just tell them they can automate their math homework with a simple console app. I'm pretty sure the prospects not having to do my homework by hand would've made me sit down and code instead.
- olivier1664 10y agoHave a try on https://scratch.mit.edu https://scratch.mit.edu. My 9 year old kid love it.
- TazeTSchnitzel 10y agoThis teaches a bad practice: frame-rate-dependent movement speed. Perhaps it runs fine on your 3GHz 16-thread i7 Chromebook Pixel with a single tab open that achieves a consistent 60fps, but it makes the game unplayable on machines achieving slower or less consistent framerates (like mine, which has a somewhat overburdened Firefox process on a mere 4-thread mobile i5). If you're writing a game which, like this one, does not run at a fixed guaranteed framerate, you should vary movement speed based on the time delta between frames, i.e. instead of `x += 2.5` on every frame, do `x += (2.5 * 60) * seconds_since_last_frame`.
- CJefferson 10y agoNo, that's also a terrible idea. It makes problems like jumps that are easier, or harder (maybe impossible) to achieve based on frame rate. Games used to do this, now noone does as it leads to impossible to fix bugs and weird physics problems. The best idea (but i don't know how to do this in is) is to run your engine at 60fps (say), then skip drawing if you are behind (but then always draw at least every third frame, if someone's computer isn't good enough to even run the engine). If you want to go above 60fps, then extrapolate between two states. EDIT: If you want to see an example of this, see for example https://www.quake3world.com/forum/viewtopic.php?f=13&t=2170 https://www.quake3world.com/forum/viewtopic.php?f=13&t=2170 , which is a big investigation into the "best frame rate" to play Quake 3 at, to run fastest / jump highest.
- wareya 10y agoFirst, even at a constant framerate, different players will have different experiences with the game due to different amounts of latency in their peripherals, weird CPU bugs, very very minor floating point behavior deviations, etc. The important part of making something framerate independent is to make the effects of framerate independence /smaller enough/ than other factors that make player experiences. It's entirely possible to not have gameplay change at different tickrates. There are three usual types of problem that cause gameplay to change at different tickrates: 1) Events that happen at specific times If events can only happen "in sync" with ticks, then running at different framerates will make them happen at different times. Say you have a machine gun that fires once every 1/10th of a second. If you're running at 24fps, then not only do you need to make sure that you correctly output a bullet every two-or-three frames, you also have to make it so that they /act like/ they came out at a time between frames, presumably by simulating them a little extra bit or a little less depending on what's necessary to make each bullet a fixed distance apart (for example). You could also use a continuous interaction system here but that's really hardcore and doesn't matter in 99.9%+ of cases. 2) Treating curved motions as linear motions This isn't a problem in 99% of cases, but it ~can~ be a problem. If you can't represent your physics curves in closed form, it's effectively impossible to trace them in a framerate-independent way. The only thing you can do for these things is to "fix your timestep", but "fix your timestep" should be used with extreme caution and not be applied to action games because it adds input latency and hides frame-specific-timing information from players. Recommendation: use simpler game physics. Constant acceleration everywhere you can, special-purpose closed form functions with the right curves where you can't, and avoid tight curves. This makes it less of an issue. You might also want a collision system that allows curved paths, but if you have enough control over your game's environments, and you don't expect people to run at SUPER low framerates, this isn't an issue. 3) Running different "integral" parts of the simulation out of sync with eachother. This isn't literally about code order execution, it's about the behavior of different pieces of code that "add up" "over time" (if you're into calculus, think antiderivatives) If you add n to your position every frame, that's all fine and good, as long as it always starts at exactly the right time. If you add "five pixels per second" to your position, then you need to make sure that always causes the same amount of distance travelled. Quake 3 handles this by giving subframe timings to things like pressing and releasing movement keys. Another example is gravity. Normally, game code adds a specific amount of gravity every frame, possibly adjusted for time, either before or after motion. This isn't good enough, because if you add gravity after moving, very low framerates will have a higher initial frame of gravitational movement; essentially, low framerates will skip "outside" the ideal jump arc rather than tracing it. If you add gravity before moving, the opposite happens, low framerates trace "inside" the ideal jump arc. The correct thing to do is to calculate motion with around half the added velocity from all accelerations for that frame, which basically means the average of accelerating before or after. You can also trace a hermite spline, which is more flexible (you will have perfect framerate independence for any acceleration values that only change along line segments, i.e. "constant jerk", as long as you handle start/stop conditions for changes in acceleration with a correct continuous interaction simulation), but harder to implement. The above is only 100% ideally possible for things you can represent closed form, and in practice, people will only implement something correctly if it's not just closed form but /simple/. Many games stop short of correct jump arcs, but it's entirely possible. Gang Garrison 2 was just changed to have a correct framerate-independent jump arc.
- JohnHammersley 10y agoAm I the only one who clicked the link expecting to see Citadel Minatures recreated in 2D in HTML5?
- SketchySeaBeast 10y agoIn the grim darkness of the far future, there is only <canvas>!
- Macsenour 10y agoMy first thought was: Ut oh, someone is going to get a call from a lawyer with an English accent...
- richardboegli 10y agoREMOVED
- vatotemking 10y agoI want to learn more about js game dev. What other frameworks are there (other than phaser)?
- a3n 10y agoLMDDGTFY: https://lmddgtfy.net/?q=javascript%20game%20frameworks https://lmddgtfy.net/?q=javascript%20game%20frameworks
- golergka 10y agoAn answer from a qualified member of HN community is much more valuable than some Google results.
- vatotemking 10y agoExactly. Thank you. I actually implemented a platform game with melonjs a long time ago (like 6+ yrs ago), before that a platform game using Flash + AS3. I have since given up game dev. I was asking hoping to solicit a response from current game devs on what's the preferred js game frameworks. But alas, Im automatically presumed to be some random lazy web guy asking on HN who doesnt know how to do these basic cybery stuff like goooogelling.
- 1ba9115454 10y agoLooks like you can develop in the cloud https://phaser.io/tutorials/getting-started/part3 https://phaser.io/tutorials/getting-started/part3 I've used Cloud9 for ruby on rails and it's a great way to develop.
- movedx 10y agoI've recently been using vim inside of tmux on a remote server to "replicate" what C9 offers. It's rather nice and I'm enjoying it a lot, but I also found C9 to be pretty awesome too.
- exodust 10y agoI had hopes, but then played the game. It's very basic and doesn't work on mobile browsers such as Firefox on Android and iOS, nor iOS Safari. Doesn't load in desktop IE11. No touch support. HTML5 games seem to be stuck in a pattern of ultra-simple design, limited browser support and poor responsive characteristics - what HTML should be good at. Even a graceful degrade is absent. Very simple games should counter-balance that simplicity with awesome cross browser and mobile support. Not trying to discredit the educational efforts, but perhaps making a dedicated windows or native app game would have been better to teach things like animating sprites and physics, where the end result sits more comfortably on the platform it was made for.
- Blaiz0r 10y agoIt can be done. but I don't feel it was the purpose of the article. This game has better support: not mobile however... http://wilds.io/ http://wilds.io/
- jeppz 10y agoA Warhammer platformer? sounds odd.. wait, not that games workshop
- z3t4 10y agoDeveloping a "HTML5" game is a very great experience. The only HTML you need though is <!DOCTYPE html><meta charset="utf8"><canvas></canvas><script> ... </script> The rest is just JavaScript and interaction with the canvas. And writing a server in NodeJS is almost trivial if you already know JavaScript. I recommend not using a game engine or framework! And as a general advice, actually don't do much abstraction at all! In-line all functions within the animation/render/game loop. Your next weekend project should be a ".io" game, it's a lot of fun!
- 0XAFFE 10y agoCrossCode[1] is written in Impact[2] and its a realy awesome game. So this seem to be possible. [1] http://www.cross-code.com/ http://www.cross-code.com/ [2] http://impactjs.com/ http://impactjs.com/