Post screenshots of stuff you're working on!

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Post screenshots of stuff you're working on!

Clavius: Oct 21, 2007; Howdy!

Link to the Past engine in HTML Canvas. Hooray!

It's pretty beastly. Currently has proper collisions, diagonal tiles, speed changes, dashing, water, ice, bridges you can walk under or over, a z-index for tiles so things are on different 'floors', jumping from ledges, ladders and a whole bunch of neat little touches. I'm currently working on getting objects like rocks and signs and chests working.

I haven't put in any landscape graphics just yet, what's there is a kind of debug drawing mode that shows the behaviour of each tile. Walkable is grey (or blue for water), non-walkable is yellow, bridges are green, things higher on the z-index are lighter.

Version 0.25 in progress

# ¿ Jun 30, 2011 17:24

Adbot: ADBOT LOVES YOU

# ¿ Apr 25, 2024 15:24

Clavius: Oct 21, 2007; Howdy!

NOG posted:

This is pretty amazing so far. Good for a personal project, but I would change the character, story and graphics a bit into a new game instead of releasing a Zelda because Nintendo is known to go after sites like this.

Also, I know this is a really early version, but if this helps out at all, when I went up over the vertical bridge, and tried to go back down it wouldn't let me. I fell off the ledge and went back up the stairs and across the bridge and back the other way to test it again, and it worked. So it looks like there's some kind of bug going on there.

It's just got Link on it because that's the kind of thing I was going for for an engine. I might make a game out of it later or something and would make my own thing though, I know what nintendo can be like.

I'm trying to replicate that bug with the bridge and can't seem to get it to happen. There's a bug when you're in water or on ice I'll be fixing shortly that can stop you moving for a while, but I can't seem to get anything else to break there. If you can replicate it and tell me the conditions that would be awesome.

quote:

That's fantastic!
I've been trying to get into engines like this since I started programming, but there really aren't any good tutorials or resources (that I've found, anyway). If you ever feel like writing a tutorial or releasing the source, I would be forever in your debt

It's just javascript with html canvas elements, check out the source of the page. I've commented as much as I can for my own sanity. It is by no stretch of the imagination the cleanest thing I've ever written though, so don't get too excited. There's a lot of lines like this:

if (ls[grid_down][x][br_n1]!='1'&&ls[c_grid_down][x][br_n3]<=ls[grid_down][x][br_n3]) { jumpmatch = false; }

Where ls is the landscape array, grid down is the lowest y coordinate of your projected location when pressing the down key, x is the current x co-ordinate looping from the left-most coordinate of your current location to the right most. Doing it in a loop like that allows collision boundaries of any size against a grid with tiles of any size.

The landscape array is structured like this:
+- Y coordinate
+-+- X coordinate
+-+-+- Landscape tile behaviour (walkable, non-walkable, diagonal top left, etc)
+-+-+- Landscape tile attribute (ice, water, shallow water, ladder, etc)
+-+-+- Landscape tile z-index

br_n1 is checking the bridge layer co-ordinate for its behaviour. 1 is non-walkable.

So. At this point we are pushing down, checking the row of projected co-ordinates below for non-walkable tiles. That's the first part.

Now. c_grid_down is the lowest y co-ordinate of your current location. x is the same x co-ordinate as previously explained. br_n3 is that bridge layer co-ordinates z-index. If that is lower or equal to the z-index of the projected co-ordinate, then cancel the jump_match trigger. This is just for jumping off bridges, and there's a few more checks attached to it too. If it goes through it triggers the frame countdown to set off a jump calculation and subsequent animation/movement. If it fails the countdown is reset.

It has four different ones for each direction, and that's a tiny tiny part of the whole thing. It's loving enormous.

I hope that made sense, because it barely did to me typing it.

E: Don't know why I dumped one of the more complicated things about it here, the basics aren't that scary. I was going to write up a blog post about it at some point.

Clavius fucked around with this message at 19:25 on Jun 30, 2011

# ¿ Jun 30, 2011 19:13

Clavius: Oct 21, 2007; Howdy!

Built myself a music reference tool that can show any scale, arpeggio, chord, or chord progression, in any key, on a fretboard, keyboard or musical staff.

Built using a shitload of javascript. It's cool as gently caress and uses only pure music theory maths to build everything. It's all based off the cicrcle of fifths and key signature pattern deviations to work everything out.

# ¿ Feb 15, 2012 11:56

Clavius: Oct 21, 2007; Howdy!

Jewel posted:

I love you forever. This is super clean and super nice.

Edit: I wonder if in the future you could attempt to set up some form of system that plays separate piano together to achieve the sound of the chord currently on the screen. It'd only need as many sound files as there are notes, ie not many. Then again there's guitar too, plus coding it might be a bit difficult. But seriously, if you added that it'd be the actual best site on the internet in regard to these kinds of tools.

That's my next plan if I see interest in the thing. It's not something I'd personally need so it's not there yet, but it's doable. HTML5 audio tags can handle all that no problems, guitar and all. I'd need to make some adjustments to my note object handling to support octaves but I've built it in such a way that it wouldn't be huge.

From there it's not a far cry to a full on staff sequencer actually... Hmm.

# ¿ Feb 15, 2012 13:48

Clavius: Oct 21, 2007; Howdy!

ynohtna posted:

Great stuff!

On top of the other feature requests, how about the functionality to "capture" a diagram (either the generation parameters or rendering it to a canvas image), and then have a page tiling all your captured chords/scales/etc.

That'd make this an uber tool for bands, teachers and students who have a need to print out lead sheets, scale/chord/key references, etc.

Also, RESTful URLs for easy sharing, please. (i.e. http://musicvocab.com/kb/scale/c/major/1)

Pretty cool idea. Could be done, I'll have a think about an interface for it. The URLs do have a preset thing going, eg: http://musicvocab.com/notation/bflat/persian/scale/ but it's mostly for SEO and not really set up for sharing. If I go ahead and make instanced diagrams it'll probably need something a bit more compact to share a full setup anyway. Definitely a good plan though.

# ¿ Feb 15, 2012 15:04

Clavius: Oct 21, 2007; Howdy!

ufarn posted:

Do you know about VexFlow?

Did not know about that, nifty stuff.

Modern Pragmatist posted:

Shouldn't the notes change when I toggle from Treble to Bass Clef when viewing via notation? Either the text describing the notes or the position of the notes on the staff should change, right?

Missed that when I redid that part recently, fixed now, thanks.

The lines above and below the staff aren't perfect now though, the check is a bit on the simplistic side and only knows how to put lines on properly with the treble clef variations. Have to rethink that a bit.

# ¿ Feb 15, 2012 16:37

Clavius: Oct 21, 2007; Howdy!

ShoulderDaemon posted:

In the notation mode, the bass clef and alto clef just seem to be completely broken. Right now if you ask for a C major chord in bass clef it gives you G-B-D, and in alto clef it gives you E-G-B. Oddly enough, key signatures in those clefs seem to be correct, so I'm not sure why the actual notes are moving to the wrong places. It's particularly obvious in scale mode, like Cmaj scale in key of Gmaj, where you can see that the natural accidental lines up with the sharp in the key signature in treble clef, but doesn't line up in alto or bass clefs.

Haha oh poo poo you're right, I sent my clef offsets in the wrong direction, i'll fix it in the morning.

# ¿ Feb 15, 2012 22:27

Clavius: Oct 21, 2007; Howdy!

Playing with canvas again. :getin:

Hand coded everything just for fun. It's hardly an efficient way of doing 3d stuff but it's pretty cool. For example, the 3d rotation is calculated like this:

code:

	function translate3d(p) {
		var x2 = p.x*Math.sin(this.rotation.z)-p.y*Math.cos(this.rotation.z);
		var y2 = p.x*Math.cos(this.rotation.z)+p.y*Math.sin(this.rotation.z);
		var x3 = x2*Math.sin(this.rotation.y)-p.z*Math.cos(this.rotation.y);
		var z2 = x2*Math.cos(this.rotation.y)+p.z*Math.sin(this.rotation.y);
		var y3 = y2*Math.sin(this.rotation.x)-z2*Math.cos(this.rotation.x);
		var z3 = y2*Math.cos(this.rotation.x)+z2*Math.sin(this.rotation.x);
		var x = x3/(2+z3/2)*0.85;
		var y = y3/(2+z3/2)*0.85;
		return {x:x,y:y,z:z3};
	}

Where p is the x y and z co-ordinates of a point. The z3 is stored to re-arrange an array of faces based on z value for the drawing order.

The poly itself is stored as a series of 3d co-ordinates based on the golden ratio, it's loving hideous. Eg, one of the faces:

code:

		var phi = ((Math.sqrt(5)+1)*0.5);
		out.face(0,[
			{x:s+ox,y:s+oy,z:s+oz},
			{x:phi+ox,y:0+oy,z:(s/phi)+oz},
			{x:s+ox,y:-s+oy,z:s+oz},
			{x:0+ox,y:(-s/phi)+oy,z:phi+oz},
			{x:0+ox,y:(s/phi)+oy,z:phi+oz},
			{x:s+ox,y:s+oy,z:s+oz}
		]);

S is the size, ox, oy and oz are offsets, etc.
It's a pretty versatile little setup, i've set it up with cubes and stuff. It's hardly efficient though and starts choking at about 20 or so faces with a bunch of rotation.

Oh and it's got some half assed click-drag rotation support that doesn't work right. :effort:

Clavius fucked around with this message at 10:55 on Feb 23, 2012

# ¿ Feb 23, 2012 10:53

Clavius: Oct 21, 2007; Howdy!

Suspicious Dish posted:

Yeah, hand-rolled canvas 3D is fun stuff. (try to spot some broken z-sorting there, and laugh at how terrible my shading algorithm is)

Yeah that's much more efficient than mine. I kinda built mine so I could do stupid stuff with it. My shading algorithm uses the same cripplingly inefficient add-as-you-go z values to do its thing as my z-sorting. I can do this though.

# ¿ Feb 23, 2012 13:14

Clavius: Oct 21, 2007; Howdy!

Contains Acetone posted:

I was annoyed that I couldn't find a color picker that I actually liked so I figured hey wait a minute I can just whip that up in javascript/canvas/css over the weekend.

Features:

Test input for HSL and RGB values
Draggable Sliders
Displays the HSV saturation and value square for a given Hue.
Fits perfectly in a half screen sized chrome window.

Todo:

Print color values in the various formats in easy copy/paste format
Adding point and click select to the HSV square.
Make it prettier

Neat. I'm quite partial to this one myself. Site owns too.

# ¿ Mar 12, 2012 10:31

Clavius: Oct 21, 2007; Howdy!

Some of yall might remember the little zelda-ish JS game engine I posted a while back. Well I kinda spent a ridiculous amount of time rebuilding it from the ground up with a crazy editor and proper zelda 3 graphics and stuff. Here's how the game looks:

GO PLAY WITH IT

It's pretty sweet, it has a few types of collisions, water physics, infinite floor support, jumping off ledges, teleports between locations, etc.

The coolest thing I think is support for an infinite amount of floor layers with a fairly reliable seamless transition method between them so you can walk underneath like ten different layers of graphics and still have everything display properly. I limited it in the editor to four just for clarity and lag reasons, but it could theoretically do as many as you want. I set up a few nice little tests for it in the setup example.

A few things I haven't done (yet?): Diagonal tiles, I did these the last time I wrote an engine but the code has changed so much that and become a shitload more modular, I haven't managed to wrap my head around it. Enemies, interactive objects like heart pieces and rocks and poo poo. Overworld transitions, so like moving between areas with a visual moving transition. Basically stuff I haven't gotten to yet.

I also want to rewrite the way the graphics work. Right now it uses image files like this one to build everything:

I wanted it to be super moddable so that could like, make a graphics set in photoshop and drop it straight in and start moving tiles around. For this type of thing though i've found that the flexibility you get with palettes and so on is better. I'd like to build a thing that takes an image you give it and translates it into usable palletted graphic sets.

The way it works is that you have graphic sets like that one above, then you have tile sets. Tiles are made with four slots for graphics with three potential frames of animation and a set 'behaviour', so wall, floor, water, etc. You drop in one of these tiles in the area editor and the game engine decides what to do based on the behaviour setting of that particular sub-tile. Makes editing areas super easy and fun.

The editor is a whole nother animal that I spent a ridiculous amount of time building, I'll probably write a huge post/guide for that thing in another post. It seems pretty self explanatory to me right now but that's probably because I've been using it as I've built it...

Anyway, play with it, it's rad as heck. Build your own link to the past landscape in a friendly web interface. Right click for context menus. Ctrl and Alt keys for adding to/removing from selections of tiles.

If you want to save something you build in it, click on the "edit game data directly" button in the top right and save the stringed JSON in a text file.

e:
works best and fastest in chrome. One or two things in the editor are broken in FF at the moment, something to do with events. IE support is less than zero in any version for now.

Clavius fucked around with this message at 17:29 on Aug 14, 2012

# ¿ Aug 14, 2012 17:05

Clavius: Oct 21, 2007; Howdy!

Suspicious Dish posted:

Why am I jumping diagonally off cliffs, to land on another cliff?

Hah, that's just not finding the floor properly on the way down and carrying on. I didn't set up the area to block the jump far enough, it works the same way in the original lttp, they just tested their areas properly.

Suspicious Dish posted:

Also, you the teleporter warps me to a place. I don't see that place inside the editor.

Use the dropdown box in the areas tab to see the different areas. Add new ones, and build stuff and warp between them, etc.

Suspicious Dish posted:

Great work overall, this is really impressive. Is this on GitHub or something?

Thanks.

No it's just been sitting in my wamp folder for a while and this is the first I'm posting of it, I probably will soon.

# ¿ Aug 14, 2012 17:33

Adbot: ADBOT LOVES YOU

# ¿ Apr 25, 2024 15:24

Clavius: Oct 21, 2007; Howdy!

Manslaughter posted:

Yeah that is really sweet. What composites did you use for the layering when you go in a cave or under something?

It's so disappointing seeing something like this then remembering that the audio support for browsers still sucks balls.

It basically uses a temp canvas when drawing each layer, then applies a black circle as a mask using destination-out if it needs to, then draws the temp canvas to the main game canvas. If a circle is cut out then set the globalAlpha of the temp context to whatever and draw the area layer over again. So I do a bit of a fade in and out by counting the frames since hitting tiles and not hitting tiles and setting the globalAlpha between 0.2 and 1.

Audio is pretty lovely yeah, I think something could be made to emulate it using mp3s of samples off the top of my head. It would be easy enough to do straight music, if a bit slow loading, but not really thought about it in any detail.

Clavius fucked around with this message at 18:51 on Aug 14, 2012

# ¿ Aug 14, 2012 18:45

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Post screenshots of stuff you're working on!