Advice on specific Web Based 3D Game Development - javascript

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.

Related

How to create a dynamic graph for websites?

Hello,
I'm relatively new to the programming world and I was wondering how I would go about creating the following for a website I'm designing. I will use a random example as to not give my application away, but the process should be the same. I apologize ahead of time for the unrealistic values:
Say a civil engineer wants to come onto my website and figure out the mechanical stress at certain points on the Eiffel tower, lets say on the corner of the first/second observation deck (see Image). To make this more general, they want to vary values such as the height and base width of the tower to see how that affects the mechanical stress at those points.
Now, I can make the algorithm for calculating those stress values. My question is, how would a programmer go about creating this dynamic figure, such that the 'stress values' are shown on the image at distinct locations, and they change based off of the values of the user inputs + algorithm? My thoughts are the following:
Use HTML/CSS to place the images and design the webpage
Use JavaScript to take inputs, run the algorithm and calculate outputs. This would also make the dynamic changes on the image.
I have zero experience with JavaScript (I'm okay with HTML/CSS as I have built my own website before). I guess I'm hoping to be pointed in the right direction before I go off and start learning the wrong language for this application.
Bonus Challenge
While they're doing this, it would be nice to see a visual representation of the Eiffel tower change when the height and base area are changed. ie if you make the base way wider and the height much shorter, the bending in the midsection is going to be much more apparent. Obviously, this means I wouldn't be using a picture, but actually a vector-image model of the Eiffel tower that would change based off of the inputs. So what language and what libraries would one use to go about making this sort of things?
Thank you to anyone that can provide some insight on my issue. I really appreciate it!
Mike
Hello to integrate dynamic graph in a webpage there are two ways;
First you need to make your own graph library. For that you need to know SVG well to make a good looking graph.
Second, you can use any existing library. There are lot of open source libraries are there some of them are free to use also. To integrate graph using those libraries is not much difficult.
Some examples of graph generating library morris chart, c3.js etc. Google search 'll give you more detail idea.
As you said you have no idea about javascript so it will be a bit difficult at first for integrating graph. But 'll definitely much more easy to make your own graph library.

Physics for a organization scheme

I've been trying to create something (much more basic) as in the video linked below:
http://blog.theclinic.eu/?p=653 (Should start at 14:30 ish)
It's a talk by John Maeda & he demonstrates his application called Powershop. I've been trying to recreate something that had the same effect, but I can't figure out how I could make the circles stay at a distance like that without collision, any suggestions on how to approach it?
I've tried to make the constraints have a min & max distance so that they'd follow around, I tried to let circles orbit, but none seems to look like his.
I'm trying this with javascript/ HTML5, but I would just like some tips or suggestions on the approach! (My physics/math knowledge is limited, so I might be missing out on some obvious concept to apply?)
Thanks in advance!
If you are looking for a nice canned solution, instead of building everything from the ground up, I suggest you look at Box2D.
The system you see in the Powershop graphics is a simple physical model where each "ball" or "node" or whathaveyou is a charged object that repels all the other balls/nodes. If you model the system as a collection of points connected by freely-rotating lines, all you have to do is understand a little physics to get this effect working with Box2D. Namely, like charges repel.
It should be that easy. You will constrain a set of points so that each has to stay within a length L from a center, and this will be your model of the arms all the balls rotate on. Then you will give each point the exact same charge and they will repel each other and spread out evenly with nice bouncy effects.
(The part where you get creative is how you want to add a whole new collection of points, like when the speaker in your Powershop talk clicks on a node.)

Temple Run Breakdown

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.

HTML5 Motion detection, grabbing and scrolling

I have followed a couple of tutorials (http://www.adobe.com/devnet/html5/articles/javascript-motion-detection.html, http://www.html5rocks.com/en/tutorials/canvas/notearsgame/) and spliced the two together to create a game (https://github.com/gazzwi86/HTML5-Motion-Detection). While I have a few things to work out with the blending to improve the quality of the detection, I was wondering how I would go about detecting grabbing and swipe gestures, say for navigating a web page.
Could you point me in the direction of some examples or outline the principles so that I may try it myself.
I wouldn't go for it. It would require huge processing on client side to be quite good detection.
You can simply track moving objects(like hand) with some threshold(you can simply blur to get rid of noise). The background of user mostly will stay the same, so you can ignore it too.
Then convert image to black and white and try to have your moving object as one polygon.
What I would go to experiment after - set up a little neural network and train it myself by moving my hand.
Well that's just my 2 cents on how I would try to implement it. It would be really nice to hear from you later how did you do that and what the results are :)

Do you draw the entire object?

Hi I'm working on learning 3d game development and I'm starting with JavaScript and the html5 canvas and I was wondering if I were to have a 3d model do I draw the entire model(front, back, etc) and let the web browser decide what to render or should I try to just draw the sides that are in view of the camera? I ask this because I can see how it would be faster to do the latter of the 2 but that can get very complex and I'll need to do quite a bit more research to find how to do that.
Thanks!!
It's up to you, but it depends at least in part whether it's more expensive to spend the time clipping the model or just to render the entire thing dumbly.
Modern GPUs are pretty fast at drawing tons of geometry, so you often won't optimize the geometry sent to the card. However, it sounds like you're using the 2D canvas and writing your own rasterizer, so it may well be faster for you to do some quick optimization. Profiling and experimenting will turn up the right answer for your particular project.
If you're just learning I wouldn't worry overly about performance at this point but instead making sure you get the fundamental ideas and math down.

Categories