<img class="wp-image-4141 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b39d222bc0ace8899a0461_1.gif" alt="R Shiny Game" width="1600" height="819" /> <h3>Table of Contents</h3><ul><li><a href="#possible">Is it possible to build a video game in R Shiny?</a></li><li><a href="#concept">Concept: Card Swiping</a></li><li><a href="#structure">Project Structure: CSS, JavaScript, and R6 Classes</a></li><li><a href="#result">Final Result</a></li><li><a href="#resources">Resources</a></li></ul> <h3 id="possible"><b>Is It Possible To Build A Video Game in R Shiny?</b></h3> For the last two years, RStudio has been organizing a competition to showcase the power and flexibility of Shiny as a framework for creating applications. Lately I’ve been devoting my career to making Shiny apps more beautiful at Appsilon, and this year I decided to take part in the contest. However, I wanted to do something a little bit different... At that moment a question popped up in my mind: Would it be possible to build a game using R Shiny, even as a prototype? Could it actually be playable and enjoyable?  Shiny has been historically used for data-driven applications and as a rapid development tool, but games have been done in all sorts of languages and frameworks before. Not only that, but the ingredients were all there: A way to build UI, something to keep game state, and the ability to read input from players and update the UI accordingly.  There have been attempts to make <a href="https://deanattali.com/blog/shiny-game-lightsout/">simple Shiny games</a> as early as 2016, but I wanted to try something more ambitious. The more I joked around with the idea the more it actually seemed doable. Let's find out if I was right. <h3 id="concept"><b>The concept</b> </h3> My initial idea was simple. I wanted it to be a slow-paced game that you could play on desktop or mobile, since I also wanted to explore building responsive UIs in Shiny. I went with a card swiping game where swiping in different directions would affect the game in different ways. These choices would then influence some metrics, and the player would juggle decisions to keep those metrics at optimal levels. <img class="size-full wp-image-4163" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b0221cfb4af0620514b1bf_Screenshot-from-2020-05-06-10-28-16.webp" alt="R Shiny Video Game" width="1919" height="982" /> <em>A static, early version of the game.</em> I decided it could be fun to put the player in the shoes of a fictional world leader whose decisions would influence the state of the world. Your job would be to balance the economy, environment, and public opinion of your performance as an all-powerful decision maker. If any of those got to zero, game over! <img class="wp-image-4146 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b0221e0aa7e7983a505e06_Screen-Shot-2020-05-05-at-6.30.25-PM.webp" alt="Shiny Game Metric" width="2762" height="210" /> <em>The player balances three metrics: Wealth, Opinion, and Environment</em> I also decided it would be interesting to have a separate value to track how evil you are. Something that wouldn't lose you the game but provide small benefits or hurdles depending on your behavior. Thus the Karma meter was born. <img class="wp-image-4143 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b39cb8deb80fd56833c0b9_3.webp" alt="R Shiny Game Karma" width="893" height="528" /> <em>The Karma Meter (Left)</em> <p class="c-mrkdwn__pre" data-stringify-type="pre">I imagined it with a retro feeling, so i went with <a href="https://nostalgic-css.github.io/NES.css/#">NES.css</a> for some of that 8 bit nostalgia. I also really wanted to show a map based on the metrics, `leaflet` was an easy choice in this case given how popular and easy to use it is.</p> <img class="size-full wp-image-4164" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b0222122f94709a7bfd652_poc.gif" alt="R Shiny Game POC" width="1913" height="978" /> <em>The proof of concept in action</em> <p class="c-mrkdwn__pre" data-stringify-type="pre">With most of the research and a solid proof of concept behind me, it was time for implementation! I wanted to have a very clear and easy to follow project structure, while at the same time making it simple for anyone to pick up and expand upon.</p> <h3 id="structure"><b>The project structure</b></h3> When it comes to technologies, HTML, CSS, and JavaScript would be the bread and butter for the front-end. Libraries like `htmltools` and `<a href="https://appsilon.com/how-to-make-your-css-awesome-with-sass/">SASS</a>` were obvious choices since I was going to build a lot of these components by hand. This would also let me easily include JavaScript for more complex browser behavior. For the server components, I decided to structure them in their own individual `R6` objects, inside `modules`. If you aren't familiar with R6, it's an Object-oriented programming approach for  encapsulating methods and values into classes that can then be instantiated as separate objects, meaning each object will have its own methods and state. It's a different approach from functional programming, but very commonly used in other languages. Be sure to check out Marcin Dubel’s helpful post about R6 classes. <img class="size-full wp-image-4154" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b0222327d7e18d98569fa8_Screenshot-from-2020-05-06-12-38-36.webp" alt="A diagram " width="1249" height="413" /> <em>A diagram of the project structure</em> With an idea of what I wanted to work with, it was time to actually build the thing. So I started going over a list of the required components: <ul><li style="font-weight: 400;"><b>Data Manager</b>: Responsible for loading and providing data. Since I wanted to be able to create a lot of possible card combinations, I created a small template engine and used a google sheet as my database. This would allow me to change / add / remove cards or options whenever I wanted, since the data manager would always read the most recent data when a new game started. If you're interested how the data is saved, you can check out the spreadsheet here: <a href="https://docs.google.com/spreadsheets/d/1LwIPKAxbKvuGyMKktcTVuYZbTda0WMQxmNMhxqaQhGg/edit">https://docs.google.com/spreadsheets/d/1LwIPKAxbKvuGyMKktcTVuYZbTda0WMQxmNMhxqaQhGg/edit</a></li><li style="font-weight: 400;"><b>Deck Manager:</b> This would be responsible for generating cards and showing them to players. It ended up being responsible for the UI of the cards and for generating new cards based on game state, current karma values, and a bit of randomness making heavy use of `sample` to pick the card template, values and intensity (card intensity influences how much the decision affects the different metrics).</li><li style="font-weight: 400;"><b>Metrics Manager:</b> Mostly responsible for the visual part of the current game state. It uses the state manager values as reactive values to keep the UI up to date with the current state of the game.</li><li style="font-weight: 400;"><b>State Manager: </b>The heart of the game, being composed mostly of reactive lists and support functions for checking game state changes. For example, checking for game overs.</li><li style="font-weight: 400;"><b>Game Manager: </b>Instantiates and brings all the other managers together. It's responsible for starting, resetting and in general all high level changes to the game state.</li><li style="font-weight: 400;"><b>Map Manager:</b> Manages a map that provides some visual feedback of the current state of the world. It wasn't initially planned and It's not required for the game but I thought it would be a nice touch to have something more than just a few progress bars to show the game state.</li></ul> <h3 id="result"><b>The Result</b></h3> After a few weekends I got to a point where I was happy with it, and decided to enter my submission. The contest results aren't out yet, so keep your fingers crossed for me!  <img class="aligncenter size-full wp-image-4144" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b39cc8020b70a782706a57_4.gif" alt="R Shiny Game Result" width="1600" height="817" /> I was shocked by how quickly the development went. Reactive values are AMAZING as an engine for managing the state of the game, and R6 made it super easy to create and destroy instances when needed. Using a spreadsheet for the database was also a really interesting concept that turned out better than I expected. The final result lets me fix typos and add new card types very easily. Even mobile worked as expected thanks to some custom css styling: <img class="wp-image-4145 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b39d264fd13bad46ecc47b_5.gif" alt="R Shiny Game Mobile" width="372" height="658" /> <em>The mobile version functions surprisingly well!</em> <h3><b>Final thoughts: Games in shiny, yay or nay?</b></h3> At this point we know that it's possible to build a functioning video game in R Shiny. So…should you use Shiny to build your own game? To be honest, probably not. There are dozens of other frameworks and languages that are definitely more suitable for this type of project.  However…to me this project shows how easy it is to implement complex UX and UI elements in R Shiny. Of course this is not a commercial ready game, but as a proof of concept or a rapid prototype that can be set up in a couple of days/weeks and then iterated upon, Shiny once again managed to surprise me in a highly positive way. This bodes well for Shiny's continued future as a go-to solution for complex enterprise dashboards. If you want to play around with the code or find more information about the project, you can find everything on the github repository: <a href="https://github.com/pedrocoutinhosilva/shiny.decisions">https://github.com/pedrocoutinhosilva/shiny.decisions</a> Or maybe you just want to play with the final result! Make sure to let me know how many weeks you managed to get to!  Play the game here: <a href="https://sparktuga.shinyapps.io/ShinyDecisions/">https://sparktuga.shinyapps.io/ShinyDecisions/</a> <h3 id="resources"><b>Useful Resources</b></h3><ul><li>If you need help with your Shiny dashboards: <a href="https://appsilon.com/">https://wordpress.appsilon.com/</a></li><li style="font-weight: 400;">Project repo: <a href="https://github.com/pedrocoutinhosilva/shiny.decisions">https://github.com/pedrocoutinhosilva/shiny.decisions</a></li><li style="font-weight: 400;">Deployed demo: <a href="https://sparktuga.shinyapps.io/ShinyDecisions/">https://sparktuga.shinyapps.io/ShinyDecisions/</a></li><li style="font-weight: 400;">Modules: <a href="https://shiny.rstudio.com/articles/modules.html">https://shiny.rstudio.com/articles/modules.html</a></li><li style="font-weight: 400;">R6 classes: <a href="https://adv-r.hadley.nz/r6.html">https://adv-r.hadley.nz/r6.html</a></li><li style="font-weight: 400;">SASS: <a href="https://github.com/rstudio/sass">https://github.com/rstudio/sass</a></li><li>RStudio's 2020 Shiny Contest: <a href="https://community.rstudio.com/t/shiny-contest-2020-is-here/">https://community.rstudio.com/t/shiny-contest-2020-is-here/</a></li></ul>