Welcome, Guest. Please login or register.

Login with username, password and session length

 
Advanced search

1411283 Posts in 69325 Topics- by 58380 Members - Latest Member: bob1029

March 29, 2024, 05:16:21 AM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsCommunityDevLogsHtmlda [untitled Zelda clone in HTML5]
Pages: 1 [2] 3 4
Print
Author Topic: Htmlda [untitled Zelda clone in HTML5]  (Read 13781 times)
metlslime
Level 0
***


View Profile
« Reply #20 on: October 03, 2013, 01:16:12 AM »

About 80% finished with my new crocodile enemy.

I don't intend to have this many crocs on the screen at once, they are supposed to be a threat even alone, but you can see more of the different poses and animation frames this way.

Unlike my other enemies, this is not just a single square entity sliding around the grid, it's actually 3 entities (head, body, tail) following each other in a chain.  The code for that was simple and I managed to generalize it so that i can use it again for my planned giant snake boss, which will have more than 3 segments.

But figuring out how to break the body up into chunks and animate them so they seemed to be one continuous creature was more challenging.  I was really inspired by the lizard in Project Rain World and tried to learn what i could from the animated gifs.  However i think that lizard is animated using more of a physics approach, where each segment has spring constraints, inertia, etc.  I wanted to do the simplest implementation i could since this is just one of many enemies in the game, and not introduce whole new systems just for one guy.  I basically draw the three body parts where the underlying entity is, but rotated to roughly line up with the connecting part.  Then I made the middle chunk bend in the middle as needed, and adjusted the head and tail to attempt to line them up with the neck and tailbone.  It's still not perfect and you can see a weird gap behind the skull on some of these guys as they turn.

Logged

SirNiko
Level 10
*****



View Profile
« Reply #21 on: October 03, 2013, 03:18:40 AM »

The natural rock walls look gorgeous - even though the art is all simple lines, it gives the impression of being a lot of custom work instead of just a tile map. It fits really well with the flat color aesthetics you're using now.

The dungeon looks pretty dull by comparison. I think you'll need some kind of decorations on the wall to break things up. The same goes for the forest. The trees all look really samey, and as a result they're pretty boring compared to the rock walls. You might come up with something that uses bigger trees so you can apply perspective to them, like maybe depict them as blocky hedges or tall trees with squared tops with a couple of different tile variations.

You might also consider making two or three boulder variations (or double that by changing both shape and color) to add a little more visual variety to them.

The crocodiles / alligators are fantastic. I'm looking forward to seeing them animated!
Logged
metlslime
Level 0
***


View Profile
« Reply #22 on: October 03, 2013, 10:31:56 PM »

The dungeon looks pretty dull by comparison. I think you'll need some kind of decorations on the wall to break things up. The same goes for the forest. The trees all look really samey, and as a result they're pretty boring compared to the rock walls. You might come up with something that uses bigger trees so you can apply perspective to them, like maybe depict them as blocky hedges or tall trees with squared tops with a couple of different tile variations.

Thanks for the feedback.  I agree with most of what you say; one of my struggles with the art is to make something that is minimalist in nature yet not boring to look at.  So far i've found that the best looking screens on my world map have multiple different "materials" -- both cliffs and ocean, or both trees and cliffs.  The least interesting screens are all one material, like the snake forest screen above.  Or the dungeon screen.  Part of the solution will be to dress these rooms/screens with additional props, for example i've got mushrooms in my caves now.  But maybe i do need to come up with some variants on the forest tiles and dungeon wall tiles too. I'll try some things.
Logged

metlslime
Level 0
***


View Profile
« Reply #23 on: October 17, 2013, 11:04:06 PM »

First, an added a subtle checkerboard floor to the dungeon, hopefully this makes the scene less boring without adding too much ornamentation and losing the minimalist look.

(Sun and Moon tiles are puzzle elements, still in progress.)



Second, a concept art for the player character.  I'm not sure how this will read when squashed down into the game's flat/vector art style, though.  The light colors might not contrast enough when rendered without outlines or shading, and at a smaller scale.  Nothing to do but try it!



Third, a first attempt at a title screen, to try and set the look and feel for UI and menus.  The name shown here is not final, it's not even necessarily the frontrunner.  It's just the one I was toying with while making the image Smiley

I'm planning on having the title text overlap the starting screen of gameplay.  When you start moving the character the text fades away and the HUD fades in, is the idea.

Logged

Thomas Finch
Level 8
***


@slowcircuit


View Profile WWW
« Reply #24 on: October 18, 2013, 12:30:54 AM »

Hot Melda!?
Logged

metlslime
Level 0
***


View Profile
« Reply #25 on: October 18, 2013, 10:57:47 AM »

Hot Melda!?

No no it's like... "HTML Zelda" -> "HTM elda" -> "Htmlda"
Logged

Thomas Finch
Level 8
***


@slowcircuit


View Profile WWW
« Reply #26 on: October 18, 2013, 11:16:40 AM »

Haha, I know. It was a joke.

Hot Melda!?

No no it's like... "HTML Zelda" -> "HTM elda" -> "Htmlda"
Logged

Orymus
Level 3
***


View Profile WWW
« Reply #27 on: October 18, 2013, 11:21:49 AM »

Looking good Smiley
Logged
Kekskiller
Guest
« Reply #28 on: October 18, 2013, 11:48:56 AM »

I'm not here, just posting to get this listed under new replies.




(oh and it looks terrrriffic if I may say so)
Logged
ericmbernier
Level 3
***


Sometimes I make games.


View Profile WWW
« Reply #29 on: October 23, 2013, 01:28:09 PM »

Posting to follow. Looks very pretty, and I love Zeldalikes Smiley
Logged

metlslime
Level 0
***


View Profile
« Reply #30 on: November 24, 2013, 11:36:57 PM »

I've been making a decent amount of progress on various things, such as rough world map layout, player character art, map editor, and world tiles. However I wanted to spend this post talking about part of my half-assed art pipeline.

Basically all the art in my game is vector art, and the art itself lives embedded in the code as canvas drawing commands.  Every entity on the screen has a draw function.  For example the arrow draw function is this:

Code:
Arrow.prototype.draw = function(context) {
var c = context;
//feathers
c.beginPath();
c.moveTo(-0.1,0.5);
c.lineTo(-0.15,0.4);
c.lineTo(-0.35,0.4);
c.lineTo(-0.3,0.5);
c.lineTo(-0.35,0.6);
c.lineTo(-0.15,0.6);
c.closePath();
c.fillWithColor(colors.teals+6);

//shaft
c.beginPath();
c.rect(-0.3,0.47,0.85,0.06);
c.fillWithColor(colors.khakis+4);

if (!this.stuck) {
if (this.burning) {
//glow
begin_fullbright();
c.beginPath();
c.circle(0.55,0.5,0.125);
c.fillWithColor(colors.golds+0);
end_fullbright();
} else {
//head
c.beginPath();
c.moveTo(0.65,0.5);
c.lineTo(0.5,0.4);
c.lineTo(0.5,0.6);
c.closePath();
c.fillWithColor(colors.teals+6);
}
}
};

Early on i was hand-writing the draw functions, for example you can see here I probably hand-wrote this one because all the coordinates are nice simple numbers like 0.4 and 0.6.  I would tweak the code, refresh the page, and see if the arrow looked good or not.

Anyway I started using photoshop's vector tool to iterate faster, but still typing the result by hand after I liked what I saw.  Finally I realized that photoshop has an "export to illustrator" function which outputs a simple .ai file.  And it turns out those .ai files are ascii files, and the contents are simple postscript commands.  Which map almost 1-for-1 to the html canvas drawing functions.

So now i have this simple converter that i wrote in javascript to read in a .ai file and spit out code, which i can copy and paste directly into my entity draw functions. This is what that converter loos like:



You might think this type of stuff should be fully data-driven, where the art assets are all SVG files or something.  However, there is enough logic woven into some of my drawing code that it's not a matter of simply displaying an asset, i also apply conditional changes to some components of the asset, such as blinking, wobbling, offsetting, etc.  This system gives me the freedom to do that.  Also it was less work.

Logged

metlslime
Level 0
***


View Profile
« Reply #31 on: December 02, 2013, 11:35:22 PM »

Here's a shot of my map editor.



You can only really do a few things right now, mainly choose a material or object or enemy from the swatches in the middle, and paint with them in the room to the left.  Arrow keys to move around the map, pgup/pgdn to switch between overworld and underworld (they are directly overlaid in my game so each room can connect to the room directly below it or above it.)  The map on the right was the most recent addition, it was primarily created so that i could have a better sense of the neighborhood when editing the current screen.  But it is also useful to jump around the world faster.

More Nifty Features: Cut, copy, and paste only work on entire rooms right now because i haven't created a selection tool.  The "Map" button creates a large render of the entire world, currently at 20% size since that is big enough to look at the details.  Maybe i can print out a poster when the game is finished. The game simulation actually runs in realtime in the screen view too, which means you can watch enemies walking around and stuff.  Down side to this: hard to erase them because you don't know what tile they spawn at! (i will fix this probably.)

Side benefits of creating an editor:
  • You quickly find any code that assumes the existence of a player!
  • You rewrite your room handling code to be object oriented so you can have more than one instance of a room.

UNSOLVED ANNOYANCE: while the fact that my editor is written in javascript means that it can use all of the game code for free, the down side is that it runs in a browser and doesn't have easy filesystem access compared to a native app.  So when i click that "save" button on there, it actually opens a new tab with a giant text blob that i need to right-click and choose "save..." and then navigate to the right folder and then choose the right filename, every time.  I know that i could save the map in "application data" or whatever sandboxed file space html5 provides, but then my source control system wouldn't be able to see it.  And i could still do periodic exports, then i would get lazy and my SVN version would end up being more and more out of date, probably.

Other things you can see in this screenshot: ocean now goes all the way around the island, including nice round corners in the four corner screens.  Also, there is a nice big lagoon in the middle.  You will be able to paddle a canoe (or raft, not decided) around the internal waterways of the island.  The raft won't be sea-worthy though so you can't use it to escape the island.  Also: the map will probably change a lot as i nail down the item progression and build out shortcuts and gating features.
Logged

EmilMeiton
Level 0
***



View Profile
« Reply #32 on: December 03, 2013, 03:58:13 AM »

 My Word!

Loving it!!

The fact that everything seems to be done via the canvas tools in html5 makes this very interesting for me.., definitely following. Can't wait to see some gameplay
« Last Edit: December 03, 2013, 07:30:35 AM by Telephant » Logged
LogicBugs
Level 0
**


View Profile
« Reply #33 on: December 03, 2013, 04:14:37 AM »

The fire animation looks fantastic!  The whole look is very nice.  I might think about having something like the fire on every "page" of game play to keep it feeling alive.  I don't think you would want the fire at each location.. but maybe a breeze that blows occassionally and some of the trees bend?   Just to keep the whole game feeling alive.
Logged
metlslime
Level 0
***


View Profile
« Reply #34 on: December 03, 2013, 12:42:38 PM »

I might think about having something like the fire on every "page" of game play to keep it feeling alive.  I don't think you would want the fire at each location.. but maybe a breeze that blows occassionally and some of the trees bend?   Just to keep the whole game feeling alive.

Agreed, I've noticed that the screens with some kind of motion feel better than the ones that are completely static.  At the moment the only ambient motion is A. braziers and B. the ocean waves.  I would do wind in the trees but at the moment my storyline is about restoring wind to a windless island, so there probably can't be any wind if I do that, but I'll think of something.  Birds, bugs, fireflies, flowing water in the rivers and waves in the lakes,  dripping water in the caves, will all help.
Logged

metlslime
Level 0
***


View Profile
« Reply #35 on: January 07, 2014, 01:32:25 AM »

I recently added "room transitions" so that the game animates between screens (instead of instantly flipping like a slide show)



The basic feature is elegant (render a canvas of both rooms, then animate the images) but the details get annoying -- player must be in motion therefore needs to be rendered separate from the two static canvases, and needs to pass through doorways so I need to clip the player to a vector mask that matches the shape and position of the underlying door (which is already baked into one of the canvases.)

You can see four types of transitions here: a scrolling pan on the overworld, an iris wipe when falling into a hole, another scrolling pan through a doorway inside the dungeon, and then an iris wipe with doorway when exiting a dungeon/cave.

Finally a design note. I was willing to keep the flip screen (slide show) effect instead of doing all this extra work, but these transitions actually serve a design goal: they help your eye track where the player is when arriving at a new screen (either with a scroll so you never lose the player, or with the iris effect which focuses your attention on the doorway as you emerge from it.)
Logged

ericmbernier
Level 3
***


Sometimes I make games.


View Profile WWW
« Reply #36 on: January 07, 2014, 06:59:57 PM »

The transitions are looking good!
Logged

metlslime
Level 0
***


View Profile
« Reply #37 on: March 15, 2014, 12:44:29 AM »

This project is not dead yet!

Latest progress: I have finally got the player character artwork in the game.  Still need animations and code to support all of the behavior i want, but the art is finally done.  Here is a small history of my development of the character art.

1. Verbal Concept: "A Female Argonaut"

2. Collect Inspiration:


3. Draw concept art based on inpsiration:


4. Create vector art from concept and then refine shapes until it looks good:

A. Trace over concept art with pen tool
B. First attempt to shorten proportions to look more readable at game res
C. Align shapes to pixel boundaries to make them look sharper
D. Shorten proportions again, thicken limbs and torso
E. Shorten again, get even thicker, add contrast
F. Simplify details, add headband
G. Shorten proportions again
H. Final proportions, recolored to use existing colors in game palette

5. Create side-view based on front view:


6. Artwork at native game resolution:


Learnings:

It turns out that you need to get freakishly deformed in order to look good as a small game sprite -- and to fill a square shape.  The original zelda "Link" sprite is crazy in how deformed he looks.  In retrospect, it is obvious that I should have created the art at native resolution first, as pixels, and then created vectors from the pixel art.  Doing the work at high res meant that my perceptions of what looked corretly proportioned and readable were constantly misleading.   It took me a lot of revisions to finally get the head as large as it needed to be, and the body as short and squat as it needed to be.

Also, I wanted to avoid using sex characteristics like hips and breasts, as well as cultural signifiers like liptstick and mascara, to make the character look female.  This is because I also want her to look like a serious adventurer -- and aspirational hero character -- and not male gaze fodder.  In the end I had to add a headband to help make her look like a woman, which is sort of a cultrally-based signifier.  But the long hair alone didn't work because a lot of male sword-and-sandal heroes have long hair like that.

I'm pretty satisfied with the results, it reads well at game resolution, and it looks like the character I'm trying to portray.  My one lingering doubt is if it's not as minimalist as my art style really deserves. But I don't think this character design could get any more minimalist.  I would basically have to start over and have like, a faceless character in a robe or helmet or something to get simpler.  And then the character loses a lot of personality I think.  Anyway I'm sticking with this for now.
Logged

kraed
Level 1
*


View Profile
« Reply #38 on: March 15, 2014, 04:43:01 AM »

Nice, nice minimalism, very clean and proper. Would love to see a few more greek things implemented (Fighting waves in colosseum like area, maybe?)Very interested in the story side as well. Slick project!
Logged

metlslime
Level 0
***


View Profile
« Reply #39 on: March 15, 2014, 11:30:28 AM »

Nice, nice minimalism, very clean and proper. Would love to see a few more greek things implemented (Fighting waves in colosseum like area, maybe?)Very interested in the story side as well. Slick project!

Glad you like it.  Now that I'm settling on a Greek mythological setting, I'm going to start inserting more ancient Greek looking environments and the enemy creatures will look more mythological.  Nothing slavish to the source material though -- expect to see a Kid Icarus level of accuracy to the original myths Smiley
Logged

Pages: 1 [2] 3 4
Print
Jump to:  

Theme orange-lt created by panic