next »

[propapanda]

Hey there,

For the past couple years I’ve been working on and off on this point n’ click adventure game called The Webmaster. This is the first time I’m publicly showing my work on this project, but I feel it’s been incubating for long enough now and should start to finally see the light of day, for better or worse.

The game takes inspiration from '80s horror movies as well as classic 2D adventure games, two of my favorite things.


Story

The Webmaster is set in the good ol' days of the mid '90s in small town American suburbia. The Webmaster is set in the good ol' days of the mid '90s in small town American suburbia. We follow a couple teenage friends as they stumble across a curious MacGuffin. Their investigation leads them to mysterious places and encounters with interesting and, frankly, weird people. The boys make a frightening discovery...

That's it for now -- don't want to give too much away!

Gameplay

The game plays very much like the classic adventure games from LucasArts and Sierra: You point the mouse cursor at objects on the screen, choose an interaction verb and wait to see what happens. Throughout the game you get to explore mystic places, meet strange folk and solve puzzles along the way.  

While the game does include a good amount of puzzles, the gameplay is mostly story- and dialogue-driven. In that sense The Webmaster might be closer to Visual Novels than most classic point-and-clicks.

Oh, and you can't die -- although we do try to hide that fact to make the game more exciting.

Graphics

Originally I’d planned to make The Webmaster look a lot more like the games that inspired it: Big, beautiful pixel art with a limited VGA palette. Alas, it turned out I’m absolutely rubbish at this art style. Also, it wasn't really jibing with the mood I had in mind for the game.  

Luckily, thanks to my background in feature film animation I happen to know a thing or two about rendering in 3D.  
And so, after a lot of trial and error, I eventually settled on the style you see here. It's still low-res VGA but with a more filmic approach. Not to mention I take some liberties when it comes to the number of colors on screen at once.

The pre-rendered 3D art offers lots of artistic freedom to capture a nostalgic look reminiscent of inspirational movies such as Salem's Lot, The Goonies or Fright Night. Moreover, the ridiculously low resolution means the amount of time and effort it takes to create and render the background assets stays fairly reasonable.  

Regarding animation, I'm going for the absolute minimum I can get away with -- mostly just transitions, really. The characters will walk around on screen, but I'm not going to create large numbers of custom animations for different situations.

Technical Info

The Webmaster is built in Unity with a little help from the excellent Adventure Creator and Ink extensions. Plus of course tons of custom code in C# and Lua to make everything work exactly how I envision it.

For now it's aimed at desktop platforms (Windows, macOS, Linux), though technically there's no reason it shouldn't run on mobile, too.

The 3D rendering is all done inside Cinema 4D.

Current Status

At this point I have a working prototype of the game running:

- Rooms can be defined and loaded
- Actor’s actions and interactions with the scene can be scripted
- The player can click and thereby interact with stuff on the screen
- Path finding works for the most part
- A large number of rooms have been designed and rendered

Screenshots

These are running in the game's engine. Animations aren't quite there yet, so just still images for now:

Social Links

Not much there yet:

Web site: www.thewebmastergame.com/

Twitter: http://www.twitter.com/@_TheWebmaster_

[AaronB]

I like the visual style and concept.  Keen to see how the character animation turns out.

[chrilley]

The 3d rendered art style makes it look very promising, I like lighting you got going in these scenes.

Since you mention 80's horror as one of the inspirations can I expect something demonic inhabiting that theme park by any chance?

[propapanda]

I like the visual style and concept.  Keen to see how the character animation turns out.

Animation is in fact my biggest concern at this point. I'm tending towards going with some stock mocap data, as animating by hand would be ridiculously laborious and would in the end most definitely look worse.

The 3d rendered art style makes it look very promising, I like lighting you got going in these scenes.

Since you mention 80's horror as one of the inspirations can I expect something demonic inhabiting that theme park by any chance?

Don't want to spoil too much, but I can say this: The owner of the theme park has some rather occult hobbies and interests. He also happens to be a keen collector of mythical beasts and legendary creatures, which are kept on display in the park. Of course it's hard to come by a real Bigfoot these days, so he employs a lot of actors to fill the roles of less attainable beasts. Some of these "Scareactors" however take their role a bit too seriously... 

[jack0088]

looks very promising. subscribed to your twitter:)

[propapanda]

Update 1

First up: Gotta say, I'm terrible at this blogging thing. Really need to force myself to update on a more regular basis! Since my last post I've managed to find some time to create several new background scenes that I'd like to show here today.

The first one is an opening shot that shows the protagonist's home somewhere in suburban America. I reckon I’ve captured that early 90s feel pretty well in this one:

As for the engine, I haven’t been doing much on that front lately. My main focus was on prototyping graphical assets to make absolutely sure I can pull this off... nothing worse than having developed the perfect game engine only to realize that your assets just won’t be able to keep up with the images in your mind!

[foofter]

Cool style! So these are 3D environments rendered to look this way? The house almost looks like a photo with a filter applied in Photoshop. Great work on the graphics so far!

[propapanda]

Cool style! So these are 3D environments rendered to look this way? The house almost looks like a photo with a filter applied in Photoshop. Great work on the graphics so far!

Thanks! Yep, the backgrounds are 3D environments except for a few elements and details that I add in post (e.g. the foreground cars in this case and some the trees in the back). Here's what it looks like in my 3D editor:

The plain renders straight out of the editor actually aren't all that pretty... there's a ton of post processing going on.

[foofter]

Dang, that is pretty impressive then, and seems like a lot of work.      

[propapanda]

Dang, that is pretty impressive then, and seems like a lot of work.    

It is a lot of work! But it's fun too. And a nice distraction from my day job where most of the time is spent in meetings coding

Though to be fair, I should point out that I don't create all the models myself; I'm not that keen on 3D modelling, so I tend to purchase assets wherever it makes sense. I'll then usually go in and strip the assets down, add details, re-texture everything and apply custom shading and lighting to better integrate things in my scenes.

[miguli]

Looking promising, leaving reply to follow this devlog. 

[propapanda]

No pretty pictures today. Instead a more technical post looking at the engine design I've come up with for Fatal Attractions. The astute reader may recall me mentioning previously that the game is built upon the LÖVE framework. One of the reasons I went with this lesser known framework instead of a full-fledged and commonly used engine such as Unity is that it offers me as the developer a lot of freedom; I can pretty much design the game exactly the way I want it. I'm not forced to follow anyone's conventions or opinions -- 'cause that's how I roll.

I’ve opted to go with an entity-component-system-based approach. Everything you see in the game (as well as a lot of stuff you don’t see) is considered an "entity".  
Of course an entity by itself is meaningless and devoid of function; it’s just an empty entry in a Lua table. Only by adding components we can fill entities with life. And depending on which combination of components we apply, an entity can become something entirely different. For example, you take a simple sprite, add a "follow mouse" component and voilà: You've created a mouse cursor!

Once you’ve come up with a reasonably sized library of components, you can mix and match them to combine all sorts of functionalities for your game. In Fatal Attractions a Player object gets initialized with the following set of components:

Code:

Player: -> 
  with Entity.new!
    \add Components.Actor
    \add Components.Animation
    \add Components.Color
    \add Components.Direction
    \add Components.Pathfinder
    \add Components.PersistentStorage
    \add Components.Pivot
    \add Components.Player
    \add Components.Render
    \add Components.Shader
    \add Components.Sprite
    \add Components.Transform

Now you must know that components are just containers. They're pure data and do not provide any functionality of their own. An obvious example of this is the 'Transform' component I'm using above. Internally it looks like this:

Code:

Transform:
  x: 0.0
  y: 0.0
  z: 0.0
  rotation: 0.0
  scale: 1.0

   
Now it would pretty neat if we could get these bundles of data to do something actually useful. That’s where the systems come in. Each system defines a combination of components it can operate on. Here’s the header of my sprite system:

Code:

class Sprite extends System

  requires:
    Color: true
    Pivot: true
    Sprite: true
    Transform: true

   
An entity might have many more components. But as long as it has at least a Color, Pivot, Sprite and Transform component, it will be processed by the above-defined sprite system. And as you’ve probably guessed, the sprite system is in charge of drawing sprites to the screen. Each system reads the data from its required components and does something with them. In this case, the Sprite system reads a texture from the Sprite component and draws it at the coordinates stored in the Transform component.

Events
The drawing happens once every frame. But not every system can draw things. Some systems just want to do something every second frame. Or after a new stage was loaded. Or perhaps only when the mouse hovers over an object. Or when the player tried to talk to another actor…  

These various cases are handled by an event queue. In fact the entire engine is based around this concept: Whenever something happens in the game, an event is fired. Any and all subscribers are then informed that this event has taken place. Depending on the event they may be provided some extra details  --- e.g. which character just moved, which stage was loaded or which object was picked up by the player.  

Subscribing to events is super-easy inside a system. Simply define a method with the name of the event:

Code:

onMouseUp: (x, y, button) =>
  -- do something

onStageLoaded: (stage) =>
  -- do something

onExitStage: (stage) =>
  -- do something

The same idea also works for the game's actors in the story description file. For example, say we have a dog on the screen and the player is supposed to be able to interact with said canine beast. Then in the story script I might add something like this:

Code:

Dog.onTalkTo: =>
  Player\say "Who’s a good boy?"
  Dog\say "Arf!"
  Player\say "That's right, you're a good boy!"
  await Dog\animate "Excited"
  Cat\say "Meh."
  
Bone.onPickUp: =>
  Dog\say "GRRRRR!"
  
Dog.onGive: (item) =>
  if item.name == "Snack"
    Dog\say "Arf! Arf"
    wait "1s"
    Dog\goto Bed
  else
    Dog\say "GRRRR!"

Of course there are way more commands available to pick from in the actual story engine. But this should give you an idea of how complex interactions can be stringed together by using only simple commands.

The beauty of it is that the story script reads less like your typical programming language and almost like a movie script. This simplicity makes it really easy to prototype new ideas or just try something out to see if it works without having complex syntax get in the way.

MoonScript
You may be wondering what strange programming language I’ve shown above. All code examples are in a language called MoonScript. This is a dynamic scripting language that compiles into Lua. I don’t think I’ve ever come across a more concise yet easy to use language. It’s an absolute joy to develop games in.

[nathy after dark]

Replying to follow and take a closer look later—from the 2-second glance just now, the visual style looks unique and interesting! Reminds me of FMV point-and-clicks like Phantasmagoria.

[propapanda]

Reminds me of FMV point-and-clicks like Phantasmagoria.

Good point! Now that you mention it, some of the shots kind of remind me of Phantasmagoria as well. Interesting coincidence because Phantasmagoria wasn't on my list of inspirations at all, unlike the earlier Sierra games such as Gabriel Knight or King's Quest.

In fact I didn't even play Phantasmagoria back in the day as I was still busy with the old LucasArts adventures. Also our PC was kinda rubbish and probably couldn't have handled it. But I do remember seeing the game in the magazines and thinking it looked absolutely amazing!

Sadly, looking at Phantasmagoria on Youtube today, you can't help but notice the game has not aged all that well. While the 3D backgrounds are pretty well done for the time, they clash really badly with the FMV actors. I do hope I can do better than that in my game...

[propapanda]

When I started developing Fatal Attractions, the idea was to have the game be "authentically digital". That is to say we'd have crisp, low-resolution pixel art. A palette of less than 256 carefully picked colors. Transparency would be an entirely binary matter. A purely digital soundtrack. Basically everything would be just like it was back in the day.

Sadly, as my pixel art skills turned out to be sorely lacking I eventually pivoted to the more-photorealistic-yet-still-thoroughly-retro style the game exhibits today. If I wasn't going to capture the essence of early adventure games by mimicking their style, by Jove then at least I'd promote the spirit of the times by setting the game during the early 90s!

But... something was off. The sets and overall style were pretty retro. That couldn't be it. The resolution of the artwork was retro but also a bit low-ish, which admittedly does turn some scenes into a pixelly mess. 

So what could it be?

With the above in mind (and some extra computational power under my belt) I made a few stylistic adjustments and came up with this:





So what's changed? For one, the artwork's resolution has doubled. And you probably did not fail to notice that I'm experimenting with a faux VHS post effect to really sell that 90s look

Not sure I want to have the entire game running with this effect as it might get irritating after a while --- in fact, it was fairly irritating to just mock it up. It'll definitely need to be toned down a bit. 
Though I suppose it could also be used for dramatic effect, similar to how Eternal Darkness messed with the player's (in)sanity.

But I think the look captures the spirit of early 90s well enough now.

[propapanda]

Working on the engine at the moment. That and the VHS Look post-processing shaders have been keeping me busy lately. It's hard to find a good compromise there: On the one hand I want the game to have the authentic look of an old VHS tape that's been watched too many times. But then again I've put so much work into the background art and this gets all but ruined by the VHS artifacts.

Today though inspiration struck and so I revisited an older scene that'd been sitting idly on my hard drive for a while. No creepy theme park is complete without a Haunted Mansion, so here's a first look at what to expect:

Here I'm trying to recreate that somewhat over the top spookiness of Disney's Haunted Mansion. Of course our heroes will have ample opportunity to explore the mansion and mingle with its inhabitants -- whether they want to or not...

Next up I'll need to focus on character animation. Definitely not my favorite part of the process. But it's got to be done, I suppose.

[propapanda]

Psst... wanna hear a secret? In an earlier incarnation of Fatal Attractions the game had a different name: It was known as Libera Me.  
Libera Me never really got past the tech demo stage. But a key element of the game's tech was its 2.5D compositing:

The idea here is to have pre-rendered background images which contain information about each pixel's depth. Through some clever shader tricks this allows us to perform several graphical feats that usually require full 3D scenes:

* Depth compositing
* 3D lighting
* 3D shadows

This concept was used heavily in the earlier Resident Evil games.

I've decided to revive this technology for Fatal Attractions. The cool thing is that the entire background scene as well as the character are just billboard sprites; that makes for a whopping 4 (!) polygons being rendered in the clips below! The 2.5D depth compositing is implemented via custom shaders and provides correct depth occlusion, as seen in this short clip when the character walks towards the background and ends up behind the tomb stones:

Traditionally this kind of depth compositing would require a fairly elaborate setup of masks and/or occluder geometry. Not so with 2.5D compositing where we get the occlusion for free without any extra effort.

But wait, there's more! Here we can see a real-time directional light casting shadows from a 2D sprite onto a 2D background... and thanks to 2.5D depth compositing we get correct 3D shadows just like in a proper 3D scene:

Of course we're not limited to static light sources -- we can even move a light around. Here we have a dynamic point light moving around and lighting up just the appropriate region of the scene. Also note how the character sprite casts proper shadows onto the background geometry.

I plan to use the dynamic 2.5D lighting to allow the player to investigate using a flash light as well as other sources of light. Of course dynamic shadows will also have their place.

Unfortunately the video compression made a bit of a mess of the image quality, so here's how the background render is originally meant to look:

[nathy after dark]

That 2.5D stuff is insane. Thanks for posting and blowing my mind. I still haven't taken the plunge to understand 3D graphics, but I'm wondering, since there still must be a good deal of shader math involved in pixel depth-based calculations, how much computational savings do you really get by doing it this way? Is the main advantage performance boost, or is this also easier to make?

By the way I need artists for an episodic horror anthology VN, and I like your style! Would you be interested in a paid-upfront gig making just a small number of static images? Here's more info.

[swordofkings128]

Wow this looks really good! I really love those screenshots of inside the house and how much clutter and stuff there is to it, it gives a nice lived-in look which is extremely time consuming to do and requires A LOT of modeling! I can really appreciate the effort there.

[propapanda]

That 2.5D stuff is insane. Thanks for posting and blowing my mind. I still haven't taken the plunge to understand 3D graphics, but I'm wondering, since there still must be a good deal of shader math involved in pixel depth-based calculations, how much computational savings do you really get by doing it this way? Is the main advantage performance boost, or is this also easier to make?

The shader math is pretty much negligible: It's basically just a texture lookup and a couple multiplications. In the grand scheme of things I doubt it has any measurable performance impact at all.

The main advantages of using the 2.5D compositing technique as I see it:

• High performance even on mobile devices.
• 100% consistent look across all platforms.
• Assets are much smaller. Just a couple bitmaps per scene -- no 3D models, no huge textures.
• Lots of control over the look: I can go in and edit the 3D renders to my heart's content, which simply isn't an option with real-time 3D.

Of course the major disadvantage is that perspectives are fixed, so camera movement is severely restricted. As my characters are flat 2D sprites, I can't get too creative with the camera angles before things start falling apart.

By the way I need artists for an episodic horror anthology VN, and I like your style! Would you be interested in a paid-upfront gig making just a small number of static images? Here's more info.

Thanks, really appreciate it! But at the moment between my day job, this project and family commitments, I'm just too busy to take on any other work.

Wow this looks really good! I really love those screenshots of inside the house and how much clutter and stuff there is to it, it gives a nice lived-in look which is extremely time consuming to do and requires A LOT of modeling! I can really appreciate the effort there.

Thanks! It's true, a lot of effort went into the set dressing of those shots. In fact every now and then I revisit them to toss in some more stuff.