Design Exploration: A Multimedia Network For Lua Developers

It is one of my aspirations to design and implement a multimedia creation and consumption network. I'm grateful to have had this week to exercise that privilege. Special thanks to Nikhilesh Sigatapu who brought an original idea & prototype implementation named Ghost.



The goal of this writing is to present a vision for a set of products that could be built. If everything feels good to the stakeholders, any team can start implementing the vision in the very near future! 🎉



Lets start by establishing some context.

What is our goal?

An easy to access weblike platform for people to play, explore, and develop 2D Lua multimedia easily, quickly and socially.



What is our target audience?

Anyone who plays or create 2D games on their computers.



What are your assumptions?

  • People love to play games, but do not always want to install games.
  • People are actively seeking new games to play.
  • Game developers deserve to be discovered.
  • 2D games are not out of style.
  • People want to consolidate their development tools and would prefer to install less on their computers.
  • People are writing games in Lua and those people deserve a larger audience and more attention.
  • The Lua ecosystem could benefit from people contributing more.
  • There are many non-technical people who want to get into games.
  • Its fun to see what other people are working on.



The Overview

I've created preliminary mocks for the following:



  • A browser like program named ghost-player, where anyone in the world can download it and play games made with Lua with it.
  • A website for ghost-player where Lua multimedia creators can share what they are working on, and upload games for distribution.
  • An editor with a plugin system that allows non-technical people to create games.



My strategy will be to start with the essentials. This will help us from overfitting our beliefs before learning more from the people this platform is trying to serve.



The Ghost Player

Our story begins with a simple way to play games, ghost-player. Usually any experience with a good player (such as VLC Media Player) begins with content you really want to enjoy. Lua games should be no different.



One of my favorite indie projects on the internet is Mother 4. It is inspired by one of my favorite games of all time, Earthbound. Mother 4 is completely free, made from scratch, and will be available standalone on Windows, Mac, and Linux. I describe the work that went into this project as a "labor of love" and more people should get the opportunity to play it when it is finally released.



Lets role-play and imagine you received a text message from a friend:





And because of a program you installed on your machine, a few seconds later... you're playing the game.



    

What Is That?

For people who come from a background of video game emulation, the first mock may not seem foreign. It is an example of a game running in ghost-player. At the first glance, the program may appear to be just a distraction-free way to play games.



Until you decide to press a F5...





  1. F5 may not be the best choice (lets change it). Pressing it returns you to the game you are playing.
  2. The user can sign up or sign in to save their history, access their favorites, and see some updates from other creators they subscribe to.
  3. The "Enter game url" bar allows you to load any Lua game thats hosted on the internet and compatible with the player.
  4. The star icon allows you to "favorite" the game you are playing.



Feels Like An Internet Browser

In retrospect, we are all very lucky. There are a lot of wonderful desktop and mobile browser experiences to learn from. We should learn from these experiences because millions of people successfully use those programs to consume content daily.



Here is what I inferred as the essentials:



  • A URL Bar. The client will have it's own flavor: ghost://
  • A way to authenticate into an identity. Ghost-player & individual games can use the associated information to improve the user experience.
  • Your history of tutorials, examples, and games you've played.
  • Your favorite tutorials, examples, and games.
  • The activity of people you subscribe to. Maybe mother4game.com finally released the game and you didn't even have to open Twitter to find out.



Here is all of that in a mock:



  1. The Menu on the right is hidden until the user clicks "dashboard".
  2. In this sketch, the user has already typed something in to the URL and pressed "play", the logs above represent the loading process (200 means success).
  3. The symbols represent different types of browsable content: tutorials, examples, and games.



Based on the mocks provided, ghost-player could be really effective at getting people to play a lot of content. At this point you may be wondering:



  • How does this product get people to discover this software other than having cool friends?
  • If you noticed ghost:// you may be thinking: How does someone even upload content that can be played?



My answer is a website.



https://<insert cool website url here>

What I love about websites is that they allow anyone to share content very easily. If you build a website that makes it easy to create content, then you also can improve the chances of your software being shared more frequently.



Part 1: The Home Page

I wanted to try an atypical visual design. But I also wanted the priorities to be super clear. So in my first attempt, I came up with this:





  1. It may be hard to convince people that they should download the player immediately without context. Below the first ~400px there are plenty of clickable sections that can lead to engaging content.
  2. "Upload your game" informs the user that this product allows for hosting games.
  3. Arguably, people love to start with tutorials and examples.
  4. If none of the above is compelling, then they can lurk our community and read real conversations.
  5. "Games" should still appear above the fold on most browsers..

In our last attempt to be captivating, here is what the visitor will see as they scroll down the page:





  1. Featured sections are like Nintendo's Seal of Quality back in the 90s.
  2. I wanted to provide an example of customizations looking reasonable outside of the "game page".
  3. "Latest" provides a way for all games to attract more exposure.



Part 2: Tutorials & Examples

New users may arrive from tutorials and examples shared over social media. Once they've consumed the information, they may feel compelled to download the ghost-player and that may result in discovery that compels them to stay.



I think people will want to write because well intentioned people generally want to "pay it forward" towards new creators. This product can have a fast and reliable writing experience to encourage this.



Here are rough mocks of a tutorial and example:







  1. If the writer has uploaded their lua files to our servers, you can play that example using our ghost-player.
  2. Anyone with an account can write an example or tutorial and save it to their profiles.
  3. This product can also be designed with categories such as: work in progress or a developer journal.



Part 3: Game Pages

If our website is designed well, creators should want to use our platform to distribute their games.



This product should avoid restricting philosophies and allow creators to freely express themselves. Therefore when a creator uploads a game the product can provide publish options that allow them to provide the executable. In addition this product should allow users to add customizations such as fonts, alignments and colors.



I took Shrubnaut by Andrew Gleeson as an example:









  1. This page can do a lot more than what is presented here! Let me know your ideas.
  2. I like the idea of adding some icons to the buttons, or a "verified by us" symbol.
  3. Building a decent rich text editor, allows a lot of customizations to be possible.
  4. This product shouldn't make creators worry that the platforms brand will impede on their personal brand.
  5. I want to explore additional features like a donation button and comments.



Part 4: Customizable Profiles

Sometimes you'll discover a really cool creators on the internet such as Vine.



When you do you'll want to be able to look at the work they have done and maybe even discover other creators like them.



The product can start out with customizable profiles that show what games, tutorials, and examples they have published. If you like what you see, you can subscribe to the creator and get e-mail updates whenever they add new content.



Here are two variants of creator profiles.









  1. This page should give creators a lot of options for customization.
  2. Examples, tutorials, and games the creator has published will help the creator gain an audience through our platform.
  3. This page could have more features such as donations, favorites, and activity.



With all of these ingredients, the website can use the web platform to get people to download ghost-player and play games from many creators who know how to make games and related content. But what about people who want to get into game development, does this product have a solution for them?



The Editor

Not being a programmer shouldn't stop you from making cool stuff.



Most developers will be writing code in their favorite editor, whether it be Sublime Text 3, Atom, Emacs, or Vim. But if you're not an active developer those words may mean nothing to you. You may not even know what a Lua file is.



Philosophically, a good editor should improve your understanding of the medium, and help you get better over time. In my attempt to design a non-technical experience, I wanted to start by providing something that didn't feel overwhelming, but exposed the basic functionality that is available to the creator.



Here is what I came up with:





  1. Editors create code that you don't have to directly modify, ever.
  2. I treat Scenes like a synonym for level, world, or stage. A scene feels like the right word that encapsulates a set of entities within a certain context.
  3. The "entity list" represents all of the entities in any given scene. If you click "+ Entity" it will add a new entity to the scene or create a new scene with a new entity.
  4. There are some basic options for hiding grid lines and the background if you have one. You can also play with the units of measurement.



After clicking around a bit you may end up with something like this:





  1. It should be easy for the user to know what they've added.
  2. It should be easy to delete entities.
  3. Snapping to the grid helps keep entities aligned. The editor can add ruler lines that are in popular tools such as Figma or Sketch



The Plugin System

It is my understanding that creators are very peculiar about their tools. Not only are they selective over what they use, they spend time a lot of time customizing their configuration.



In the spirit of allowing people to do what they want, the first version of the editor should be architected with plugins as first class citizens.



Here is an example of what that could look like:





In this example, the user could click on "Enable Sprite Animation Plugin". Afterwards, if they click on any given entity they will be exposed new controls based on the plugins they have enabled.





  1. Drag and drop is supported, as well as hotkeys.
  2. If a user doesn't like a plugin, the editor should provide them a portal (website) where they can download new plugins, or provide tutorials to help experienced creators build their own.
  3. Plugin developers should not have to worry too much about design. A design system should be provided to them for inputs and controls.





Final Thoughts

It was a ton of fun to design a website, a client, and an editor. Please let me know what you think.



There is a ton of influence from the indie game industry that inspired this. Check out the references below for more details.



Thanks for your time! 🙏

References

There are a ton of references, here are the ones that come to mind outside of friends, co-workers, and a life of being a nerd.



Secret Level Bonus Code: Old Concept

If you're still reading, there was an old concept I thought about introducing called a kit.



Take a look:

Could be cool right? :-) till next time.

Hey! My name is Jim and I love to build websites. You can learn more about me here.

icon twitter
icon facebook-official

To reply you need to sign in.