Welcome, Guest. Please login or register.

Login with username, password and session length

 
Advanced search

1411196 Posts in 69314 Topics- by 58380 Members - Latest Member: feakk

March 18, 2024, 06:48:08 PM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsCommunityDevLogsdot sneak - top-down stealth game (browser-based WebGL)
Pages: [1] 2 3
Print
Author Topic: dot sneak - top-down stealth game (browser-based WebGL)  (Read 19299 times)
Lynx
Level 5
*****


Upstart Feline Miscreant


View Profile WWW
« on: August 17, 2012, 01:13:47 PM »

You know how they say when you want to start developing games, you should make one to throw away-- Breakout or Space Invaders?

I decided to do a top-down version of Metal Gear Solid 2 for my first project.

I've been wanting to get into indie game developing for quite a while now, but I think I've finally got something that I can build on-- HTML5 and WebGL-- to get whatever games I make into the hands of people around the world.  Behold!



dot sneak plays on a 2D map, a la the Soliton Radar from Metal Gear Solid, with a Codec at the top of the map to bring dialogues in-game, instead of forcing players to stop playing the game to listen to their assistant.



Now what I'm looking for is feedback from people on how well the WebGL technology works.  Does the game play at a reasonable speed in your browser?  Are there graphical issues?  What can I do better?

Some already known issues:

  • This won't run on IE.  Microsoft intentionally doesn't support WebGL.
  • Safari and Firefox don't run WebGL by default.  You have to enable it.  This probably runs best in Chrome, but I am interested in knowing how it plays in other browsers.
  • There's no sound nor music.
  • Art is placeholder.
  • Story is placeholder.  This isn't a demo, this is a tech prototype.
  • Room walls have glitches.
  • Guard vision cones have occasional glitches.
  • If you run around, you can cause dialogues to overlap with each other.

I hope you'll give this a try and let me know how it plays for you!
Logged

Currently developing dot sneak - a minimalist stealth game
ஒழுக்கின்மை (Paul Eres)
Level 10
*****


Also known as रिंकू.


View Profile WWW
« Reply #1 on: August 17, 2012, 01:48:14 PM »

looks good for a first game, glad to see you starting games

i tried to open it and it said i required webgl and gave me instructions for getting it; i'll see if i can do that and try it again later
Logged

Lynx
Level 5
*****


Upstart Feline Miscreant


View Profile WWW
« Reply #2 on: August 22, 2012, 12:51:11 PM »

After a bit of thought, I decided to rewrite this using Canvas, because I'm not using any of the WebGL-mandated features -- shaders or 3D graphics -- and I'd like this to be able to run on IE9, or on Firefox without having to ask people to enable WebGL.  It'll double my available audience!

I'm also rewriting the editor to use Dojo for its GUI, which is a long way better than dat.gui.  Along the way I'm organizing the code and improving on how I did things...  Take this as an example.  The old code had some glitches with how it drew the walls; you could see white specks or even crosses where it was drawing fragments of the outer walls incorrectly.  Here, it's smooth and clean.




I'll be implementing new features as I go, stuff that needs to be put in from the ground up like obstacles (props) inside rooms that can obstruct line of sight and movement.  I skipped that last time in favor of getting a prototype running, but it needs to be accounted for before I re-implement vision cones and AI.

So far I'm much happier with the rewrite, having eliminated some ugly points, but there's still a lot to do to get back to where I was.
Logged

Currently developing dot sneak - a minimalist stealth game
Laitch
Level 0
***


View Profile
« Reply #3 on: August 22, 2012, 01:45:21 PM »

Are you still interested in that feedback you listed in the first post after you switched away from webGL? You will get it anyway: I was able to run it almost consistently with a frame rate above 55, at times it fell down to 40. I ran it in firefox.

The game was cool, I have never played Metal Gear Solid so I can't really compare with that, but the stealth element did remind me of the old splinter cell games (in a good way).

A few things I think could be improved is the movement speed of the character - you move way to slow in my opinion and maybe add a field of vision to the character too. It is way to easy when you know where everybody is at all times Smiley
Logged
UrbanwarfareStudios
Level 0
**


View Profile WWW
« Reply #4 on: August 22, 2012, 02:14:56 PM »

I had a quick go - died lol

Overall I can see real potential in what your doing, and I think the concept is about right, thou I don't think you want to limit the overall view of where the enemies are too much perhaps a field of vision for the player + a positional indicator (like TF2) for enemies who are not that close to you?  Cool
Logged
Lynx
Level 5
*****


Upstart Feline Miscreant


View Profile WWW
« Reply #5 on: August 22, 2012, 02:56:12 PM »

Good to know it ran for other people than myself!

Firefox seems noticably slower than Chrome to me, and I've noticed that it seems to hang up at times.

It's possible to run (hold shift or space, or tap the R key to toggle), and right now in the prototype there's no penalty for so doing.  My plan is to make running give off noise that will attract guards that aren't looking your way...  Alerted guards should be getting other guards to close in as well.

The current 'walk speed', you can imagine as sneaking carefully and making no sound at all.  That said, walk and run speed are part of the level data, not hardcoded, so they are easy to change.  Guards have walk and run speeds as well, which are slower than yours.

Also, I'm planning to have some guards not show up on the radar unless you can actually see them, or only show up when they are moving.  Maybe cameras that just hang somewhere and look back and forth.  Player field of vision will make a return at some point.  That'll be when I add wall-hugging so you can look around a corner without a guard seeing you.
Logged

Currently developing dot sneak - a minimalist stealth game
Lynx
Level 5
*****


Upstart Feline Miscreant


View Profile WWW
« Reply #6 on: August 27, 2012, 02:55:53 PM »

Something I already had in the webgl version, but a little nicer: exits.  Now instead of everything being squeezed into a primitive all-inclusive menu on the upper right, you can right-click an exit (or room, or empty space for general level properties) in the editor to bring up a context menu:



And something new:



This is a popup window which allows me to edit the shape of obstacles.  Obstacles are what I'm calling various things that can be put into rooms that will block movement and vision.  My plan right now is to make them be vector graphic style.

I should do a performance test to verify that obstacles will really be better off as vector graphics in Canvas, where I can draw all obstacles on screen in one pass, or as images where I need to push each one separately.  This wasn't a problem for WebGL because I would simply make or edit persistent objects and WebGL would handle redrawing them as needed, but Canvas requires everything to be redrawn each frame.  Retained versus immediate mode, in other words.

Or maybe I should render each room as a separate canvas, then just copy the canvas data, since I don't expect the underlying map data to change frequently.  That's a tradeoff of memory versus CPU time.

Edit to add: ding, level 4 Tig-er!
« Last Edit: August 27, 2012, 03:17:45 PM by Lynx » Logged

Currently developing dot sneak - a minimalist stealth game
Laitch
Level 0
***


View Profile
« Reply #7 on: August 28, 2012, 02:41:40 AM »

I should do a performance test to verify that obstacles will really be better off as vector graphics in Canvas, where I can draw all obstacles on screen in one pass, or as images where I need to push each one separately.

I don't know HTML5 and the canvas object, but if the level is not changing couldn't you just bake all the objects into one image and draw it in one renderpass?
Logged
Lynx
Level 5
*****


Upstart Feline Miscreant


View Profile WWW
« Reply #8 on: August 28, 2012, 11:14:07 AM »

Well, my consideration here is memory: the engine currently supports zooming in and out freely.  If you're zoomed in to a scale of 4 (16x resolution) then a canvas that starts at 256x256 becomes 4096x4096.  Vectors let you get nice sharp diagonals even then.

However...  It turns out that vectors are at least 10x slower than images, so I have some thinking to do.  I'm probably going to go with some variant of pre-rendering the map as an image and then just copying the image to screen; I just need to figure out the specifics.

That said, have another image:



I've set this up to allow obstacles to be rotated in 90-degree increments so it's less obvious that I'm using the same 3-crate group (for instance) several times over.
Logged

Currently developing dot sneak - a minimalist stealth game
DustyDrake
Level 10
*****



View Profile
« Reply #9 on: August 28, 2012, 07:46:03 PM »


Quick question on this one.
The way the dots are aligned makes it look like you can drag them around to deform the shape of the crate.
Is it possible to add more points?
Remove them?

Or am I insane?
Logged

Lynx
Level 5
*****


Upstart Feline Miscreant


View Profile WWW
« Reply #10 on: August 28, 2012, 07:49:37 PM »

Yes, I put a context menu in the thing so I can right-click over a point to add or delete points, or anywhere in the editor to start a new shape.  Each shape is just a filled polygon.  Being able to create and modify object templates on the fly feels pretty liberating.
Logged

Currently developing dot sneak - a minimalist stealth game
Lynx
Level 5
*****


Upstart Feline Miscreant


View Profile WWW
« Reply #11 on: August 29, 2012, 08:56:14 AM »



I now render onto 256x256 map tiles whenever the map is updated, then I use drawImage to copy those to the actual canvas.  This works like a charm.  A few future improvements and optimizations I could make here, like dropping map tiles when they're no longer in view, and improving the resolution of map tiles when zoomed in, but this is good enough to push forward on.
Logged

Currently developing dot sneak - a minimalist stealth game
Lynx
Level 5
*****


Upstart Feline Miscreant


View Profile WWW
« Reply #12 on: August 30, 2012, 08:01:37 AM »

You may have noticed the layout of the warehouse crates was different.  That's because I hadn't saved the level with the crates.  (it has an autosave, and one 'save' slot)

To give me a little more flexibility, I implemented 'export level to text' and 'load level from url' features, and matching features for obstacle templates.  Now I can save sets of obstacle templates, so I could have props for warehouse levels, science levels, school levels, et cetera.



It'll presently replace any templates that have the same name, so if you have a "16x16 crate" defined and you load a template file with a different-looking 16x16 crate, that'll replace the first one.
Logged

Currently developing dot sneak - a minimalist stealth game
Lynx
Level 5
*****


Upstart Feline Miscreant


View Profile WWW
« Reply #13 on: September 05, 2012, 01:35:39 PM »

Still plugging away on this!  The canvas prototype now allows moving around in a preview mode.



You can see the control wheel here.  (this shows up in the WebGL prototype as well, just hold the mouse button down until it expands, then drag the mouse in the direction you want to go)  This was going to be the input method for touchscreen users, but I never implemented touchscreen in the WebGL version because mobile phones don't support WebGL.



This is a debugging display showing the map nodes that I'm going to use for collision detection and pathfinding.  Each node is tagged with either 4 (the maximum radius a mob could have at that node) or 8 to indicate a larger mob could fit there.  There is support to allow larger mobs so if I wanted, I could have a 32- or even 64-pixel diameter mob menacing the player.  ("Metal Gear?!")

Collision detection is currently hacked in just as a proof of concept, but I need to rebuild it.  Right now it just stops you when you glance against an object, which feels terrible.  I want it to let you slide alongside the object...  Maybe at some point, switch to wall-hugging if you deliberately press yourself flat against a wall, so you get up to the corner and peek around it.

Logged

Currently developing dot sneak - a minimalist stealth game
Tueman
Level 0
**


View Profile
« Reply #14 on: September 05, 2012, 01:48:54 PM »

I wish we'd be a little faster. I'm going at like 0.1 miles per hour. Other than that, great game!
Logged
Lynx
Level 5
*****


Upstart Feline Miscreant


View Profile WWW
« Reply #15 on: September 05, 2012, 07:32:22 PM »

All right-- boosted the demo's player speed a bit!  (from a walk speed of 12/run speed of 24 to 16/32)  Guards went from 8/16 to 12/24.

Logged

Currently developing dot sneak - a minimalist stealth game
Lynx
Level 5
*****


Upstart Feline Miscreant


View Profile WWW
« Reply #16 on: September 06, 2012, 02:01:20 PM »

I've un-hack-ified the collision detection, so next on the docket will be implementing pathfinding.

I'm wanting to keep the control scheme very simple.  Right now there is literally only movement, and you can use either the control wheel which lets you move freely in any direction, walking or running, or the WASD/arrow keys and shift or space to run.  Clicking somewhere uses the AI pathfinder to take you to where you clicked.

I haven't implemented wall hugging yet, but as I envision it, it will happen automatically when you navigate directly into a wall, and you'll have to pull away from the wall a bit to 'peel' yourself off of it.

Crouching will be automatic too; you'll be crouching as you move and totally silent by default, and straighten up to run.  Guards will be able to see you over cover (gray obstacles) only when you're standing.

Some things I want to add, but these could be tricky to integrate with the mousewheel.

- Being able to examine/interact with particular objects.

This game is really graphically sparse (by design), so I have in mind that you can look around at rooms, or at specific objects, and get text descriptions, but you shouldn't be forced to read descriptions if you want to.  I need an elegant way to integrate this.

- Sneak up behind a guard, choke them out, drag their body somewhere out of sight.

I kind of like not having this option, but it really should be available if it's a Dot Sneak mission where you're playing some sort of super-agent.  I imagine holding the mouse down while near the body should pick it up, then you can drag it, then hold the mouse down again to drop it.

Adding in the option to disable guards adds a whole set of 'must implement this' stuff like having guards wake up sleeping guards they find, noticing the absence of a guard who's supposed to be on patrol, and maybe having the guard wake up on his own.

- Being able to throw a rock and distract a guard to investigate.

This and a host of other little tricks would be interesting to add in, but it IS supposed to be a minimalist stealth game.  I'm not sure if I should add these sorts of things.
Logged

Currently developing dot sneak - a minimalist stealth game
Lynx
Level 5
*****


Upstart Feline Miscreant


View Profile WWW
« Reply #17 on: September 07, 2012, 05:01:38 PM »



I made use of Qiao's PathFinding javascript library but discovered soon that its use of diagonals has some issues that caused it to keep bumping mobs against walls and obstacles.  I was able to hack together a quick fix though.

I'm not 100% happy with this -- I think with more work, it would be possible to create an improved pathfinder that would allow units to move a bit more freely.  But it's nice to have a basic pathfinder working.
Logged

Currently developing dot sneak - a minimalist stealth game
Lynx
Level 5
*****


Upstart Feline Miscreant


View Profile WWW
« Reply #18 on: September 08, 2012, 08:27:33 AM »

Well, this is improved:



It could be more efficient, but I should look at optimizations of this kind later.  Lots of other things to implement in the meantime!
Logged

Currently developing dot sneak - a minimalist stealth game
Lynx
Level 5
*****


Upstart Feline Miscreant


View Profile WWW
« Reply #19 on: September 10, 2012, 08:24:53 AM »



Vision cones that get clipped by obstacles properly!  This took a lot of headscratching to work out.

It doesn't currently handle cover obstacles, providing partial vision of the areas behind them, so I'll have to think about that a bit more, but it's just a matter of figuring something out!
Logged

Currently developing dot sneak - a minimalist stealth game
Pages: [1] 2 3
Print
Jump to:  

Theme orange-lt created by panic