This question is about understanding how a game like temple run might be implemented in HTML with/without using the canvas. I have a vague idea about how swipeLeft, swipeRight
etc. might be implemented. But I am not able to gauge how the environments might be developed.
I am not asking for any help with the code here .I just want to have your opinions about implementing the environment. Is it just one huge sprite? If so, how will the user see random environments in the game each time he spawns?
It is not a single sprite. Assuming we're talking about the same Temple Run, it's a 3D game, probably using OpenGL. The fog effect means the game doesn't have to render objects in the distance. If you want to make a similar game, I suggest you look at one of the fine 3D game platforms available for Android and/or iOS.
You can do 3D games in HTML, and there are libraries that help, but unless you're making a website and not a mobile app, then it's better to do it native.
Related
I'm relatively new to HTML and Javascript, but I'm knee deep in the Udacity interactive 3D course and have gotten my hands dirty with some three.js + WebGL. And I've been able to make and somewhat understand this:
http://goo.gl/UPWKKL
So far.(having a hard time understanding the API and getting cannon.js and really any interesting mechanics to work, any advice for learning APIs like threejs?)
I was wondering if anyone could provide any input for someone whose end goal is to make a game that is somewhat like a demi-version of: REZ, Exteel, Armored Core or Zone of The Enders versus mode.
My goal is implementing: rail shooting(w/ cannon.js?), health bars, NPC boss battles with different stages, animated movements, a cross-hair, level bounds, concepts of upgrades to a character.
To be really specific, a 5 level game with PointerLockControl + shooting interface, where each level pass requires bringing a boss' health bar down to zero. The enemy would have a vulnerable mesh area where if bullet objects hit it, it'd trigger a collision event where its health decreased. If health<= 25 it speeds up and becomes harder to kill. After its death the screen blacks out and restarts with a new boss and so on. I'd want to put in victory screens, failure screens and if possible, cut scenes where I guess I'd disable user control and enable some kind of path cinematic camera. And preferrably for this to all be in the browser like Quake, BUT if something like this isn't possible, I'd try something else.
Sorry if this question is too broad or weird, I want to work on video games for a living, I will appreciate any feedback I get, I just want to know if someone more experienced can look at what kind of game I want to make and recommend some up to date material or helpful sites.
Currently I'm working with webGL and threejs, I've looked into Unity3D but I can't develop that on my Linux machine. Far FARR down the line I'd like make full blown games in C++.
Design as specifically as possible, because then you will have lots of small tasks whose role in the greater whole is known. Then if you don't know what to do on any given day, just look at your design, your map, and pick a piece that you can do that day.
Sorry if this answer is not specific to WebGL but you have asked broadly.
I have background on Canvas 2D context, but i want to perform a 3D animation like this one, is Three.js library the best choice to do such animation? Can you point me to some useful tutorial or documentation that may help. Thanx in advance.
That's one of the most common choices.
As WebGL enables OpenGL without the need for libraries, you might also do it with just Vanilla JS but that would be harder as WebGL doens't offer much more refinement over the raw and crude OpenGL.
Apart three.js, you could also try GLGE or PhiloGL but as Three.js is the most popular I would recommend to go for it if you have no specific requirement.
Looks like the demo you linked to is using a canvas library called Clay.js. Not one that I've personally heard about until now. For 3d in canvas the most popular one I know of it Three.js as you already mentioned. It has the benefit of supporting webGL as well (browser based openGL variant).
Three.js has limited documentation and some examples but outside of some books you may buy there isn't a lot of hand holding. You basically need to dive in and start coding. Here are some online resources that may help you get started (not necessarily all focused on THREE.js):
http://aerotwist.com/tutorials/getting-started-with-three-js/
http://learningthreejs.com/
http://learningwebgl.com/blog/
To make it easier to work with THREE.js Jérôme Etienne created a project called tQuery which you can think of kinda like jQuery. A wrapper to make it easier to get your hands dirty. Here's a video where he shows how to create a webGL game in 10 minutes.
I'm looking for a simple JavaScript library or framework to create interactive 2D animations in the browser. (Excuse the buzzword in the title, but I'm not set on any particular rendering technology like Canvas or SVG.)
This should make it simple to draw and animate arbitrary (though not very sophisticated) shapes on a canvas screen and allow users to select and move these shapes as objects (kind of like a very basic RTS game engine).
Ideally, the following features should be supported (directly or indirectly; I'd implement it myself if necessary):
panning
zooming
fisheye partial zooming
box selection (selecting multiple objects by drawing a box around them)
Not being familiar with such things yet, I find it tricky to research what's out there (e.g. regarding search terms). Also, I have no illusions about some magical package that doesn't require any effort on my part - indeed, I'd prefer simple and readable libraries so I can learn about the basics by reading the source.
If you like simple libraries, perhaps take a look at GameJS. It claims to be "a thin library on top of the HTML5 canvas element." It's a port of PyGame to JavaScript, which in my experience is a fairly nice abstraction layer that at the same time doesn't overdo it.
If that doesn't cut it, have a look at this list of JS game (and animation) engines.
You probably did make a search and found dozens of js game engines. I will just narrow it down for you. It is impossible to just spit out one single js game engine. Also, you might find some to be more appropriate than others based on the type of game you want to make. So here they are
LimeJS
Impact
Crafty
I am trying to build a card game in Javascript. Currently I am using Raphael to draw my graphics, but I'm bad at math, like really bad. I'm wondering if there is a library or framework out there that would allow me to build a card game in Javascript without having to manually figure out the x and y coordinates of every object I want to draw.
You could look into a Javascript Game Engine, depending on your exact requirements you should find one for you.
Usually a game engine include facilities to manage sprites, layers, and scene; handle events; easy animations; redrawing regions, detecting collisions, etc.
Render Engine is an open source game engine that seems pretty good.
Many more are available under a commercial license.
A list of both open source and commercial game engines is available here, with brief descriptions to allow you to quickly find your way (discarding the not-yet-mature engines and choosing based on features or focus).
http://chrome.angrybirds.com/
The browser based app is said to be done using Canvas 2D or Web GL.
I tried to view source using chrome by using "Inspect Element" button, but my chrome crashes each time.
I am just trying to find out how one can begin to develop such awesome games. Looking for pointers to online resources,books, and specific tips for beginners.
If you want a book, Foundation HTML5 Canvas: For Games and Entertainment just came out. It is fairly basic but will be useful to you if you are completely new to JavaScript and Canvas.
A faster-paced introduction would be the Mozilla Canvas tutorial, which is very clear.
To get a grasp on going from drawing things to being able to interact with them, I'd suggest my own tutorials on the matter, here.
For a general book on Javascript (regardless of your prior experience), it is probably worth reading Javascript: The Good Parts
As for general advice, I give you the words of Ira Glass:
Nobody tells this to people who are
beginners, I wish someone told me. All
of us who do creative work, we get
into it because we have good taste.
But there is this gap. For the first
couple years you make stuff, it’s just
not that good. It’s trying to be good,
it has potential, but it’s not. But
your taste, the thing that got you
into the game, is still killer. And
your taste is why your work
disappoints you. A lot of people never
get past this phase, they quit. Most
people I know who do interesting,
creative work went through years of
this. We know our work doesn’t have
this special thing that we want it to
have. We all go through this. And if
you are just starting out or you are
still in this phase, you gotta know
its normal and the most important
thing you can do is do a lot of work.
Put yourself on a deadline so that
every week you will finish one story.
It is only by going through a volume
of work that you will close that gap,
and your work will be as good as your
ambitions. And I took longer to figure
out how to do this than anyone I’ve
ever met. It’s gonna take awhile. It’s
normal to take awhile. You’ve just
gotta fight your way through.
When you "view source" (as opposed to using "Inspect Element"), the first meta tag says
name="gwt:property" content="html.renderer=webgl"
So I would conclude that WebGL is indeed being used. (WebGL in fact uses the canvas element, so the answer is technically "Canvas and Web GL" rather than "Canvas or Web GL". But I'm guessing it doesn't use the javascript canvas 2D API.)
When I use Ctrl+Shift+I and click 'Elements', the DOM tree shows that the <div> whose id is "forplay-root" has a child <canvas> element. But I don't know how to verify if it is being used for WebGL or more conventional canvas 2D calls.
A very nice site for learning WebGL is Learning WebGL. In particular, take a look at The Lessons.
I don't know why the page crashes your Chrome page. Are you using a brand-new version of Chrome? The release version didn't support WebGL till fairly recently. (But that wouldn't explain the crash... you just wouldn't see the action.) You may need to submit a bug report for Chrome.
The Angry Birds port was done using the GWT ForPlay library http://code.google.com/p/forplay/
The fancy thing about it is that you can write your game in Java and compile it for Android, WebGL and Flash from the same source. Which is pretty awesome. Check out the Google I/O 2011 presentation on ForPlay for more details http://www.youtube.com/watch?v=F_sbusEUz5w
For a game like that, I would start looking at how to have the same physics, so Box2D is the best starting point.
http://box2d.org/
There are various javascript ports to look at.
The port might be done using the popular libgdx cross-platform library. Its coded in java, but allows you to debug and play the game in your desktop. You basically write the code once in a core-project and it gets linked to four other projects-dektop, Html5, android and iOS. The Html5 version is done with the help of gwt, while the iOS one is done with robovm. You can have a look at it here: libgdx.badlogicgames.com.