Dev Log: Core Structure Week 1 Check-In

The demo arc planned to be completed this week was included in the previous post here.

 

Art Style Work:

As I suspected, getting fully drafted art styles to work with this week was a lofty goal. And in addition to pushing that deadline back to next week, I am accepting the possibility of not completing the style sheet this coming week. I still think this is an important piece to have, but is far from vital at this stage in development. And getting the skeleton of the game implemented is of far higher priority, and represents plenty of work of its own. That said I am not writing off the possibility either, and will continue to work towards it. Just that it is a very distinctly secondary priority.

Firstly for this week, a more concentrated and considered series of visual inspirations:

Palette:

palette_style.png

Anime and Adventure Time’s environmental art evoke the type of nostalgic, and pleasant tone I feel fits this game. They present an almost storybook-level idyllic environment which I think would work well to reflect Sabri’s (new name I’m thinking of for the main character) outlook.

The environments from Spirited Away are similarly bright, but with a greater variety of color. This is probably a good go-to for any issues making characters stand out from similarly colorful backgrounds.

The comic and art panels below capture a range of colors and textures that I think evoke picture book feeling, and represent a variety styles and uses of bright colors. (all works in this section from Three Panel Soul webcomic)

I like the psychedelic but readable quality of the character shot among the comics. It was an in-progress picture of a more traditionally colored piece. But I think there’s an appeal to it, and leads to…

Color:

monochromatic.png

I found myself really attracted to monochromatic objects and characters, again perhaps drawing from the feeling of a picture book which I went in unconscious of. I also really like the way the edges are done in many of the Three Panel Soul comics: double layered with a light and dark for greater contrast and highlight. Similarly I like Joy’s aura from Inside Out, and how all the characters were depicted as simple, stark shapes, but rendered with a strangely dynamic texture/material on closer inspection.

The Bob’s Burgers shot stuck out for the contrast between relatively realistic character color choices, with mostly monochromatic and garish buildings.

color_blocking.png

And so we get to color blocking. Pretty straight forward, I think The Witness, Hero, and Tron: Uprising all demonstrate how more complex compositions can be made immediately readable with this approach. I would have featured Hero more prominently for a lot of what it does, but had trouble finding images easily.

Shapes:

geomtric_influence.png

For shapes I love the style of Wreck-it-Ralph within his own game setting. The movie does a great job in models and animations of evoking an 8-bit style in much higher fidelity. I don’t think the animations are relevant for my game, but again going back to simplicity and nostalgia I’d like to experiment with rendering complex shapes based on, and blocked out on a pixel-esque design.

body_types.png

I think a lot of these ideas can extend to the character designs too. Here I drew from a variety of Three Panel Soul comics that highlight a range of expressive character figures. And the main ‘normal’ look on display fits with the previously described desire to imitate Bastion’s character design. The bottom two frames here show how these proportions can be used to define an expressive character with even less detail than Bastion.

 

Style drafts:

These are very incomplete, but my intention with these is to mock up an environment and character(s) in at least 3 internally consistent styles based on the above inspirations. They are initially done in grayscale so that they can easily be tested with a variety of palettes. The environments (once complete) will have a building, a ground texture, a tree, and a cloud to try and represent a range of objects common in the game. (though again, currently incomplete due to time constraints)

The right image was done first in a style more familiar to me, and the left is trying to focus on more of the high-fidelity blocky style mentioned above. These will be developed further to place the remaining elements and try a 3rd style going forward.

 

Code Stuffs!

architecture chart.png

Above is the general architectural class diagram (not UML). Each of the oval elements represents a key method or variable of the attached class.

blocking_mock00

blocking_proportions

screen mockup2

The above are a series of quick mockups of how I was originally envisioning the perspective system working, based on 4 layers of linearly angled and scaled areas. The 4th being over the horizon to allow things to rise over it as you approach. The size of this is highlighted with the narrow red box. The black block represents roughly where the player would be centered. The main red box represents the central focus of attention, with the yellow box showing where it would be realistic to include distraction sources for the player. Along with the main red box this effectively represents the actual play space, which is worth keeping in mind as I move ahead in designing puzzles.

Side note: I attempted to use an overlay for the golden ratio where possible to set exact distances after setting them up initially on my own intuition. (visible in middle screenshot)

I also learned some valuable things from how I have the ground tiles blocked out, attempting to represent how they scale into the distance. This appears as though it would be a viable way to do ground textures over this scale with a purely 2D, algorithmic representation.

And with that I went ahead and created an actual Unity prototype for this visual model. Based on how I intuitively mocked up the scaling at distance, I based this model on a parabola. There is a purely internal Z value meant to represent a location within the game world as it relates to the camera position. This is translated into an X and Y coordinate based on the parabolic formula, and an additional Z value is also calculated afterwards for visual ordering, and actual placement of the corresponding object in Unity. The Y position is also offset to approximate the test object sitting at ground level, rather than centered on it. And once the object is far enough its rendering Z value will be set to appear behind the ground and horizon. With the current simple parabola this makes little difference, but will be used in the future when the parabola is shifted upward, and a small dip placed into the tip to create the illusion of the object appearing over the curvature of the horizon. It’s also currently set up so that the speed at which the object moves (synced to the player’s controls) is scaled with how far away the object is, as well as the size. This has the visual effect of enhancing the sense of scale and perspective as distant objects appear smaller, and shift slower with movement than those in the foreground.

That visual prototype can be found here. Its only controls are W and D to move 1 demo object. (start with W to see it more clearly)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s