m(vl)gl - miredo's very lazy game library Copyright (c) 2024 miredo, see mgl.js for details. --- SOME WARNINGS: The API is absolutely not stable right now. I will make an attempt to not break things, but only that, an attempt. Yes, this means if you want touch input support, you're in for a bad time if you start using this right now. I probably won't break too much since that would break the example, but I might decided to change how I do a new feature. As an example, drawRect probably won't change since that's very basic and fundamental, while makeGradient might, who knows. Yes, touch input is only going to be for vertically oriented devices since I make a separate window for touch input. I might add joystick input, who knows. This whole project is experiencing feature creep out the ass. Sorry that the docs suck, I just do this for fun, lul. Yes, the name blows chunks, who cares. --- About: This is my very lazy game library, designed so I can write small games for fun. Several things are done to enforce a specific look to the games, not that you can't get around that. It would just be more effort to do so. Quite a few things aren't here because you can do that yourself, mgl.gc is the graphics context. A bunch of stuff is in here because I wanted it to be, and that's that. Also, a bunch of stuff is hardcoded (like the screen resolution) because it's what I want. The "very lazy" is not a joke, I am dead serious, I am doing just what I want to get what I want, and maybe you might be similarly lazy to use this and fall in line lmao. This uses delta time, use mgl.dt to get the time since the last frame. The engine caps mgl.dt to 100, so that's a minimum of 10fps. It's probably easiest to divide that value by something when using it since it's in ms, not seconds (don't modify it directly lol). I really did not feel like using delta time, but my hand was forced. --- functions: * gameInit() you supply this function yourself, this gets called at the start of the game * gameTick() you supply this function yourself, this gets called every single frame (remember, delta time! mgl.dt is your friend, and mgl.dt/100 makes it convenient to multiply against movement speeds so everything stays framerate independent) * mgl.cls(col) clear the screen to a given CSS color (basically just mgl.drawRect(mgl.rect(0,0,320,240),col) * mgl.limit(n,min,max) returns min if nmax, and n if neither are true was gonna be an internal use only function, but it's just useful * mgl.rgbToColor(r,g,b) converts numeric rgb colors to a CSS color for use with every mgl.* function that expects a color * mgl.rect(x,y,w,h) returns an object containing {x,y,w,h} this object is totally generic so you can use them to store game object data maybe if you're making your own objects, just make sure they have x/y/w/h properties lol * mgl.drawRect(rect,col) rect is an object with {x,y,w,h}, like made by mgl.rect col is a string with a css color (eg, "#rrggbb" or "rgb(r g b)") * mgl.getKey(n) checks a given key to see if it's pressed, returns 0 if not, 1 if just pressed, and 2 if held since the last update key| number -------+------- enter| 0 z/a/q/1| 1 x/s/w/2| 2 c/d/e/3| 3 up| 4 down| 5 left| 6 right| 7 -------+------- * mgl.checkCol(rect1, rect2) returns true if rect1 and rect2 are colliding, false otherwise * mgl.beep(freq, ch) plays a square wave at the given frequency (440 is middle C) on a given channel (0/1/2) the beeps are short and fade out * mgl.toFreq(note) converts a note value in semitones (48 is middle C, 440hz) to hz fo use with mgl.beep() at some point I might add some kind of simple music sequencing thing like QBasic has, who knows, this just makes it easier to make things sound melodic right now * mgl.drawText(x,y,str, col) draws text in 16px monospaced font in a given color the font used is just "monospace" so be careful you can change the font globally via the graphics context * mgl.drawTextG(x,y,str, col, scale) draws text in an opaque 8x8 font, defaulting to 2x scale (16x16) the actual font used is an embedded 8x8 pixel font that only supports uppercase and a VERY short list of special characters this is the entire list: <>:+-=.!?, the font is ugly as of this writing but that's fine you should probably use the case you'd expect to show up because I might be bothered to do upper and lower case at some point the color is drawn on top with a multiply blend mode, so if you do change the blend mode before drawing, you probably want to set the color to white so nothing happens there it also supports \n in text, unlike mgl.drawText --- variables: * mgl.dt gives you the time between this frame and the last, multiply your movement speed and things like that by this value so they move at the same speed across browsers/refresh rates and don't count frames, use a running counter of mgl.dt values for timers (eg, timer+=mgl.dt, do something when timer > 300 -- the unit is milliseconds) * mgl.gc the 2d graphics context for the canvas, you can change the blend mode and that kind of thing from here, or draw anything I don't have a function for with this * mgl.ac the audio context used to make beeps with --- how to embed: put somewhere, your game code after that (eg, ) place
wherever on the page you want the game window to show up it'll add buttons to the page for sound/zoom too --- relevant docs I needed when working on this: https://developer.mozilla.org/en-US/docs/Web/API/Performance/now https://developer.mozilla.org/en-US/docs/Web/API/OscillatorNode https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame https://stackoverflow.com/questions/42740839/html5-canvas-blendmode https://developer.mozilla.org/en-US/docs/Web/API/AudioParam/setValueCurveAtTime https://developer.mozilla.org/en-US/docs/Web/API/Touch_events