Jump to content


Member Since 24 May 2013
Offline Last Active Mar 10 2014 05:00 PM

#5067610 2d Browser / Turn Based Pool game

Posted by shocobenn on 05 June 2013 - 06:51 AM

Hey ! If you just want to learn how to "do a HTML5 game" you have first to , obviously learn javascript basics and understand how the "html canvas element" works.


This is how canvas drawing works :


Imagine you're on Paint , or Gimp. You have a mouse/brush (You'll often see context or ctx) and you can say that this brush is a scare (else this is anything) and then fill it or only stroke it.


This how this looks :


ctx.fillStyle = "#000000" //Say your brush is white

ctx.fillRect(0, 0, 100, 150) //draw a rectangle at (0,0) , width 100 and height 150 


To draw an image


ctx.drawImage(image, positionx, positiony, width, height) // you need to load "image" before with Image javascript classe.


To draw an animation, you'll have to work with http://atomicrobotdesign.com/blog/web-development/how-to-use-sprite-sheets-with-html5-canvas/


Ok, this is the draw part http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/


Then you have to move all thoses objects. You need a loop, where you'll at each frame update your elements , look for the most used "requestAnimationFrame".


To finish, you have to work with maths, mainly in a pool game where you'll play with vectors.


Good luck, i would have suggested you a pong or something else more easy than a pool game for an html5 game.

#5067330 Light passing through multiple objects

Posted by shocobenn on 04 June 2013 - 05:57 AM

Hello ! For the house in the background if you are classicaly doing the illumination, you can't do it, because you calculate it with normals. You have to dissolve this light with the shadow. You should use shadow map with preference, because this is a little bit like "tracing a ray" but more easy : you do an depth from the light vue.


Else if you don't want to use shadows, you could just have to don't apply the light if the pixel is behind and not apply dark color on the pixel.


If you really want to "trace ray of light", you should use ray tracting, this is beautifull but require a lot of ressources and is more used in cinema etc...


But i'm wondering why you don't want shadow ? Is it for the inside of the houses?


If this is the case, you should model the insides separated of the outsides and draw the insides after the outsides , with and other shader where you won't apply the shadow. And more, if this is where you can control character, you'll be able to only draw the current inside you're visiting, and so OPTIMIZATION  \o/. If you separate the insides elements like tables, you can ever do random houses (Imagine a sims binding of Isaac)