How do I get into the cool, hip world of HTML5 game programming?
I know HTML and Javascript, but I don't know much about working that into an HTML5 game; and apparently CSS (Which I've forgotten how to use) can replace a lot of the usage of Javascript for HTML5.
>>54317871
You must first read your SICP and develop an OS written entirely in HTML/CSS.
>>54317871
Most HTML5 game programming is probably just about writing pixel data to a canvas.
>>54317871
Read SICP and install Gentoo
You may then begin programming using your IBM model M
>>54317917
I'm thinking of doing it in polygons, it'll probably be faster.
>>54317946
>I'm thinking of doing it in polygons, it'll probably be faster.
In that case, you'll be using WebGL, and yes, it it is likely to be much faster than regular canvas blit operations if hardware acceleration is available.
>>54317988
I have no idea what WebGL is, and isn't it unnecessary if there's HTML5 to render polygons and Javascript to control everything else?
>>54318002
How are you planning to render polygons with HTML5?
>>54318022
I just assumed it could.
If I get Javascript to draw a polygon on an HTML5 canvas (I think canvases and stuff is how it works?) then will that polygon be rendered in WebGL?
>>54318048
It depends on how you do it. Javascript/HTML5 can render either WebGL polygons, or you can use a software renderer. Probably the simplest way would be a software renderer.
Whether it's worth it to set up WebGL depends on how many polygons your game will display per frame.
>>54318331
What do you mean by software renderer?
>>54318384
I'm referring to any means of drawing to the screen that is not hardware accelerated.
If you use the built-in canvas rendering functions, and draw a circle like this:ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
Then it will probably not be hardware-accelerated, and so it will be a lot slower than it would be if you used GL.
>>54318424
Ah, so WebGL can use the graphics card?
How hard would it be to set up, and do I still use the canvas and everything?
>>54318458
Yes, exactly, WebGL uses the graphics card.
I'm not very familiar with WebGL, so I'm not sure if it uses the canvas. I'm sure there are a million tutorials for it out there.
For the most part, it's probably just like a variant of regular OpenGL, which will take some work to learn. You'll have to understand vertex buffers, and vertex and fragment shaders, and how they work if you want to really understand what you're doing.
If you're just drawing a few sprites to the screen (<100, let's say,) then WebGL might be overkill (even though it would result in superior performance.)
You might want to prototype just using the HTML5 canvas drawing functions, and if you run into performance problems, then you can figure out how to render it in WebGL. For a fairly simple game, WebGL will be overkill, probably, and a lot of work to set up and understand.
Incidentally, I'm not sure what you have in mind for your game's art, but drawing images to the canvas will likely be a *lot* faster than actually using the built-in polygon functions.
>>54318517
Images would be faster than polygons?
That surprises me, I assumed it would be the other way around.
>>54318548
Well, I'm not sure. You should probably profile it.
Why are IDs even gone?
How can I give a limited framerate to an HTML5+Javascript game?
I'm able to draw stuff now, but not animate it.
Also, I have a feeling this isn't how I should be including a script in here, but unless I put the script after the canvas creation it would give an error.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Engine test</title>
</head>
<body>
<canvas id="canvas" width="500" height="500">
Your browser does not support HTML5!
</canvas>
<script type="text/javascript">
var context = document.getElementById('canvas').getContext("2d");
for(i=0;i<1000;i++){
context.fillRect(i, 40, 100, 100);
}
</script>
</body>
</html>
>>54317871
>create vidya in unity
>port to js
>profit
>>54320133
you animate with setTimeout, setInterval, and requestAnimationFrame(insertFunctionHere())
>>54320528
Hmm, not exactly clear on how any of those are meant to be used.
>>54320596setInterval(function, interval_in_ms);
e.g.setInterval(function(){
character_position_horizontal++;
}, 500);function move_character(){
character_position_horizontal++;
}
setInterval(move_character(), 500);
>>54320133
oh and if you are drawing to canvas then you will have to clear the canvas each time you draw to it...otherwise you will just be drawing shit on top of each other:var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
all this shit takes awhile to get into. and vidya can take a long as fuck time to do even if you know what you are doing.
>>54320802
this might help if you are further confused:var canvas = document.createElement("canvas");
canvas.id = "canvas";
canvas.style.position = "fixed";
canvas.style.left = 0;
canvas.style.top = 0;
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
canvas.style.zIndex = 11;
canvas.style.backgroundColor = "#000";
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
>>54320713
I didn't mean in terms of arguments, I meant in terms of how it should best work with the rest of the code.
>>54320802
Javascript can't just clear everything?
Java can with the libraries I'm being taught with, though maybe that's not efficient.
If I have a background, it might be easiest to draw that first then everything on top, with no clearing.
>>54320844
>I didn't mean in terms of arguments, I meant in terms of how it should best work with the rest of the code.
you mean like this?:<canvas id="canvas" width="500" height="500">
Your browser does not support HTML5!
</canvas>
<script>
setInterval(function(){
context.fillRect(i, 40, 100, 100);
}, 500);
</script>
>Java can with the libraries I'm being taught with
This assumes that you are not using any libraries. If you want, you can use something like phaser.io or any other number of .js libraries out there.
Yes, if you have a still background image, then just set your background to that (like a wallpaper). No need to refresh it or anything as it will just be a static image in the background. You would have to change the opacity of your canvas though:canvas.style.backgroundColor = "rgba(0,0,0,0)"; // where rgba(0,0,255,0.5) would give a blue canvas that is half transparent
a zIndex should be unnecessary in this instance if you only have the background and canvas
