HTML5 Docs - I need your input

[Gan]

I've been thinking of the docs, they are very unfriendly.

I think the best way would be to separate them into categories. Like Drawing, IO, ect... then alphabetize the commands.

[GMG Kurt]

or just add a search future, and remember I will be making a tutorial on how to use it, some time in the future.

[Gan]

I've been doing tests with multiple canvases, i.e. layers.

Here is what I've found out:
• Having multiple canvases breaks some of the event handlers. For example, the Mouse Move event handler died cause it was being blocked by the other canvas.
Solution: Put all canvases in a div called "holder", tie all event handlers to the div.
• I can dynamically create, remove, and re-order canvases using javascript
Uses: This means people will be able to make more layers in their game whenever they want.
• You can draw to a canvas, and then draw that canvas to another canvas. And draw that canvas to another canvas. I call this, canvasception.
Meaning: You can greatly enhance the speed of a game that has customizable characters. Imagine, your character has equipped a hat, a sword, a shield, and a mustache. To draw all those, you'd have to redraw them every frame like this: (1) Draw character (2) Draw Hat (3) Draw sword (4) Draw shield (5) Draw mustache. Redrawing the whole character every frame is sloooooooow. Therefore the solution is to create a new canvas. Except it's called an Off-Screen canvas. You draw the player to the Off-Screen canvas once. Then you can draw the Off-Screen canvas to the On-Screen canvas whenever you need to show the player. This greatly increases game speed!
• Canvases are transparent at first.
So: They are perfect for layers! Especially when you want to add dynamic lighting to a scene.

Pretty awesome, huh?

So here's a layer specification I'm mocking up:
You start with 1 canvas by default.
You can create a canvas by:

Code: [Select]

var myCanvas = CreateCanvas(SizeX, SizeY)

Or get the main canvas by:

Code: [Select]

var myCanvas = GetMainCanvas()

Creating a canvas doesn't automatically add it to the screen, to add a canvas do:

Code: [Select]

AddCanvas(myCanvas)

You can move canvases so one will be on top of the other by setting the Z-Index:

Code: [Select]

SetCanvasZIndex(myCanvas, 10)

You can take canvases off the screen by:

Code: [Select]

RemoveCanvas(myCanvas)

You can set the main canvas by:

Code: [Select]

SetMainCanvas(myCanvas)

You're probably wondering, why do I need to set a main canvas?
Well, when ever you do a draw command, it automatically draws it to the main canvas. If you want to draw to a different canvas, you have to set your other canvas as the main canvas.

How do you guys feel about this layer specification? Should I call them layers or canvases?
I'll start coding this in when I get some approval.

[Connors]

This sounds like a great plan to me! No need to change the names, keep calling them canvases. You should have a pre-defined variable called mainCanvas too so there is no need to declare "var myCanvas = GetMainCanvas()". It makes sense right?

Let me get this straight - On-screen canvases are always the size of the game screen. Off-screen canvases can be any size and you draw them onto the on-screen canvas like an image. On-screen canvases ALWAYS draw each time you change them. I'd assume they delete if you change their pointer, like any object.

So all I have left to add is: allow us to toggle on-screen canvases on or off.

[Gan]

This sounds like a great plan to me! No need to change the names, keep calling them canvases. You should have a pre-defined variable called mainCanvas too so there is no need to declare "var myCanvas = GetMainCanvas()". It makes sense right?

Function would be better. Cause I have to run some code when you set and get it.

Let me get this straight - On-screen canvases are always the size of the game screen. Off-screen canvases can be any size and you draw them onto the on-screen canvas like an image. On-screen canvases ALWAYS draw each time you change them. I'd assume they delete if you change their pointer, like any object.

Actually, you can make them any size, on or off screen. To make them default size, call CreateCanvas() without specifying size. Yeah, you can draw canvases like images.

So all I have left to add is: allow us to toggle on-screen canvases on or off.

Toggle? You mean make canvas on screen to off screen and vice versa?
Just do AddCanvas(myCanvas) and RemoveCanvas(myCanvas).

[Connors]

Toggle? You mean make canvas on screen to off screen and vice versa?
Just do AddCanvas(myCanvas) and RemoveCanvas(myCanvas).

Say you don't want to see an on-screen canvas at the moment, but you don't want to lose what was in it? You might have to just draw it to an off-screen canvas (to keep the image) and temporarily remove it. Unless you could turn it on and off.

[Gan]

Toggle? You mean make canvas on screen to off screen and vice versa?
Just do AddCanvas(myCanvas) and RemoveCanvas(myCanvas).

Say you don't want to see an on-screen canvas at the moment, but you don't want to lose what was in it? You might have to just draw it to an off-screen canvas (to keep the image) and temporarily remove it. Unless you could turn it on and off.

Removing doesn't destroy the canvas. It just removes it from the screen.
Here's an example:

Code: [Select]

var myCanvas = GetMainCanvas()
//Just got the main canvas
RemoveCanvas(myCanvas)
//The canvas is no longer on screen/visible but it still exists, you can still draw to it
AddCanvas(myCanvas)
//Canvas is back on screen, all good.

Prehaps I should make the commands more specific?
RemoveCanvasFromScreen(myCanvas)
AddCanvasToScreen(myCanvas)

[Connors]

Oh okay it makes perfect sense now. No need to change the name just make sure it's explained that well. Please don't make the names that long.
Example "KeyIsPressedByChar(char)" could have been "CharIsPressed(char)". Not that you should change it now, you could break people's code.

[Gan]

Layer functionality has been added! Plus I added a way to detect when a media loads.

Code: [Select]

AddCanvas(canvas)
Adds the canvas to the screen.

Code: [Select]

SetCanvasZIndex(canvas,Z)
Sets the Z index of the canvas. Can rearrange canvases so one can be in front of the other.

Code: [Select]

RemoveCanvas(canvas)
Removes the canvas from the screen.

Code: [Select]

SetMainCanvas(canvas)
Sets the drawing canvas. You'll draw to this canvas when you do a drawing command.

Code: [Select]

GetMainCanvas(canvas)
Gets the main canvas.

Extra commands!

Code: [Select]

SetMediaLoadMethod(method)
Use this method to set the media load method. Meaning, the method you specify will be called whenever a media is loaded.
Ex:
SetMediaLoadMethod("MyMethod")

Code: [Select]

GetLoadedMediaName()
This pairs with the SetMediaLoadMethod(). This method returns the name of the last loaded media.

Code: [Select]

SetFont(font)
Sets the font of the current active canvas. Ex:
SetFont("60pt Calibri")

Code: [Select]

SetLineWidth(w)
Sets the width of the line for the main canvas.

Code: [Select]

SetLineCap(w)
Sets the cap of the line for the main canvas.
Ex: SetLineCap("square")
SetLineCap("round")

Code: [Select]

HideCursor()
Makes the cursor invisible.

Code: [Select]

ShowCursor()
Makes the cursor visible.

Code: [Select]

LeftArrowKey()
Returns the key code associated with the Left Arrow Key.

Code: [Select]

RightArrowKey()
Returns the key code associated with the Right Arrow Key.

Code: [Select]

UpArrowKey()
Returns the key code associated with the Up Arrow Key.

Code: [Select]

DownArrowKey()
Returns the key code associated with the Down Arrow Key.

What do you think?

[GMG Kurt]

returns the code? I'm sorry but what? do you mean it runs the function?

ooohhh a font setter that looks pretty nifty and simple,

I can't wait to try these out awesome update Gan

[Gan]

returns the code? I'm sorry but what? do you mean it runs the function?

ooohhh a font setter that looks pretty nifty and simple,

I can't wait to try these out awesome update Gan

Key code is a number associated with a key on the keyboard. The arrow key functions just return the number associated with that arrow key.
So you can type:
KeyIsPressed(DownArrowKey())
Instead of:
KeyIsPressed(40)

It's just a convenience thing.

Glad you're excited.

[Connors]

So.... say that it returns the Key Code. be at least a little bit specific.

[Gan]

So.... say that it returns the Key Code. be at least a little bit specific.

I do state that it returns the Key Code..

Code: [Select]

DownArrowKey()
Returns the key code associated with the Down Arrow Key.

[Connors]

Wasn't paying attention sorry, I think I'm just tired I'll see you tomorrow. Afternoon. If I escape from the dentist alive that is. Apparently my wisdom teeth are coming in at a rather unfortunate angle. Or they aren't coming in so much as attacking the teeth next to them. (they're going to move sideways into other teeth unless I get surgery. Kinda weird.)

[Gan]

Ouch. Hope ya survive the surgery.
Remember, morphine and laughing gas are your friends. Though don't use your phone when under the influence.
Especially Facebook, that's a big no no.