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

Login with username, password and session length

 
Advanced search

1325053 Posts in 59768 Topics- by 50988 Members - Latest Member: cassowary

December 14, 2017, 10:21:35 pm

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsCommunityDevLogsFatal Attractions - A 2.5D horror adventure game
Pages: [1] 2 3
Print
Author Topic: Fatal Attractions - A 2.5D horror adventure game  (Read 2319 times)
propapanda
Level 0
**


View Profile WWW
« on: April 01, 2017, 12:33:44 pm »

Hey there,

For the past couple years I’ve been working on and off on this point n’ click adventure game called Fatal Attractions. 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 favourite things.


Story

Fatal Attractions is set in the good old days of the early '90s in a small town in the US. We follow a couple teenage boys as they come across a curious looking girl lurking around their treehouse in the woods. She leads them to a seemingly abandoned theme park just outside of town. Once night falls, the boys quickly realise that the park is not as abandoned as they were led to believe…

Gameplay

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

Graphics

Originally I’d planned to make Fatal Attractions look a lot more like the games that inspired it: Clean 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.

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. The pre-rendered 3D art gives me lots of artistic options to capture a nostalgic look reminiscent of '80s teen movies such as The Goonies or Fright Night. Moreover, the low resolution keeps the amount of time and work it takes to create and render the assets fairly reasonable.

Technical Info

Fatal Attractions is built on the lovely LÖVE game engine and written entirely in MoonScript. At one point I’d ported the whole thing to Unity, but eventually came to the conclusion that it’s just overkill for what I’m doing here.

The 3D rendering is all done in Cinema 4D with tons of 2D post work applied in Affinity Photo.

Current Status

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

- Rooms can be defined and loaded
- Actor’s actions can be scripted using a custom DSL
- The player can click and thereby interact with stuff on the screen
- Path finding works for the most part
- A couple rooms have been 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.fatalattractionsgame.com/

Twitter: http://www.twitter.com/@Fatal_At
« Last Edit: June 23, 2017, 11:14:11 am by fuhehene » Logged

Fatal Attractions: Website - Twitter
AaronB
Level 2
**



View Profile WWW
« Reply #1 on: April 01, 2017, 02:58:36 pm »

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

chrilley
Level 1
*



View Profile WWW
« Reply #2 on: April 01, 2017, 05:38:11 pm »

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? Smiley
Logged

propapanda
Level 0
**


View Profile WWW
« Reply #3 on: April 02, 2017, 02:49:37 am »

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? Smiley
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...  Well, hello there!
Logged

Fatal Attractions: Website - Twitter
jack0088
Level 0
*



View Profile WWW
« Reply #4 on: April 02, 2017, 12:27:32 pm »

looks very promising. subscribed to your twitter:)
Logged

Hobby game developer and Lua enthusiast. Currently working on Cavemen, an 8-bit roguelike.

Engine of choice: Codea | Language of choice: Lua
Fallow me @twitter
propapanda
Level 0
**


View Profile WWW
« Reply #5 on: April 17, 2017, 08:08:35 am »

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:


The next image is my first look into the actual "Screampark". Still some visible grain and noise from the rendering, guess I'll have to redo that. It's not too bad seeing as the render times are fairly reasonable due to the very low resolution of the images. The composition and scenery could probably use some more polish. But I'm mostly experimenting with the color grading here to really capture that cheesy horror movie feel:



Inventory Screen
This afternoon I was experimenting with the GUI for inventory screen. Originally I'd planned to go with a Gameboy as the inventory screen, but unfortunately that didn't work out too well due to its harsh constraints in color and resolution. The game itself is at such a low resolution that it clashed quite badly with the Gameboy's even lower resolution. I might revisit that idea for the options screen, though.
So instead I've opted for a custom hodgepodge of 90s computer interfaces: A bit of Windows 95 with a heavy dose of NeXTSTEP in there as well:


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!
Logged

Fatal Attractions: Website - Twitter
foofter
Level 4
****


MAKE THAT GARDEN GROW


View Profile WWW
« Reply #6 on: April 17, 2017, 10:56:56 am »

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!
Logged


@_monstergarden (game) and @williamzwood (me)
See Monster Garden progress here: https://forums.tigsource.com/index.php?topic=56012.0
propapanda
Level 0
**


View Profile WWW
« Reply #7 on: April 17, 2017, 11:52:16 am »

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.
Logged

Fatal Attractions: Website - Twitter
foofter
Level 4
****


MAKE THAT GARDEN GROW


View Profile WWW
« Reply #8 on: April 17, 2017, 11:57:44 am »

Dang, that is pretty impressive then, and seems like a lot of work.   My Word!   Hand Clap
Logged


@_monstergarden (game) and @williamzwood (me)
See Monster Garden progress here: https://forums.tigsource.com/index.php?topic=56012.0
propapanda
Level 0
**


View Profile WWW
« Reply #9 on: April 17, 2017, 12:10:55 pm »

Dang, that is pretty impressive then, and seems like a lot of work.   My Word!   Hand Clap
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 Smiley

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.
« Last Edit: April 17, 2017, 12:21:11 pm by fuhehene » Logged

Fatal Attractions: Website - Twitter
miguli
Level 1
*



View Profile
« Reply #10 on: April 18, 2017, 12:51:25 am »

Looking promising, leaving reply to follow this devlog.  Hand Thumbs Up Right
Logged
propapanda
Level 0
**


View Profile WWW
« Reply #11 on: April 23, 2017, 02:34:05 pm »

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.
« Last Edit: April 23, 2017, 02:41:10 pm by fuhehene » Logged

Fatal Attractions: Website - Twitter
nathy after dark
Level 4
****


SLC Punk


View Profile WWW
« Reply #12 on: April 23, 2017, 02:36:21 pm »

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.
Logged

propapanda
Level 0
**


View Profile WWW
« Reply #13 on: April 26, 2017, 11:25:19 am »

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! Shocked

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...
Logged

Fatal Attractions: Website - Twitter
propapanda
Level 0
**


View Profile WWW
« Reply #14 on: May 15, 2017, 10:43:16 am »

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 Smiley

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.
Logged

Fatal Attractions: Website - Twitter
propapanda
Level 0
**


View Profile WWW
« Reply #15 on: May 25, 2017, 12:54:45 pm »

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.
Logged

Fatal Attractions: Website - Twitter
propapanda
Level 0
**


View Profile WWW
« Reply #16 on: June 11, 2017, 08:35:15 am »

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:

« Last Edit: June 11, 2017, 09:29:34 am by fuhehene » Logged

Fatal Attractions: Website - Twitter
nathy after dark
Level 4
****


SLC Punk


View Profile WWW
« Reply #17 on: June 11, 2017, 10:28:51 am »

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.
Logged

swordofkings128
Level 5
*****



View Profile
« Reply #18 on: June 12, 2017, 09:05:07 pm »

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.
Logged

propapanda
Level 0
**


View Profile WWW
« Reply #19 on: June 18, 2017, 08:00:43 am »

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.
Logged

Fatal Attractions: Website - Twitter
Pages: [1] 2 3
Print
Jump to:  

Theme orange-lt created by panic