cutlass case study

content

360

proj

ect 2

winter 2021

Case Study

360

proj

ect 2

cutlass case study

introduction

360

proj

ect 2

winter 2021

Cutlass is a coded browser game made in a “choose” your own adventure style. Though different choices are presented, there is really only one narrative path that the story progresses through and the game serves up a dose of sarcasm if the player chooses incorrectly.

The plot of Cutlass is loosely based on a short story of the same name that I wrote when I was in the fourth grade. The basic plot of a pirate ship being attacked by a sea monster, and a survivor washing up on a deserted island is both simple and classic enough to make a fun little browser game. That and the personal connection of it being a story I wrote almost 13 years ago is what led me to go in this narrative direction.

With the original subject matter being inherently dated, and also considering it would function like a basic video game, I wanted to land on a stylistic approach that encapsulated both, so I quickly landed on low-poly, PS1-era assets. However, though low-poly models fit the tone and style of Cutlass, I found that limited skyboxes, similar to those used in older games haven’t aged well. Low-poly models are charming and retro, but the old methods of lighting are washed out and largely inaccurate, so despite the old style models, I opted to run ray-traced lighting in the scenes to make them more visually interesting, engaging and immersive.

With this being a playable game utilizing retro 3D assets, I feel as though this site

would appeal to a wide range of users; 90s kids who grew up in the time of the PS1 and other low-poly consoles, designers who are interested in the layout of the site and compositions of the scenes, and 3D artists who are drawn to the creation and rendering process of the setpiece models. Overall I think this site appeals mostly to creatives, but would also be lately appreciated by those who enjoy gaming, particular that of the retro variety.

cutlass case study

moodboard

360

proj

ect 2

winter 2021

winter 2021

After quickly landing on a low-poly approach for the game, I began to compile references for assets and imagery. I wanted to embody not only the old school look of the models, but also the overall feel established through old game covers, guides, and advertisements.

Though the vast majority of stylistic influence comes from retro games, I drew a color palette from more modern games to match the new style of lighting I planned to use when rendering out each scene. The palette of varying shades of yellow and dark brown tones are drawn from games such as From Software’s Dark Souls 3, and Bethesda’s Fallout franchise. Both of which are grand examples of modern adventure games.

360

proj

ect 2

cutlass case study

story progression

360

proj

ect 2

winter 2021

In the year 1687, you and your motleycrew of pirates is attacked by a horrificsea monster. With a body larger thanthe ship itself and hide that repelsthe few shots fired at it, prospectsseem bleak. Do you:

“oh, we’ve got a big ol’ hero out here. lookitthis thing, bail out dude. It’ll be short story if you beef it here.”

“yeah that was a joke. we’re gonna give you a little lilsurvival lesson here; water comes first, food next, beach time dead last.”

“come on dude.”

“you come all this way,survived a monster attack,land on a lush island andyou’re not gonna have alook around? I think not.”

Abandonship

Stand yourground

Search forwater

Take somebeach time

Explorefurther

Play itsafe

You swim from the already sinking shipfor as far as you can, eventuallysucumbing to exhaustion. You cometo laying on the shore of an unknownisland. Do you:

You venture inland, hoping to quenchyour already rising thirst, and beforelong stumble upon a slow running river.The environment is lush and the waterfresh. Do you:

Climb downthe chasm

Chickenout

Knowing you can always come backlater, you push through the lush forestryto explore further. As you push asidethe brush, you discover an overgrownchasm you narrowly avoided tumblingdown. Do you:

Not too far into the chasm you find along abandoned store house. Coveredin dense webs and dust is not only caches of gold, but provisions that willbe long stale, but edible; a serendipitousdiscovery. Now aren’t you gladed youopted for adventure?

Above is the original layout for the story progression, including scene text, player choices, and the sarcastic comments presented if the player chooses incorrectly.

This chart was used to determine the arrangements of the scenes, how the story progresses and how the various scenes would be linked together as well

as what choices are presented and how it corresponds to the story and the sarcastic comments.

cutlass case study

wire frames

360

proj

ect 2

winter 2021

winter 2021

360

proj

ect 2

cutlass case study

development

360

proj

ect 2

winter 2021

sculpt time-lapse

With a clear direction in mind I began generating the individual scenes. They each went through a couple iterations as can be seen with scene 1. The monster attack scene began in daylight, but I felt it lacked the proper impact and dramatics so I changed it to a storm scene.

Attached is a link to a time-lapse workflow showcasing how I made the sea monster model. Most of the models in the scenes were made through hard-surface modeling, but a couple, like the monster, were hand sculpted, then remeshed to a low-poly state before they were rigged and animated.

cutlass case study

rendered scenes

360

proj

ect 2

winter 2021

winter 2021

animated scene compilation

cutlass case study

ui mockup

360

proj

ect 2

winter 2021

After rendering out final scenes, I began iterating different UI designs over the top of the animations. This is one of the later designs I produced as I started to come to the end of the development process.

360

proj

ect 2

winter 2021

prototype link

As the UI designs neared completion I began working to form a working XD prototype. The biggest weakness of this prototype however, is the fact that XD doesn’t support animated assets. This meant the prototype was designed using still images, but overall I was pleased with how it looked and functioned so this prototype informed the final site designs.

cutlass case study

rendered scenes

360

proj

ect 2

winter 2021

cutlass case study

content

360

proj

ect 2

winter 2021Final Link

With the scenes rendered out, the UI designs finalized, and the prototype set to act as a guide, I began to work towards the final web site design.

Each scene is a different page, with the story choices acting as anchor links. The gif assets are loaded in as background images, and the UI elements are overlaid in full screen through CSS and a modified skeleton page. The pages function well and everything is linked together properly. All in all, I’m very satisfied with this web page. I think the assets came out well and the pages work and adapt to screen sizes thanks to the skeleton page. I’m pleased and proud of what I’ve created.