HTML5 games are pretty popular though, I've been thinking of learning something like Phaser for a while.
Edit: Yes, I know that HTML5 games require languages like Javascript for the logic. :)
I want to put a vote in for Phaser. Solid framework, lots of examples, and you can get quite deep with it. It's also open source so if the game making aspect isn't challenging enough for you, you could contribute to the code-base.
> Are you using an isometric plugin or just the default Phaser library?
I ditched that approach because that system - using tile maps was too restrictive and bad on performance. I built my own system which relies heavily on tiling plain ol' images and altering images by converting them to Phaser.BitmapDatas on the fly. I don't use transformation matrixes for anything - I only use 2D matrixes. So the art is isometric (dimetric, to be specific) but the code which displays, moves and manipulates the art, deals with it as if it's 2d.
This hitboxes appear circular but what you're seeing is purely for aesthetic. Here's what the computer sees: http://i.imgur.com/EUWDu6E.png
So those squares are essentially nodes in a grid. It's a lot more complicated than just 1 grid. Each unit creates it's own grid on the fly when it needs to find a path and the grid is only as big as it needs to be (the distance between the unit and the coordinates the unit is going to). So instead of looking for a path through a grid representing the entire game world, it is only looking for a path through a grid that represents the area of the game world approximate to its present and going-to location. Here's a little demonstration for ya: http://i.imgur.com/xhBn5IJ.webm
Not that the purple squares represent hit areas and the orange represents the bounds of the image frame (not used for any game calculations).
Here's an HTML5/JS Framework I've heard and seen some good stuff about: http://phaser.io/
Also here's a tutorial for it on reddit though I havent worked through it myself yet: Link
Web developer? I assume you know JavaScript? Then you should take a look at Phaser. I believe as a beginner game dev, it'll be the best way to get started with web based games (or mobile) without the overheads of having to learn other game engines, their tools, and languages.
Once you're familiar with game development a little, I'd move to Unity for 3D mobile and web and desktop games.
I found Phaser to be a pretty neat HTML5 framework, with the bonus* that it can easily be wrapped in cordova to make an Android or IOS game.
* cordova will wrap pretty much any framework
really excellent tutorials and examples
move the player using the arrow keys --- and scroll down to see the simnple code
I'm using Angular 2 and TS at work, so I pretty much automatically rule out packages that aren't in NPM (most of the good ones are).
I'll then look at which libraries have the most documentation and the most stars and activity on Github.
By the way, "graphics" is a huge category for JS. You could be doing something like simply drawing a few shapes on the screen or you could be doing heavy duty data visualization with D3. I find it easiest to filter down by just googling around about what I'm trying to do.
Here's a library I've used successfully for building games in the past: http://phaser.io/
I was introduced to this during a hackathon as my team was trying to create a web browser game. I read their documentation and followed their tutorial and was able to implement some of the things we wanted. I had no prior experience with it but I found it somewhat easy to begin with in the little time we had to get something up an running. do some research on it yourself, and see its something you'd like to pursue.
I can't personally recommend an engine but two devs I manage have been using phaser and they have really enjoyed it and have come up with some pretty fun games in their 20% time.
If you're primary goal is to create games, Gamemaker is a great choice. Hotline Miami used it for their first game. If your primary goal is to make games and learn an industry programming language, you can't really beat Python and Pygame, C++ and SDL, or JavaScript and Phaser. Python is a great introductory language with tons of resources, C++ is harder to grasp initially but has fantastic tutorial content for games and is the industry standard, JavaScript is the language of the web and is great for portability and getting your games to reach a wide audience.
Of the above choices, I would recommend Python if you want to be messing around with making games quickly, C++ if you're serious about venturing into AAA game dev, and JavaScript if you're at all interested in web development.
Awesome start. This is probably a perfect time to bring in the power of a framework like http://phaser.io/
Then you can focus on the game design without needing to hand-roll your own physics code.
Thanks!
Pygame has worked well for my cause. Although, It's not officially maintained anymore (I don't think?) and I did run into some troubles with outdated documentation, etc.
If Python is not a necessity then another option would be Phaser.js, which a friend of mine played around with and reported good things: http://phaser.io/
yeah, the only thing with phaser is they updated from 2 to 3 in January and made huge, breaking changes
and last I looked documentation was still short for the 3 version
and they've been updating the 3.0 version like crazy (literally every few weeks) they're already up to 3.8
so you do something today and 3 weeks from now in 3.9 the code will be different LOL
but yeah, phaser is great
Depending on the type of game you're doing you may find it easier to start off using JavaScript if that's what you're familiar with.
There are a lot of games which could be written in React, but there are also libraries such as Phaser.io which provide a more normal game engine inside of JS.
They can be developed with standard tools and then converted to IOS apps with something like PhoneGap.
What kind of game are you looking to make? /r/gamedev does a lot of js games. /r/incremental_games has some good tutorials if you're looking for that specific type of game. /r/roguelikedev and /r/roguelikes are good. /r/proceduralgeneration isn't specifically about games, but frequently has game features included. Lastly, try http://phaser.io/learn
Good luck, keep us posted on what you make
I've actually dealt with this on a project side project that I was working on. I'm not a Meteor guru and I'm just getting started in Phaser, but because no one else has commented yet I'll go ahead and tell you what I did. My apologies if this is a vague example; this was a side project that I haven't worked on in a couple months but if you have any specific questions I'll try and answer them as best as I can.
I'm using a packaged version of Phaser. This is the package that I'm using. I'm assuming that you have added this to your Meteor packages.
Let's say that I have the following template that I'm rendering to a route from an HTML file.
<template name="mydemo"> <div id="phaser-example"></div> </template>
I also have another file called "game.js" containing all the code found in the following example from Phaser.io. I've taken all the image assets from the example and loaded them into the "/public" directory of my app.
The first line of code in example above looks like this:
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
It initializes the Phaser game inside a div with the id "phaser-example" which is inside the "mydemo" template in our HTML file. We want to change this code so that it will run when our template is first rendered. I replaced that first line of code with something like this:
var game; Template.mydemo.onRendered(function(){ game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); });
From what I remember, that's all I had to do to get a demo working. Again, I apologize if this is a vague example. This was one of my side projects that I haven't touched in a while.
Old time excel-engineer here. First of all, I can't imagine how you managed to pull-of a tetris/match3 in excel :) Can you share an animated gif or at least a screenshot ?
I would recommend Javascript+HTML5. The language is not that frightening, you can write your code, hit F5 on your browser and see what you have done.
There is phaser which is free and which's name I hear most on the scene. I haven't used it but the people I talked are recomending it. It's being actively developed, has WebGL support and there are already some games on the wild made with Phaser.
If you have no financial problem, I'd personally recommend ImpactJS. It's 99$ and you can start making things in a few days. Sadly it's not updated since a year and what will happen to it in the future is unclear. But I use it and love it. I did a very simple match3 game relatively easy within a few weeks. Normally it should take much less but I have a day job and little time to spare.
Both game engines are written in Javascript and you have access to the source code in both. And the best part is, you can open your own webpage and put the games you made there if you want people to play from their browsers.
My current framework of choice is Phaser, a Javascript library for HTML5/mobile games. The 'why' is that distribution is simple for web games: put it on a website. I've gotten burnt out on build steps, failing to link libraries, weird configurations. Using the web as a platform slightly eases those pains :)
Open FL isn't really a game engine though. You would really be looking at something like HaxeFlixel, which is built on top of OpenFL.
Alternatively, Phaser is probably the most complete and reliable 2D HTML5 engine available now. It's got a huge community, tons of documentation, and it's very actively developed.
I have ADHD and am a programmer. I actually think the two things can pair well together. That isn't to say there aren't issues that a non-ADHD person woudn't face, but programming is a field that is constantly in flux, you need to constantly learn and stay on top of new technology. It takes a certain kind of mindset to stay abreast of all that new information. A brain that craves new information like an ADHD brain does excels at it.
I think the issue that OP is having, as well as some of the other commentors, is not having well defined and realistic goals. I've got one for you. I'm going to give you a very specific goal with a well defined set of criteria and time line for completion. It is also realistic. Depending on your level of programming skill you might be able to finish this much faster than the alotted timeline but do not procrastinate!
Before the end of the weekend (I'm in the USA so I have a 4 day weekend coming up) make a simple platform game with Phaser follow the official "Getting Started" and "Making your first game" documentation from the Phaser website. As an optional stretch goal add one new feature to the game that isn't covered in the lessons. Don't be afraid to copy and paste code from the examples. Report back here and show me what you made and tell me what you learned. Also feel free to PM me for specific JavaScript programming or Phaser questions. My hope is that not only will you enjoy this exercise you'll see the need for having more clearly defined and realistic goals when you set out to work and learn.
> There are straight JavaScript engines that are awesome as well. So many options, and good options when your going 2D.
Yeah I just want to pop in here to recommend phaser.io or PIXI.js which are built specifically to give really fast 2D performance on html5. They are pure javascript which some people might prefer. You can always code in typescript or coffeescript if you want as well.
libGDX is free & primarily targets Android but cross compiles to Desktop - Apache license so fine for both closed & open source - it os Java based.
Compiles to IOS as well I think, but this maybe discontinued / in transition ?
Phaser will work on Android and can be app bundled with Cordova and is Javascript ?
Unity has Android & IOS modules, free with a splash screen, for sales below $100k
JavaScript might not necessarily be the best tool for you. I just happen to be really at home in the language. Have a look at TypeScript or even Unity who is working hard on their WebGL exporter.
If you really want to work in JavaScript, I would recommend starting out with Phaser.io. Very likely a better game engine than mine, and free for everyone :)
Slick! And really nice juiciness on the breakout demo.
This would make a nice Phaser plugin, if that's your kind of thing. The API for masks should let you achieve non-multiplicative shadows, too.
I think this is uncalled for. Modern browsers use your GPU, therefore certain models of graphics cards might not sit well, for all I know this could be driver/software related.
My code isn't buggy, I'm using an established engine (phaser) and it runs on every piece of hardware I've tried it on to varying degrees of success. I get a solid 120FPS in Chrome on my desktop machine, but I get the unresponsive mess you have described on my 8 year old MacBook.
I'm not a developer, I'm a guy making a game with his brother-in-law in his spare time and we are giving it away for free without surrounding it by adverts (we have one banner add which you have to scroll to). We want the game to look a certain way and we can only achieve that with webgl in chrome at the moment, we state on the game page that the game is designed and tested in chrome. Also the game clearly says we are in alpha, I haven't done a single optimisation sweep yet (it's too early to do that).
Web games are changing, if we can make games to rival native PC games why not try?
I'm sorry it doesn't work for you, the game will get improved but no it isn't going to be soon because I have a full time job.
Quintus has some great examples and documentation to get you going: Html5Quintus.
If you are a little bit more experienced I would recommend Phaser!
Unnamed Project
I see we've already got a new project here in Age of Transcendence. I'm also new, not just to creating a roguelike and this subreddit but to reddit overall. I'm working on an unnamed project and since we all have to start somewhere, I'm currently in the research phase. I spent the week doing a lot of reading and not much else. This Roguelikedev subreddit is truly an amazing place.
The first choice I had to make is which language to work in. I've been a software developer for many years now, originally starting in Delphi then moving to C/C++ and these days mostly C#. However I've decided to go with javascript. It's a language I use occasionally but am not entirely comfortable with. It'll give me a chance to get better with the language while creating a roguelike as a hobby.
Cloud9 combined with Phaser makes it possible to develop from anywhere which is ideal if I'm out somewhere with my tablet and having to wait for something.
So I've decided on a language and some tools. Otherwise not much and haven't started. That will happen this week.
If you're looking to create the game itself, you're going to want to use HTML5 canvas. Check out this Github repo for an agar.io clone, it might help you get an idea of where to start.
You could host the webpage itself using Github Pages, as long as you're not expecting too much traffic. The backend server, though, will have to be hosted elsewhere - either on a local machine, or using some sort of hosting site. Afraid I can't help you there.
EDIT: If you're not super experienced in networking, I would recommend starting with a simple single-player game first, and then scale up to multiplayer. You could even use a JavaScript game engine to make your life easier. I recommend Phaser, I've taken a look at it and it seems promising.
Follow their tutorials and try to make something that can be hosted on a single webpage. Then, once you've got that down, look into networking and multiplayer.
to be honest, I can't learn from tutorials and/or books. The Phaser API and docs helped me out a lot but more as a reference. I learn mostly from writing really shit code, then rewriting, rewriting and rewriting until it works the way I want it to.
But yeah, I can't pin-point any particular learning source as most of what I know is based on just trying. If I run into a problem I can't solve, I'll use Google or post on a forum/stack overflow.
> I know Css/HTML/Js
javascript framework phaser.io
some examples -- with code below the example
use arrows to move
http://phaser.io/examples/v3/view/camera/follow-zoom
use mouse to move and click to shoot ball
http://phaser.io/examples/v3/view/games/breakout/breakout
click the invaders to destroy them
http://phaser.io/examples/v3/view/animation/hide-on-complete
I know we're talking about C# because this is /r/csharp, but you're talking about game/web dev, so why not try out making games in JavaScript?
You still get to hone your skills as a web developer, dealing with everything that you'd normally deal with, but you'll be targeting the HTML5 Canvas instead. Especially with something like Phaser, they have a ton of tutorials, fully documented API, and some free assets for you to get started with. It's all JavaScript, just modified for game development.
I haven't written a game in a while (maybe 2017?) but I did put out a few:
They were really fun to make, and it certainly made me better at web development due to me needing to learn more about JavaScript. You can even use TypeScript if you want, or use JS libraries with it (jQuery, etc).
If you check the developer console you will likely see security errors. You need to run an http server to serve the files rather than running off your file system directly.
You can find a tutorial here
I think you'll find that there is probably more going on with roll20 than there is with most games.
You should not set your sights on a multiplayer game for your first attempt. Even a simple game can be very difficult. A good rule of thumb for starting a project is to only introduce 1 or 2 new concepts into the mix. This can be said for someone just starting out or someone who's been developing for years.
Either way, give http://Phaser.io a look. It's the most popular JS engine out there.
Hey I've also recently picked up interest in this as well! I took a look at some html5 game engines out there and seems like Phaser is a pretty good start with good documentations and user base. Although I started out wanting to learn about html5, I ended up using javascript for it because it's basically what Phaser is about. But hey one upside is that it works on anything with a browser!
Shameless plug on here for my first browser game project I chose to recreate a tetris clone, with fully commented source on github right here. Tools i used were basically nothing more than just a text editor and the browser.
There's lots of ways to approach this! Reactor idle uses a HTML table of exactly the same size image squares to create the maps. Since the map doesn't graphically update very often, this works well for reactor idle. I'd guess he either binds drag and drop events or mouse enter, mouse leave, and click events to create the interaction he does.
If you want maps with lots of changing graphics and such, I would suggest something more advanced like a HTML5 game engine like Phaser. This is a full fledged hardware accelerated rendering option.
I wouldn't give up so easily on Haxe, but it is up to you.
If you really want to start with JavaScript maybe you want to look at the QICI engine:
http://www.gamefromscratch.com/post/2016/01/14/A-Closer-Look-at-the-QICI-Engine.aspx
https://youtu.be/cYo-eQSo55I
... or the underlying Phaser:
http://phaser.io/download
OTOH, Phaser lacks a lot of features, it's pretty unorthogonal in design, and its core is somehowbroken that a <em>paid</em> Box2D plugin does not work right, and the devs never acknowledged my post on the forums about it. So... I'd hate to recommend it.
I'd recommend you check out the tutorials on Phaser.io - start with the most basic boring looking ones! (like, "Shooting Bullets Tutorial") and then do one of their full examples (like "Wild West Shootout Tutorial") - the simpler the better. Once you understand the basics, the rest is ~~easy~~ possible!
Phaser is a javascript game framework/engine and has quite a large community behind it so you can ask questions when you get stuck!
You're right. Here's something I posted a few days ago (source):
> Don't get confused about the term "HTML5": when we say it, we mostly mean "all the new JavaScript functions that allow us to make awesome things like games". It's a bit more than that, but mostly the language(s) (HTML/CSS/JS) are the same, there's just a lot of new things.
> Check this page if you want to get a glimpse of all that's under the HTML5 label. Note though that I probably don't know 80% of what's in there - when making games, we often use tools built on top of HTML5, like game engines (e.g. Phaser), which while being labelled "HTML5 game engines" are just, in the end, JavaScript libraries.
Need help defining structure?
Use a framework or look at what structure other game frameworks have used:
http://phaser.io/
Nothing terribly wrong with your code. Consider using a dependency framework when the number of files grows large, such as require js.
Consider using different function definition syntax to avoid polluting global namespace:
http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname
I downloaded and read a copy, and for those curious it focuses on using the phaser framework for game development. It's very well written, and I think where it shines is that it goes into some of the theory of what makes games a pleasant experience for the user. It asks questions that really help you get to understand and refine your own game ideas, which I found very helpful.
As a js novice, I thought the code was easy to follow and the author explained it well. I did spot a few typos, but this guide is still in development so that's to be expected.
I'd highly recommend this to anyone looking at fxos game development. There are tons of recommended books/guides in it that are probably very good next steps for beginners (for general game design and learning javascript). At the very least, it helped me sort out my own ideas and made me consider some aspects of game design I hadn't thought of.
Currently using http://phaser.io/ alot. Personally I feel web technologies, that is HTML5/CSS/Javascript, are so versatile and flexible at the moment that It is the future. As for the performance concerns? See: Duelyst. Beautiful game, being developed in HTML5.
The best game engine using JS is Phaser 3
I did few games with it including hyper casual games, it's very good. Look on their tutorial pages, they have some hcg ^^
​
Also, few weeks ago, I created r/hyper_casual_games to talk between hyper casual game developers. Join us to share your progression.
phaser.io
see it in action here
http://phaser.io/examples/v3/view/renderer/custom-pipeline
see source code below demo
see another demo with code here
https://www.dynetisgames.com/2018/12/09/shaders-phaser-3/
I learned beginner JavaScript on codecademy. Its great just for the basics. Once you understand some of the basics about JavaScript variables, loops, functions, and objects, you could start learning Phaser through these official tutorials: http://phaser.io/tutorials/making-your-first-phaser-3-game
Phaser is a popular HTML5 game framework. http://phaser.io I believe they have tutorials on their site. You’ll still want to get up to speed on vanilla JS and HTML/CSS. You could go through the Codecademy JS course again or checkout FCC.
p5.js isn't really made for games, I'd suggest looking at a different library.
Try Phaser: http://phaser.io/, it's much better geared towards games as a library, p5.js is great for creative coding and visualisations, but it's not the best for rendering lots of sprites and keeping up a frame-rate, it also doesn't have a great deal of other features that help with games like support for states.
I've used both pretty extensively and I'm talking from experience here.
on MS Windows
you can go here --- https://cesanta.com/
download the pre-built binary
now make a folder and name it anything -- maybe phaser_projects
now put mongoose-free-6.5.exe in there
now unzip the folder that you downloaded from Ansimuz
take the warped-files folder and move it into the phaser_projects folder
now go to the phaser_projects folder and double click on mongoose-free-6.5.exe (that starts the web server)
it will treat the phaser_projects folder as the root folder of your web server
so it will show you all the sub folders including of course the warped-files folder
double click on the the warped-files folder
double click on the code folder
double click on the phaser folder
the game will run automatically because the phaser folder contains a file named index.html
this is one of the methods recommended by phaser on their web site -- http://phaser.io/tutorials/getting-started/part2
> where are defined to phaser look for the animations of the player.
in the code folder is a game.js --- that is the game code
and there is an assets folder that contains all the graphics and other folders that contain json folders that describe the animations
I had something like this at my last company. We had about 24 hours to come up with something. Using JavaScript with canvas and sockets, a team of 4 of us were able to get pretty much everything done from level loading, movement, 'tagging someone', sounds, and hit detection. Took about 12 hours total. Looking back it would've been helpful to use something like Phaser. But it was a cool learning experience and we got to show off us playing the game to the rest of the company in the end. Our goal was something like this. But a lot more simple.
I'm no Java guy so can't help you on that, but for JS I've mostly used Phaser Framework. I find it to be a good framework allowing a fast prototyping and rather easy to use. Plus it got a bunch of neat tools like physics, tweens, spritesheet animation & so on !
Awesome to hear your daughter is such a voracious learner, you sound like a great parent.
Is there a particular reason you want to use Vue? All the js game engines I'm aware of have baked in UI solutions that are tightly coupled with the core game loop. I can't find any tutorials that fit your criteria.
If her interest is more in game dev, Phaser is worth checking out. They have good documentation and a physical book your daughter can read through (if her computer access is limited but she still wants read up about phaser).
I find it fun to make my own games. JavaScript is a great language for this.
Check out Phaser. There's a bunch of tutorials. Try it out and see what you make. Then in December you can take part in Ludum Dare
If you are web developer you can start from using Phaser or something like Superpowers and when you finish prototype of basic gamplay you can move to unity.
What do you need it to do? The bare minimum for displaying tiles is pretty simple to achieve yourself.
If you do want to use ROT.js, it's usually not hard to do it piecemeal. Pull in only one part of it if you want.
I would also look at Phaser.
If you're serious about Phaser, I highly recommend Phaser Interphase, which contains a detailed account of the Phaser State Manager written by the author of the framework himself.
Theres a million game engines out there: here's a good site - PhaserJS is one such one.
There's also some other neat things you can do in the browser at Chrome Experiments
/u/xesenix mentioned that the upgrade all function takes a long time, and I think there are a few ways you can make it more efficient.
Right now the upgrade all takes O(n*log(n)*log(m)) time where n is the number of buildings and m is the amount of money your have. While you have money enough to upgrade, you do an upgrade and since upgrades are exponentially increasing in price that should execute an average of log(m) times (Depending on how people play, it might not actually be that, but as longs as we're consistent with that definition this idea will work). So for each of those log(m) times we find the tower with the cheapest upgrade. This involves going through each tower in the phaser.group class. Phaser claims their group class is a tree, which means that every call to the .getAt() function should take log(n) times. You do this for all n buildings, so the cheapest upgrade runs in n*log(n) time which gives us the overall result of n*log(n)*log(m).
There's a couple of options then to speed it up. the phaser.group object also comes with a .forEach() function. This should be able to run through the tree in O(n) time which would reduce the time the upgrade all takes to O(n*log(m)). This is the best case scenario.
If Phaser didn't implement the .forEach() correctly (these are js developers we're talking about), you can presort the towers into a standard js array, which can be done in n*log(n) time. Then while you still have enough money to upgrade and the next tower in the list has a higher upgrade cost than the current tower, upgrade the current tower. This will take n*log(m) time. Since presorting and upgrading are independent the final algorithm will run in O(n*log(n) + n*log(m)) time.
[](/nerdtwi) tl;dr: use the .forEach() function. If that doesn't work, presort.
It's a bit more hands-on than some of the other suggestions, and I'm only getting my feet wet with it right now, but I've been having a lot of fun with Phaser. It's reasonably simple to work with, but not as full-featured as some of the other suggestions.
I would suggest one of two possibilities for you. One path would be to focus on HTML5 games made with EaselJS or Phaser; you can leverage your existing web development experience.
The other path would be to learn Unity. For that, checkout my book Unity in Action. I wrote the book for people who already know how to program but are new to game development with Unity.
That's the nature of the infamous this
keyword in JavaScript.. Sometimes (especially in eventlisteners) its value can get lost, if you don't explicitly pass it along to the function..
Luckily in Phaser you can just pass the value of this
in the second parameter when you add an eventlistener for a signal (such as onInputUp).. [documentation]
So your line should be
this.button1.events.onInputUp.add(function (){this.changelevel("boat"); }, this);
and it should call the function with the correct value for this
..
Is this on github? It might easier for people to help you out that way. Also phaser is a pretty popular JavaScript game platform you might consider. Comes with tons of useful functions like object / mouse detection.
No, I meant to save it offline but never got around to it. I'll keep an eye on it and try to remember to do so if it comes back again. I've been using the Phaser Chains though a lot and find that to be very helpful. Perhaps better than the cheat sheet. http://phaser.io/learn/chains
I plan on releasing the code as an open source browser-based game engine for top down and isometric games. This project likely won't start until after the game is launched.
To get started with Phaser, I suggest sifting through the examples section. If you have something in mind you can imagine building, you can likely see if it's feasible or not by sifting through the examples. Phaser is also an extremely well documented framework with lots of tutorials and guides.
Actually build a racing game?
Seriously, if your into this stuff, and want to go above and beyond while having little poke at your teacher, then grab Phaser and knock something simple together.
Phaser's ace, really easy to hack on with lots of nice examples. Off the top of my head you could use this slippy-slidey racecar, and put together some states that flash up all the required images when starting and stopping your game. You wouldn't even need a track, just go for a drag racer and make the winning criteria a collision between your car and the boundaries of your game world.
I'm all for a bit of dicking around, but you need to twist these opportunities into something useful for you. Don't just hit the easy marks with a bit of humour, if your day job isn't pressuring you to perform then apply your own pressure!!
Have you had experience with game development before? If not, jumping straight into 3D might be a bit of a leap (definitely possible, though!)
However, perhaps it might be good to get your feet wet with game development with a language that you're familiar with (instead of doing 2 things at the same time i.e., learning a new language and learning to program a game). I'd suggest Phaser as a great cross-platform development framework that should get you up and running really quickly.
Otherwise, don't look any further than Unity if you want to do 3D.
Here's a great article by Chris Deleon on "Why I stopped teaching Unity first" It highlights many good points about why it may not be the best idea starting game development with Unity as a beginner.
Try writing it in javascript, then you can host it on the web. One nice thing about javascript is that the functions can be passed around as objects. This means that you can just take the code that a user enters in the browser and run it. Other languages have this feature as well but if its in javascript you can let others use it using only a we browser. Take a look at phaser or pixi to help you write the game.
Ahh, OK. Well, typically I only ever code in HTML5/JavaScript and use Canvas to display everything. I mean, it works, and it's able to be played on both mobile and desktop platforms. If you're at least at an intermediate skill level in JavaScript, you could probably use the aforementioned LibGDX (I have no experience with it yet), or one of the various libraries out there (I prefer Phaser) to handle a lot of the routine stuff.
I'd recommend Lua, or if you like Ruby, that should do the trick. Actually, if you want to get off the ground quickly and it's not performance heavy, go see what you can do with pygame. You could try Phaser if you want to do it in html5. I'd steer clear of lower level languages like C, even C++, and even engines like Unity... You'll spend more time trying to figure out how those work than actually getting your game worked on.
Unity has a new(ish?) html5 export option, listed as WebGL in the build manager. I had no issues with it during this past Ludum Dare, but from what I've seen the support is pretty hit-or-miss. If nothing else, it's worth keeping an eye on moving forward, given your experience.
As for something that uses HTML5 out of the box, your best bet is probably Phaser, it's a fairly popular HTML5/Javascript game engine. All of the texture loading and management is done through code, so it shouldn't be too hard to whip up something data driven to let your artist play around with swapping textures and adjusting animation timings. I personally haven't used it, but the people I've talked to that have generally have good things to say about it. At the very least it's worth looking into.
I am going to second maximyzer's choices for a visual editor to help you get started. It allows you test as you work and get some immediate gratification from creating something. Some of them allow you to do custom scripting should you feel inclined to go beyond the visual logic they present you with.
Another option that I think would be very easy to get into game programming is a library like PhaserJS. It is an HTML5 game library that uses Javascript. There is a lot of tutorials and documentation for this library and it also allows for pretty rapid development so you can get some pretty quick results. This is if you want to start with something that is not visual.
It almost sounds like you want a Flash type of thing for JS, in which case a HTML5 2D game engine might fit perfectly.
I would look at Phaser.io as it's really easy to pick up. It runs in any modern browser, and it's free.
Stuff like tweens are great, you basically tell a sprite to move or rotate or whatever, and it will keep doing it without you having to keep telling it to. It has all the easings and what nots.
The Cat's Meow
You play a tough cat in charge of ridding the streets of rabid dogs, sewer rats, pimp zombies, and more in this retro side-scrolling arcade shooter
I just started work on this game, but it's an idea I've been tossing around my head for a while. Most of the assets are currently open-source ones that I've picked and pieced together, but more original artwork will be needed as the game grows, and a multitude of pick-ups and weapons become implemented.
The entire project is created using Phaser and will be available to play across a multitude of devices.
JavaScript is your only choice for frontend. There are derivatives of this, like TypeScript or CoffeeScript, but they all just transpile to JavaScript and you should have a good understanding of what's happening in JavaScript before moving to one of these.
You might want to have a look at a HTML5 game engine, like Phaser.
Backend language doesn't really matter. Ruby is a backend. Ruby, Java, Python, Scala, C#, PHP, whatever. It can all pretty much do the same thing.
Thank you! I tried right now:
So I dare to agree, this looks like easy-to-start and code around dealing with sprites and physics looks comprehensive though I'm quite unfamiliar with any engines (of course I have basic understanding of core arithmetic and physics). I'll keep with it!
Thank you once more!
Thanks. It uses the Phaser HTML5 Game Framework.
The graphics are made using DPaint IV on an Amiga emulator.
The tilemaps are made in Tiled.
I just updated the map to use one-way tiles, instead of the horrible tree-branches you hit your head on.
I plan on doing a little bit here and there in my spare time.
I'll keep updating this online version to show my friend etc, so feel free to take a look from time to time.
For sound, I'll have to see what royalty-free sound effects and silly music is out there.
Seems like if you want to make flash games, you might also want to make games in general that run in a browser. In that case, I would recommend phaser, a free library for javascript designed to build games for your browser. There are some extensive tutorials on the website, and it's a great way to get started with one of the most popular programming languages out there.
If the water texture must be at the bottom, try using different blendmodes to get the effect you want. Between your sand and water layer put a gradient layer with a screen effect
it should have this effect you can also add gradient underwater sand texture and artificial caustics to the middle layer.
see also http://stackoverflow.com/questions/22434240/how-to-use-blending-in-phaserjs since i'm not very familiar with phaser
see also http://phaser.io/examples/v2/bitmapdata/alpha-mask which should allow you to put the water wherever you want
Flash is a 3rd party plugin that is poorly supported and hasn't been available on mobile for quite a few years. The reason why most web games are made in Flash, is because they are old or the developers already know how to build games there.
If you want to build web games in 2015, you should be using JavaScript and Canvas. There are a number of engines that can make this very easy. Such as: Phaser.io. But it's not the only one or do you necessarily need an engine.
If you have some experience of HTML and JS, yep you'll be pretty familiar with all the new stuff. Don't get confused about the term "HTML5": when we say it, we mostly mean "all the new JavaScript functions that allow us to make awesome things like games". It's a bit more than that, but mostly the language(s) (HTML/CSS/JS) are the same, there's just a lot of new things.
Check this page if you want to get a glimpse of all that's under the HTML5 label. Note though that I probably don't know 80% of what's in there - when making games, we often use tools built on top of HTML5, like game engines (e.g. Phaser), which while being labelled "HTML5 game engines" are just, in the end, JavaScript libraries.
If you already know HTML and Javascript, you should try Phaser. I've been wanting to find a good and lightweight library for prototyping games. I'm pretty familiar with most of the common ones: Unity, LibGDX, HaxeFlixel, etc. I honestly think Phaser is one of the best and fastest and well documented of the lot. You should give it a shot.
I've been looking into the Phaser JS engine. It's a confusing, still, (JS is the devil's language), but I'm impressed with their documentation and examples.
Hey! Phaser is really easy to get going with even if you have no had any experience with making games at all. There is a great community surrounding phaser and are always willing to answer questions on http://www.html5gamedevs.com/forum/14-phaser/. But to get started I would suggest looking at some tutorials by lessmilk by going to lessmilk.com. Another good resource is going to http://phaser.io/examples and seeing all the examples they have with the demo and the code right bellow, it has proven invaluable to my learning. The thing I haven't done, which you may be interested in, is having game objects move in realtime between players. I assume it is possible though, but haven't looked into it
If you want to apply your javascript knowledge specifically to make platformers, it sounds like Phaser will be right up your alley. Pick a tutorial for it you like, follow it through and start to pick up bits and pieces of how it works.
Finishing stuff is super important though, so it's worth considering making a game in something quick like Stencyl or GameMaker so you have a clear vision of the whole process and goal first.
Exactly. Game engines are really good these days. Even little open source ones (Phaser.io, I'm looking at you) are pretty darn awesome. A well supported game engine is simply a cleaned up, generalized version of the most boring 90% of the code making up a typical game. Unless the game engine is the innovation in your game (e.g. Portal), don't bother. Even if the game engine is the innovation, reuse as much as you can (e.g. 90% of Portal is HL2's Source engine).
Think of it like a carpenter buying lumber instead of chopping down trees. Unless how you chop the trees is interesting, pick up some standard lumber. And even if how you chop the tree is interesting (e.g. chainsaw sculpting), at least consider using off the shelf tools.
And some advice that was given to me that helped me make progress -- take every (legal and ethical) shortcut to make your first game as you can, and then build from there. If you've got grand ideas, awesome! Write them down to come back to in your second or third game.
I too like using javascript (or even better typescript).
The best thing about this, is that you can just throw it onto a webpage and show everybody and let them experiment with it.
No downloads. Instead direct results.
And if you want to make it interactive some game library like http://phaser.io and you can have tilemaps and stuff like that running pretty quickly.
It depends on what kind of game you are making. If it's really UI heavy and speed isn't a huge concern, Angular could be great. However, if you're making something with more action, animation, etc, I would recommend you check out a proper game framework like Phaser.
Phaser.js is an amazing library if you like the idea of making games in JavaScript. With other technologies like node WebKit you can publish to desktop and mobile. All for free. Excluding developer licences for the mobile platforms
Hi, I'm a young french developper, we are, with two frends developping a kind of isometric 2D roguelike. We actually use Phaser, do you think it's a really good library ? I'm curious about discovering others. We, indeed, develop on canvas 2D (js). Cordially
It took around a week, this includes the time of creating the mechanics, graphics, sound effects.
I made a similar game before, so I copied a lot of code from there. Mostly a simple HTML5 game takes around two weeks with a couple of hours work daily.
If you are interested in HTML5 game developement, then check out http://phaser.io
Hello! I have around 4 months of experience in game development. I started with HTML5 game developement using Phaser JavaScript Framework.
I have a very little experience in Android, but I don't really know how to port this game to touchscreen (I mean how to replace buttons and the space button).
I looked at a few HTML5 engines and settled on Phaser, which uses Pixi underneath actually.
I found it super easy to get started, but I didn't use node.js for my test though, instead I used PHP's built-in webserver to serve up an HTML page with some JS in it, worked great!
I realise that this is a personal taste thing, but I don't like the idea of shipping 40MB of node.js/webserver framework for tiny games, so I usually just go with LÖVE, seeing as it does 2D nicely, runs on most common OS's, and has a JS-ish/native Chrome version too.
Whatever you choose, good luck!
If web is your background stick with your strengths and try making javascript games. Phaser (http://phaser.io) is a great little engine with good documentation and APIs for multi touch.
Never too late to try something new, go for it!
that's awesome! the event system is a little bit different (because its javascript but not by much at all). i just wish there was more development behind gamejs but the api in pygame doesn't really change either. i use phaser now but every once in a while i go back to gamejs... just can't shake my python roots.
I'm surprised OP didn't mention this. There are numerous frameworks popping up (like Phaser, and Crafty), and Javascript, despite some complaints, is a pretty nice language. Not to mention cross-platform support.
Lessmilk is working on one HTML5/JS game per week using the Phaser framework; his blog is worth checking out!
You could also take a look at html5 game development. It's completely platform agnostic. There are a few game engines that are gaining momentum and are becoming very mature. Take a look at http://phaser.io/ It's the game engine I'm using and the developers are people that use the engine for their client work, so they fix bugs super quickly.
Sorry for my english!