Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

 
Advanced search

1401661 Posts in 67937 Topics- by 61478 Members - Latest Member: MushroomTip

July 05, 2022, 04:18:54 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 12574 times)
metlslime
Level 0
***


View Profile
« Reply #40 on: May 31, 2014, 02:07:54 PM »

Here's my new logic for dark rooms -- first the room is pitch black except for the player and exit doors dimly lit (so players can leave if they wander in by accident.)  Second the player holds up a torch to light their vicinity. Third they light a nearby brazier to illuminate the whole room.



And here's a bug i found in my torch implementation, when there are two torches that overlap.  Trying to be clever by drawing two clockwise circles and a counter-clockwise rectangle around them, then filling that with black.  Problem is both the "even-odd" rule and the "non-zero" rule don't handle this correctly (probably because the overlap between the circles evaluates to -1, which is both odd and nonzero!)



I fixed it using multiple passes -- first set globalCompositeOperation to "destination-in", then draw all circles -- this erases everything outside the circles.  Then set globalCompositeOperation to "destination-over" and draw a big black rectangle over the screen -- this will draw black only where there is currently transparency.

My next task is fixing the blending between the three states (dark, torch-lit, brazier-lit.)  The blending is pretty broken right now with weird pops because the math is totally different for the three states.
Logged

noumenus
Level 2
**


tired


View Profile
« Reply #41 on: May 31, 2014, 02:15:49 PM »

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


 Your very own Pokémon legend is about to unfold! A world of dreams and adventures with Pokémon awaits! Let's go!" Smiley


Vector art looks cool btw, love the minimalism!
Logged

jgrams
Level 3
***



View Profile
« Reply #42 on: May 31, 2014, 03:03:04 PM »

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.

Old post, so you may have figured this out, but...it could save you one step to just have the button be a link, and use a DataURI, like this: http://jsfiddle.net/3AHnD/. Chrome just disabled setting the filename like that: now it always saves as `download` with the appropriate file-type extension. But if it's just a link you can right-click and save-as.

For the directory...

Under Firefox, it might help to type about:config into the location bar and set (you may have to add it) browser.download.lastDir.savePerSite to true, so it will remember which directory you are saving in? Or use the Automatic Save Folder extension.

For Chrome there's a Download Router extension which can set the download directory per-site.

HTH,

--Josh
Logged
metlslime
Level 0
***


View Profile
« Reply #43 on: June 02, 2014, 01:19:15 PM »

noumenus: I don't quite get the reference, does my character look like a character from the Pokemon games?

jgrams:  Thanks, I'll try out that firefox extension, the configuration for it looks a bit daunting but once i have more time i should be able to figure it out
Logged

metlslime
Level 0
***


View Profile
« Reply #44 on: June 07, 2014, 04:13:53 PM »

Finally sorted out all of the lighting for dark rooms.  Now it can transition seamlessly from pitch black (with player and doors faintly visible) to torch-lit (with one or more circles of light) to fully lit, everything blending to the next state.



I also managed to offset the performance cost of the circles of light effect (which requires rendering the black areas to an offscreen canvas and then drawing that onto the main canvas) by culling any tiles that are outside all circles of light.
Logged

aberrantmike
Level 0
**



View Profile WWW
« Reply #45 on: June 07, 2014, 04:36:49 PM »

Diggin it!
Logged
Thecoolestnerdguy
Level 2
**

while(!succeed) try();


View Profile
« Reply #46 on: June 19, 2014, 07:17:38 AM »

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.

You can use the very suggestively named FileReader API to handle that.

So, to load a file, you would do something like this:

Code:
// Create a file input field and append it to the document's body

var fileInput = document.createElement("input");
fileInput.type = "file";
document.body.appendChild(fileInput);

// Whenever the value of the field is changed (i.e the user has selected a file), try to load it

bla.addEventListener("change",handleFile);

// The function which will actually handle the file reading...

function handleFile(evt)
{
  // Create a new File Reader
   
  var r = new FileReader();

  // Start loading the file as a text file

  r.readAsText(evt.target.files[0]);

  // Print the content of the file to the console, when it has finished loading

  r.onload = function(e)
  {
   console.log(e.target.result);
  }
}

And to save a file, you can use FileSaver.js.

It works like this:

Code:
// Include FileSaver.js

var filesaver = document.createElement("script");
filesaver.src = "FileSaver.js";
document.body.appendChild(filesaver);

// The string we want to save

var myString = "Hello World!"

// Transform the string into a blob object

var myBlob = new Blob([myString], {type: "text/plain;charset=utf-8"});

// Wait until FileSaver.js has finished loading

filesaver.onload = function()
{
 // Save the string as a .txt file

 saveAs(myBlob, "hello world.txt");
}

Logged

Sad minecraft didnt copyright squares
metlslime
Level 0
***


View Profile
« Reply #47 on: December 16, 2014, 12:31:20 AM »

This project continues to be not dead! Here is some progress from the past few months.

Bouncing skull enemy.  This guy can't be killed.  I have a subtle scale bounce on impact, gives it "juice."  Low framerate here might make it hard to see.

Incidentally in order to implement bouncing i needed my collision system to pass back the normal vector for the plane of impact, which it wasn't giving me before.  Once i added that, it was really easy to code the bounce --
Code:
//if hit something, bounce off -- this will update the movedir for next frame
//but don't bounce if movedir is already moving away from collision object
if (colvec && colvec.dotProduct(this.movedir) < 0) {

//break movedir into two components -- one parallel to collision and one perpendicular to it
var vec1 = colvec;
var vec2 = colvec.rotate(Math.PI/2);
var movedir1 = vec1.normalize().scale(vec1.dotProduct(this.movedir));
var movedir2 = vec2.normalize().scale(vec2.dotProduct(this.movedir));

//now combine the two components, reversing the one that was parallel to the impact vector
this.movedir = movedir2.subtract(movedir1).normalize();

this.bouncetime = this.time;
}

Evolution of the pause menu.  I started with a parchment thing which i might still use for other menus.  However i am currently leaning towards having no text in the entire game, and this seemed like a good place to test that out.  Version 2: a nice button shape.  Elegant and clean.  Until I realized this is almost literally the trademarked logo for Youtube.  Version 3: a circular button.  Looking back at the parchment version, i feel this latest version fits the "minimalist" theme better.


Weapon IK -- this attaches the player's hand to the weapon.  The tip of the weapon still orbits in a circle around the player's centerpoint, but of course the arm comes from the shoulder which is off-center and depends on the facing direction of the player sprite.  The arm gets a little long sometimes but I think it is shippable.


Waterfalls -- recently animated.  And there is a cave behind it, how do i get there?

This also shows how i can now have direct transitions from water to mountain tiles without dirt in between.  This was a big hack unfortunately, because all of my tile selection code treats neighbors as "1" (same material) or "0" (different material.)  There is no good way to have more than one kind of "different" material using that system.  The hacky method is probably good enough.

Breakable pots.  I'm not sure why I made these, I find breakable pots to be bad for gameplay (like cuttable grass) -- it encourages obsessive behavior and boring exploits.  In zelda, pots don't respawn until you leave the dungeon so it's less exploitable, but in this game every room resets as soon as you leave it.  The goal is for players to have no reason to keep coming into the room and smashing the same pots for a tiny amount of loot.  Probably, I will need to make it so pots never drop random loot (to remove the slot machine aspect) and always fully refill whatever resource they provide (so you have no need to keep coming back to fully refill.)  Since pots provide no threat compared to an enemy, there needs to be a reason for players to prefer fighting enemies than beating up on static objects.


Other technical changes of note:

Attack queueing -- Under the old code, if you clicked the mouse button twice quickly, the second click would come too soon, and get ignored since your weapon isn't ready yet.  Under the new system the second click is queued up and when the attack cooldown is finished, you will attack again.  This feels much better since it's hard to time the cooldown if you're trying to attack as quickly as possible.

Track class -- this is a class that can animate a single property over time.  You create it, add keyframes, and then you can sample from it by passing in a time value.  Great for lots of simple animated things (like the scale of the skull enemy above) or the slow lighting changes for time-of-day.  Can loop if desired.  Right now it can only do linear interpolation, i will probably add others.
Logged

happymonster
Level 10
*****



View Profile WWW
« Reply #48 on: December 16, 2014, 01:27:08 AM »

Loving the new stuff, this looks great Smiley
Logged
EJlol
Level 0
**


View Profile
« Reply #49 on: December 16, 2014, 07:15:43 AM »

Quote
noumenus: I don't quite get the reference, does my character look like a character from the Pokemon games?
I think he is refering to the fact you went from the high resolution, to the lower resolution character. In the pokemon intro this also happens:



Your game is looking nice btw Smiley
Logged
metlslime
Level 0
***


View Profile
« Reply #50 on: December 16, 2014, 10:50:00 AM »

EJlol: thanks for explaining, that joke finally makes sense Smiley
Logged

metlslime
Level 0
***


View Profile
« Reply #51 on: February 08, 2015, 01:21:24 PM »

Not much progress lately as the holidays + travel + crunch time at work have taken their toll.

A lot of the early enemy designs I had were naturalistic/timeless as I didn't know what time period or theme my game would have.  Now that i know the hero is a greek myth character, that means the environment and enemies should match.  So I am doing do a pass on some artwork to make the creatures feel more mythological and the setting feel more like ancient greece.

Logged

SpeakUpGames
Level 0
**


whimsy


View Profile WWW
« Reply #52 on: February 08, 2015, 01:32:20 PM »

please keep the name htmlda
Logged

Actionman
Level 0
***


ermm...


View Profile
« Reply #53 on: February 08, 2015, 02:56:48 PM »

This looks cool, really like the art style you're going for. Are you planning on having this play in the users choice of browser (i.e. just hosting it on a website) or are you going to make it run standalone in an executable?
Logged

metlslime
Level 0
***


View Profile
« Reply #54 on: February 09, 2015, 01:15:03 AM »

This looks cool, really like the art style you're going for. Are you planning on having this play in the users choice of browser (i.e. just hosting it on a website) or are you going to make it run standalone in an executable?

Yeah, the plan is to host it as a web game you play in your browser, like a typical flash game.
Logged

metlslime
Level 0
***


View Profile
« Reply #55 on: October 17, 2015, 11:50:41 AM »

New progress:

I created a simple system that I call "triggers" to support the puzzle aspects of gameplay.  Basically each room can have 1 trigger condition and 1 trigger outcome.  This system covers the interactions between entities, which are not inherent to any specific entity, and not universal behavior for that entity.  As a counterexample, since braziers always light up dark rooms, that behavior is part of the brazier code instead of a trigger.  Triggers are more like the "level scripting" of this game.

This is the editor interface for it:



I can add as many new conditions and outcomes as I want, to support more one-off magical events I want (e.g. the whistle making the pond dry up in Legend of Zelda)

And here is a simple "press button to open door" puzzle in one of my cave rooms:



In theory the state change can persist after you leave the room and come back, using that last checkbox in the editor, but i haven't coded this part yet.  The purpose of that feature is to prevent people from having to solve tedious puzzles multiple times.  I haven't implemented it yet because I'm not sure if I will have any tedious puzzles Smiley I'm also not yet sure if I will ever need more than one trigger in a room.  So far I haven't, so the editor doesn't support that yet, either.
Logged

metlslime
Level 0
***


View Profile
« Reply #56 on: November 09, 2015, 11:41:45 PM »

Health Meter Iteration

I wanted to replace the heart meter with something else, since I'm a clone, but not a shameless one.  I had various ideas like plain circles, flowers, and apples.  So i just made a bunch of attempts --



I actually feel the circles were pretty nice from a minimalist standpoint.  If it was only a health meter, i might go with that.  However, the same icons need to be usable as pickups in the world to refill health, and pickups that extend your max health.  Circles would not be clear enough in those other contexts. As for flowers, I didn't like any of my attempts.

Finally I got going on the apples.  It took me a while to try different combinations of stem, leaf, shadow, etc.  I think stem + leaf is too detailed.  Stem alone looks like a cherry. Leaf alone works.  Then i needed to figure out which elements of the silhouette were necessary to look like an apple.  A key lesson is the top curve needs a dip in the middle.

BUT THEN....



WTF. So it turns out that photoshop and HTML5 canvas don't rasterize bezier paths the same.  This is the first piece of art where I was picky enough about small details to notice (since I'd been tweaking the same paths for a while.) You can see above i mirrored them so you can compare them closer.  I spent a lot of time making sure that it wasn't a problem with my import tool. It isn't.  I have not solved this, but i basically tweaked the photoshop file so that it looks wrong, but correct in game. In the long run I guess I need to write a native javascript path editor, or just learn to not care so much about individual pixels.

Anyway, here is the new health meter, along with improved forest tiles (some trees are lighter for variety), snakes with wings (so they look more mythological), and other art tweaks.

Logged

Juskelis
Level 1
*



View Profile
« Reply #57 on: November 09, 2015, 11:48:36 PM »

The door perspective on the door frame silhouettes seems a bit odd to me, makes the floor pop up a bit.
It seems like it's more the light casting onto the ground that feels weird to me. Either way, the floor feels weird with that door at the bottom.

Those color palettes are awesome! How hard was it to implement that transition feature?
Logged

metlslime
Level 0
***


View Profile
« Reply #58 on: November 10, 2015, 12:10:48 AM »

The door perspective on the door frame silhouettes seems a bit odd to me, makes the floor pop up a bit.
It seems like it's more the light casting onto the ground that feels weird to me. Either way, the floor feels weird with that door at the bottom.

Those color palettes are awesome! How hard was it to implement that transition feature?

I kind of agree with both of you guys on the doors -- the way the light from outside spills into the room is still not right to me. I have done some additional iteration on it but haven't found anything I like yet.  Will keep trying.

It's been a while but I think the transition feature probably took 2-3 days. I think the basic logic of copying the two rooms to static images and then sliding them around was pretty straightforward, and even adding the iris effect wasn't too hard.  Most of the annoyance was getting the player to animate on top of the static images, including clipping into the shape of the doors.
Logged

marcgfx
Level 7
**


if you don't comment, who will?


View Profile WWW
« Reply #59 on: November 10, 2015, 02:01:27 AM »

I like the clean style!
her head is way too big though Shocked
water/waterfalls look great! maybe a bit of foam/splash would make them even nicer?
the apples are an interesting choice. but I think the hearts are so universal, they would not stand out as shameless copies.

edit: added the not...
« Last Edit: November 10, 2015, 04:03:12 AM by marcgfx » Logged

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

Theme orange-lt created by panic