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

Login with username, password and session length

 
Advanced search

1319231 Posts in 59264 Topics- by 50362 Members - Latest Member: Megamenem

October 22, 2017, 06:19:15 pm

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsCommunityDevLogsA Case of Distrust
Pages: 1 [2] 3 4 ... 7
Print
Author Topic: A Case of Distrust  (Read 9853 times)
TheWanderingBen
Level 1
*


Making Games Around the Globe


View Profile WWW Email
« Reply #20 on: June 15, 2016, 02:41:50 am »

CRAFTING THE MAP SCREEN (PART 1)

Sometimes, an idea is so vivid, I just go ahead and create whatever's in my head -- right in the game, the first time, with no preamble. The map screen was not one of those times. I had no clue what to do with it. In these cases, what happens next? Seems like a topic for a devlog! I'll go through the entire process as I make the map, but for today, let's start with getting a clue: making the concept art. I'll keep the text short, and images a-plenty!

My Concept Process

Step 1: Outline Requirements
Sounds like a no-brainer, but without actually listing the gameplay needs, I'll surely miss a subtle detail, leading to fugly clutter later in production. So what is the map screen, then? It allows players to answer two important questions: where can I go? and where have I been?. Pretty simple! Which leads to the following small list of requirements:

  • A scrollable directory with many names that players can look up
  • Items in the directory should be clickable
  • A visual map of San Francisco
  • Buildings on the map -- at the very least, previously visited ones -- should be clickable as a shortcut to looking them up again
  • It all fits with the style of the rest of the game

Step 2: Inspiration
Gathering resources for concept art can be a blast. Quick Google Image searches lead to some great map ideas, including some seriously awesome stylized ones:


But remember, my map needs to show previous locations, and those locations gotta be clickable. Hard to incorporate all that with my minimalist silhouette style! A lot of searching later, the following thumbnails were the most inspiring. Note there are a few era-appropriate maps in the mix -- especially useful since they're both historical and public domain! Also note the directory inspirations -- a mix of era-appropriate for style with contemporary usability. Finally, there are some images from the board game Sherlock Holmes Consulting Detective, my original inspiration for this whole travel mechanic:


Step 3: Concepts and Iterations
At first I toyed with the idea of a 3D map, where I rendered previously-visited buildings as silhouetted 3D objects. This was heavily inspired by the first thumbnail above. So, just for the mock-up, I decided to paint right over it:

Notice that I added a simple directory here too -- showing the names as a scrollable list on a side panel.

There's a good style here, but I don't think it's quite grunge-y enough to match the rest of my art. Let's take away some color and add a few masks for roughness:

This looks better! But there's still something not quite right. The map looks... empty! I mean, there are dozens of buildings rendered, but it still looks like there could be so many more. In fact, I bet I could render a hundred buildings and it would still look barren. And if I took the time to render an entire city (not a small task!) the map would be cluttered and confusing from almost any angle except the top. And would it really add that much to the game for the heaps of dev time required? I don't think so. I'm not liking this 3D idea anymore.

This is where the blueprint inspiration comes in. Let's go back to 2D like the rest of the game!

Much better! I think this style really compliments my other artwork. And I don't need thousands of buildings! Maybe not every one of those city blocks is a location the player can get to, but perhaps they're all clickable, and I can at least write some text for each. Now that's a more efficient way to make the world feel large!

Still, the style got a bit too dark. And that side panel needs some love. Okay, one final mock-up! (Click the image for full size)


Now this I like! A bit lighter on the blacks, a full blue ocean, and a directory that has some style (and an important Search function, that will make the long list manageable). This is a concept I can work with!



Future of the Map

Next up is actually creating this map in the game. I'll probably make the directory panel first, since that's most important for early gameplay, then I'll move onto the map itself. I'll keep you up to speed, and we can see it evolve together!
« Last Edit: June 15, 2016, 02:49:51 am by TheWanderingBen » Logged

tinyDino
Level 1
*


Rawr


View Profile Email
« Reply #21 on: June 19, 2016, 10:50:27 am »

Dude, this game looks stunning! I love the style. Any influence from Papers Please?
Logged
TheWanderingBen
Level 1
*


Making Games Around the Globe


View Profile WWW Email
« Reply #22 on: June 19, 2016, 05:45:38 pm »

Dude, this game looks stunning! I love the style. Any influence from Papers Please?

Thanks for the love! No direct influence from Papers Please, but it's one fine game, and who knows how my subconscious works?!
Logged

TheWanderingBen
Level 1
*


Making Games Around the Globe


View Profile WWW Email
« Reply #23 on: June 30, 2016, 01:29:34 am »

CRAFTING THE MAP SCREEN (PART 2)

The map screen will continue to evolve throughout its development. I took three days to implement the map's directory in Unity, so here are some gifs, where you can already see that transformation beginning:

Day 1 - Basic Screen and The List
At the end of the first day, I had the "map" implemented as a static screen. I populated the map screen's directory with names from a mock address book generator, and I made the list scroll:

You can see the implemented directory is on the opposite side of the screen from the mock-up. I made this switch because of the Notes button in the bottom right corner -- I thought it might be confusing if you wanted to click on a name but accidentally clicked on the Notes, or vice versa.

Day 2 - In-Game Functionality
The second day was all about getting it to work. I had already created a "travel" concept in my Twine story, so I just had to represent it with the Map screen. I created a temporary starting location, then used a basic link to open the map. From there, clicking the name "C.S. Stable" takes you to Stable's apartment:

I again strayed from the mock-up by making the directory's headings in-line with the names. This allowed the names to be larger (easier to read at a proper resolution -- don't worry that you can't read them in these compressed GIFs).

Day 3 - Search Implementation
Scrolling through that list sucked! So on the final day of implementing the directory, I created a search feature for easier navigation. This required almost an entire rework of how I had set up the heading/list generation, and exposed a bug with Unity's button hierarchy, but I still managed it all in a single day, and I was pretty proud of that!




Future of the Map

The Directory is now fully functional! But the whole thing looks ugly as sin! Next week, the directory will get its proper assets imported, and I'll even make the map of San Francisco to stick in the background!
Logged

PetterBergmar
Level 2
**


Animator by day, gamemaker by night. And fridays.


View Profile WWW Email
« Reply #24 on: June 30, 2016, 03:16:48 pm »

Whoa! This looks amazing! I would have been interested only having read the description, but those screen caps look gorgeous!! Keep it up  Hand Thumbs Up Right
Logged

Twitter: @pbergmar
atmadaenygma
Level 0
*


View Profile Email
« Reply #25 on: June 30, 2016, 06:51:00 pm »

I played the demo and must say your level of detail and attention to quality is inspiring.

You are doing a good job in taking a fresh look in a genre that needs love and attention. I do not play this genre much but your game has made me want to look more closely at it.

revolutionizing quality.
Logged
TheWanderingBen
Level 1
*


Making Games Around the Globe


View Profile WWW Email
« Reply #26 on: July 01, 2016, 07:03:23 am »

Cheers! Thanks for the motivation!  Beer!

I was thinking about writing a post about my schedule -- how I organize my tasks and where I plan to be by the end of the month. I know I like to see other devs' planning strategies, but I wonder if it's too dull for a devlog? Would anyone be interested in something like that?
Logged

bjxrn
Level 0
*



View Profile
« Reply #27 on: July 03, 2016, 06:53:36 am »

This is looking lovely. A game that takes inspiration from Phoenix Wright, 80 Days and SH:CD? Yes, please! And I really enjoyed reading about your process creating the map and directory. Thanks. Smiley
Logged
TheWanderingBen
Level 1
*


Making Games Around the Globe


View Profile WWW Email
« Reply #28 on: July 11, 2016, 09:29:15 pm »

CRAFTING THE MAP SCREEN (PART 3)

This week, I made a part of the San Francisco map and its navigation controls. I had to deal with modeling, shaders, and performance trouble -- things I have little experience with, but learned while working. Here's a quick rundown of the events:

Milestone 1 - Shapes and Shaders
Each building on the map had to be selectable, and the map needed to pan and zoom. The style also prescribed an outline for each building. With those constraints, I thought the most obvious choice was making basic shape models in Blender and writing a shader to outline them. If I had to redo it, it'd be a breeze, but making the correct shapes, normals, and shaders took longer than anticipated. In the end, though, the results were good! Here are some screens of the progress (Click for full size):



Milestone 2 - Navigation
A static map is okay, but for the world to feel large, panning and zooming the map are necessary. I also needed to make each shape a selectable button -- and, once selected, I needed to center the camera on it. It was a lot of work, but here are the final Zoom and Focus animations:


Milestone 3 - Interface Integration
Up until the map, the rest of my game exclusively ran in Unity's GUI system. The map, though, is 3D models. This led to a few problems with masks:


Thankfully, most of these problems were easy to solve, so this was the quickest milestone. Unfortunately, the next milestone was less merciful:

Milestone 4 - Optimizing the Map Directory(!)
The most unexpected milestone of all! Since I'd only ever run the map's directory on its own, I hadn't noticed how inefficient it was. But, by panning and zooming the map, I could see that this screen chugged like a college freshman. Through the Unity Profiler, I saw that most of that time was spent dealing with the EventSystem -- i.e.: updates to the buttons themselves! It took a while to solve, but apparently, this is only a problem when the buttons are in a hierarchy! I still have no idea why that's the case, but it meant I had to rewrite the search functionality. Between that, making my shaders more efficient the more I learned about them, and batching or removing unnecessary updates, I managed to move the screen from a crawling 1-2FPS to ~25FPS on my two year old Macbook, with over a thousand directory buttons and map tiles. I still have a few tricks up my sleeve (compressing the images better, pre-loading assets, and loading/unloading the buttons in a clever way) so I'm confident I can get it running 30+ FPS on most hardware with however many locations I'll eventually want to use. Here's a static image of the map, in game, right now!




Future of the Map

Now the directory is done (and efficient!) and the map moves. Next, I'm going to take a long and deserved break from the map screen and focus on story writing. Once I get back to it, there are two things left to do: tie the story/directory to the map buttons themselves, and actually create the entire map of San Francisco. Wish me luck!
« Last Edit: July 11, 2016, 10:12:28 pm by TheWanderingBen » Logged

TheWanderingBen
Level 1
*


Making Games Around the Globe


View Profile WWW Email
« Reply #29 on: July 12, 2016, 07:06:21 am »

This is looking lovely. A game that takes inspiration from Phoenix Wright, 80 Days and SH:CD? Yes, please! And I really enjoyed reading about your process creating the map and directory. Thanks. Smiley

I missed this post! Thanks for the support Smiley
Logged

craigz
Level 0
**


human.


View Profile WWW
« Reply #30 on: July 20, 2016, 05:51:10 pm »

AHHHH my gosh this is SO cool looking! Absolutely love the concept too! :D :D keep up the energy!!!  Screamy  Beer!

CRAIGZ :D :D  Hand Clap
Logged

samloeschen
Level 0
**



View Profile WWW Email
« Reply #31 on: July 20, 2016, 09:46:44 pm »

Wow, I'm super into the style you have going here. Concept seems cool too. Posting to stay updated, keep up the good work
Logged

Programmer/Artist for Remote Games.
Currently working on Silent Earth.
TIG Devlog | Twitter | Itch.io
TheWanderingBen
Level 1
*


Making Games Around the Globe


View Profile WWW Email
« Reply #32 on: July 24, 2016, 07:09:48 am »

Thanks for the love! Coming here and seeing more support for the game is wonderful -- every single time! You guys are awesome Smiley

I've been writing the story the past couple weeks, so there hasn't been much to post about. I'm mulling ideas about how to update my story progress without spoiling the plot -- and if anyone has any more thoughts, I'd love to hear em!

For now, here's a work-in-progress of the first location in the game: the detective's apartment. I made it over yesterday and today, and was hoping to get it done by the end of the day, but, alas, life finds a way. Almost complete, though -- I just want to add a couple more items to the scene and then texture and colour it.


EDIT: I should mention the text in this image is just taken from the demo as a placeholder -- no story here yet!

The next few days I'll be taking a "long weekend" trip to Singapore (advantage of working for yourself: weekends happen whenever! woohoo!). I won't properly get back to anything until Thursday or Friday. Hopefully this scene can be finished and implemented for the next #screenshotsaturday!
« Last Edit: July 24, 2016, 07:17:25 am by TheWanderingBen » Logged

PetterBergmar
Level 2
**


Animator by day, gamemaker by night. And fridays.


View Profile WWW Email
« Reply #33 on: July 24, 2016, 03:01:47 pm »

Nice! It would be cool if you could share a few lines if writing here and there without spoiling the story. Like a teaser, to show some of the style and ambience!
Logged

Twitter: @pbergmar
TheWanderingBen
Level 1
*


Making Games Around the Globe


View Profile WWW Email
« Reply #34 on: July 30, 2016, 05:06:25 am »

Just getting back into the swing of things after a weekend trip. Played around with a lot of colours and masks for the apartment scene. Here are my top five, with the large one my current favourite:





Logged

TheWanderingBen
Level 1
*


Making Games Around the Globe


View Profile WWW Email
« Reply #35 on: July 30, 2016, 05:10:40 am »

Nice! It would be cool if you could share a few lines if writing here and there without spoiling the story. Like a teaser, to show some of the style and ambience!

That's a good point! A lot of the writing will be about things you can click -- most of which is just flavour. I'll share a few tidbits from those once I get into it. Great advice man!
Logged

nathy grrrl
Level 4
****


SLC Punk


View Profile WWW
« Reply #36 on: July 31, 2016, 03:31:32 am »

Replying to follow. Gonna go back and catch up on the log when I get the chance!  Coffee
Logged

Babar
Level 0
***



View Profile Email
« Reply #37 on: July 31, 2016, 03:38:19 am »

Same here, just played the demo, got hyped, and now I want to play Phoenix Wright or Aviary Attorney because I can't play this :D
Logged

THE INVISIBLE HAND - A Game about Traders
Facebook - Twitter
pturecki
Level 0
***



View Profile WWW Email
« Reply #38 on: August 02, 2016, 08:29:06 am »

Really interesting art style!
I haven't played in the demo yet so I can't write about gameplay but from I see here it looks interesting too Wink
Logged

Rarykos
Level 1
*



View Profile WWW
« Reply #39 on: August 02, 2016, 12:47:49 pm »

Looks amazing!
I've been waiting for a good detective game since the beginning of time, even worked on one 8 years ago, and this one looks so promising, I hope you will pull through and finish it!

The style reminds me of DEVICE 6, certainly the colours give off a similar vibe.

Keep going! Smiley
Logged

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

Theme orange-lt created by panic