If you are not already aware, SFEOS will be an open source turn based game being built to eventually run within the EOS blockchain. The game itself will not be owned or operated by a game studio. Instead a DAC (Distributed Autonomous Community) of players will vote to use the self funding budget to continue it's development beyond what we are providing to get things rolling. EOS is a platform for developing distributed apps (Dapps) and promises to create tools to help traditional web developers build blockchain apps. Games such as SFEOS will be stress free ways for people to build mental models around things they might not fully grasp right away. This game will allow for a very low barrier of entry for people to enter into the Crypto world, and also allow players to learn the concepts of smart contracts, distributed apps, and distributed autonomous communities. You can read more about my thoughts on EOS here, and follow their announcements at @eosio.

Part 1 - From Blue-Sky to Spreadsheet Specific
Part 2 - The Grand Idea
Part 3 - Breaking Down the Core Game Loop into Nouns and Verbs
Part 4 - Drilling Down into the MVP
Part 5 - The Game Canvas - A Web Scroller Game ~ You are here...

A Web Scroller Game

The user experience for any kind of program is one of the most important keys to user adoption. It doesn't matter if you're building a game, an enterprise web app, or even a crypto wallet, if people struggle to use the software they are probably not going to use it for long. If the software is absolutely necessary and the app has some kind of monopoly, such as the only version of a crypto wallet, built by geeky coders and number crunchers, the users will use it and grit their teeth along the way. With UX (user experience) as a top priority for SFEOS in mind, and considering a "sweat equity" volunteer budget, we are going to be trying something quite different than games you might have seen and / or played in the past.

This post is going to take a bit of imagination. If I use the term "Side Scroller" in the context of game design, most people know what I'm talking about. SFEOS is NOT a side scroller game. Instead I'm calling this a "Web Scroller" game. If you have seen something like what I'll be describing, I'd love to know about it for a frame of reference.

The Webpage as a Canvas for Interactive Gaming

Tim Berners-Lee was the genius behind what we now call the Internet. The web was once a bunch of text on the screen that had hyperlinks to connect to more pages with more text. It was equivalent to the printed page, digitized with "easy" navigation. Then came animated gifs, flash and media players. People went bonkers and created some really bizarre stuff. What was once a tool for editable documentation sharing, became a platform for global change. In the last few years the browser technology has embraced design as a first class citizen on the web. Rather than styling being a "making things pretty" afterthought, it stands at the forefront. Web Designers are encouraged to let their artistic selves free. Webflow has done a pretty good history on the Design History of the Web. You can see that here.

Parallax Scrolling

Sites do not have to be boring. With tools like parallax scrolling at our disposal we can create some amazing UI. We plan to use it for an interactive game.

An example of beautiful parallax scrolling (on the desktop) is at the top of the Firewatch game website.

SFEOS will be a game played in the browser, but not in a frame within the browser. It will be a game designed with the web browser as it's platform. A user will interact with web controls and scroll through content, and as the user discovers content they are able to experience the story in a beautiful way, as the hero of their own story. Now I don't know if we will be able to create something as amazing as this site, but if you have not seen "The Boat", please take a few minutes to take in the grandeur of this work of art, then pop back in here and we will continue...

Scrolling

Ever since mobile users have surpassed desktop users, UI designers everywhere have adjusted accordingly. And with so many users on smaller screens, scrolling is becoming more of a necessity: the smaller the screen, the longer the scroll…

...scrolling was only seriously considered as an intentional design pattern after advances in Javascript and CSS. Before that, it was much more difficult to make scrolling "sexy" through visual storytelling. As you might imagine, a long page full of text (interrupted by occasional images) isn't a very engaging UI layout.

...once you start approaching the long scroll as a canvas for illustrating a beginning, middle, and end (through graphics, animations, icons, etc.), then you start to see it's film-like power in capturing user attention.

~ from "The New Rules for Scrolling in Web Design"

The Game's Core Loops as Interactive Scripts

This is where your imagination is going to have to work overtime as I try to describe the gameplay in the form of scripts. Hopefully you have Watched at least a few minutes of "The Boat" to draw some inspiration from. If you haven't yet, please just check it out, then come back.

Now imagine SFEOS; In the background there is a humming of the ship. The AI talks to the player. Let's look at how a captain might experience different pieces of the core game loop.

Scanning

A menu item is selected that brings up a sector map for the player.

"Where would you like me to start the scan captain?"

Image of available sectors with available data on each. Perhaps a map with known sectors. The adjacent sectors from were the ship is currently at are selectable.

"What is the maximum amount of time you would like me to run the scan."

An input or slider will appear that might highlight areas of the scan as the auction changes.

If more than 20% of available actions.

"That will use over 20% of our reserves and leave us with limited energy to complete any desired actions. Are you sure you wish to continue captain?"

A confirmation button and an input for new amount of time.

Once confirmed a loading icon will appear. Once loading is complete an invitation to scroll down will replace it.Scrolling will animate a scanning process.

"The results of the scan are as follows:"

• Sectors show on the map. Those in range will show up clickable.
• Intractable items are marked with icons but not much data will be available.
• Clicking on the sectors will bring up action menus

Selection of a sector opens a context menu.

• Send a Probe
• Warp to Sector
• Set as Target Sector

The Ship AI as the Player's Hand Holder

The awesome thing about having a ship AI as a main feature of the game, is the players always have a helper at their beck and call. They never have to get stressed about the gameplay. Next to each context menu item might be a button to learn more.

Learning More About Sending a Probe

"Sending a probe will require us to use single sector jumps in order to stay in contact with the probe. The probe will give us detailed scanner data from each sector it travels. The maximum contact distance is 20 sectors. Sending a probe is usually done in conjunction with setting a target sector. Would you like me to set the target sector and launch the probe now?"

Learning More About Warping to a Sector

"I can put you and the crew into a state of suspended animation and vacuum storage, while I use the warp drive to transport us to the target sector at speeds that are normally unattainable for human biology. The chances of survival are well within risk tolerance. Would you like me to initiate the process?"

Learning More About Target Sectors

"When a target sector is set, I can calculate the most efficient route while we jump along the sectors and allow researchers to explore along the way. You can make coarse adjustments as you would like, and set new target sector waypoints as you see fit. Would you like me to set sector xyz as our target sector now?"

Initiating Jump

"Initiating jump to sector xyz."

An animation or parallax scroll effect will be added.

"Scan results show nothing of interest in this sector."

or

"Scan results show…"

Initiating Warp

"I have instructed the crew to enter their cryo units while I initiate the warp drive. Your own cryo unit will be activated when we are underway."

Fading into darkness parallax and dreaming of slothicorns. Fading back to consciousness.

"Welcome back captain. I trust you are relaxed and ready to explore."

"Scan results show nothing of interest in this sector."

or

"Scan results show…"

The Potential of the Canvas

I hope you can imagine the nature of the game from what I've described. I hope it's as compelling to you as it is to us. Each action a player can do is "simply" adding a new section to the bottom of the scroll. Think of the archivability and replay scrolls of the gameplay. Each day could be archived and might be loaded for later viewing; A daily captain's log to refer back to, if you will. How cool is that?

As you can imagine, there is a lot of room for creative folks to get involved. Painters (digital and traditional), illustrators, designers, sounds effect gurus, music producers and voice actors. The possibilities are quite broad, but we will have to work within a set of constraints to limit the scope at first.

In Closing

Another beautiful aspect of this, is writing the Game Mechanics PoC (Proof of Concept): It's not required that we have it looking 100% beautiful to see if the game mechanics are enjoyable, though the art and sensory cues will be a big part of making it fun, we can test without a herculean effort. With that being said we still do have a lot of work to do, to make this a reality. @alexandravart is currently working on some of the art for the layout in the days / weeks to come. We are also working on developing our first art challenge to get some new faces joining the team. More on this from her in the coming days.

One more very important thing: because SFEOS is open source, and if this new game design concept takes off, anyone who wants will be able to use the same tools we develop along the way. I look forward to the day when we might see other games of this type all over the web.

Follow for more...