Deploying JavaScript Game to Steam, App Store, Google Play, and PWA

As time has allowed over the past few months, I've been experimenting with Paco and the Tumbling Seed Box to take advantage of various open source technologies like Cordova and Electron so that Paco can play on multiple platforms. Using Cordova, I can package the game as an app for both the App Store and the Google Play store. Using Electron, I was able to build standalone versions of Paco for Windows, Mac, and Linux.

One of the first issues I ran into is that both of these tools are unable to build for all platforms from the same development computer (with the exception of Cordova being capable of building both iOS and Android versions on a Mac). I wanted a solution that allowed me to build the game for all of these platforms without me having to bounce between computers. Even better, I preferred a solution that allowed me to invoke a command from the game code base itself to build for any or all platforms regardless of what platform I am presently using.

So I created a packager project that runs as a nodejs express server with built-in relays to handle requests depending on the platform it's serving from and pass along those it can't handle to another server. Running this service on a Mac and on a PC provides game-packaging services for all the current platforms I've built support for. From Paco's game development project, I can run something like "npm deploy:steam", which packages the current version of the game into a zip file and sends it to the PC. The PC in turn recognizes that it is unable to deploy to Steam (Windows seems to have issues with ".app" Mac files) and passes the game zip on to the Mac. The Mac recognizes that it can't package for Windows, so it leaves that to the PC and builds the Mac and Linux versions using Electron while the PC builds the Windows version and sends it to the Mac. Once the Mac has all three versions ready, it ships it off to Steam using tools from the Steam SDK.

In addition to the above, I also set up the packager to deploy a PWA version to the website. I'm still working on the hosting website as time allows, but you can enjoy the current progress and see the four targets at https://town.gopherwoodstudios.com/store/paco.html

Each platform and store has its own quirks, but I'm hoping that this process will separate those issues from the game itself and make deployment of future Gopherwood games a bit simpler, allowing each game to reach folks on the platforms they prefer as well as making game updates and fixes go a little quicker.

Ready Jet Go! Space Scouts - The Lab

It's here! A brand new app, Ready Jet Go! Space Scouts, is comprised of 5 games and an open-play lab that connects them all! Compared to previous Gopherwood Studios projects, this one was the biggest yet: we designed and developed Cooking School, Rover Maker, Base Builder, Mission Control, and Food Farmer each as a standalone game, and then created the Space Scouts Home Base, badge system, and Lab in the app itself to tie the games together and create a single fun and engaging experience.

The inception for the app started with my nearly-endless enjoyment playing with Fantastic Contraption and my fascination with Lego bricks. What if we made a game that incorporated the open-play of Lego but the more-directed play of Fantastic Contraption? Wait, what if we made a bunch of different games, but you could mix and match pieces between games to make new things? As we began working through the ultimate design for this app, addressing these game design questions and considering reward structure and educational goals, I began working on an early investigative prototype to flesh out the ideas a bit more, especially regarding an open-play experience that incorporates elements from different games.

"Yes, I'm testing. Totally. Not playing. Nope." pic.twitter.com/tqZnkBYELy

— Derek Detweiler (@derekdetweiler) March 6, 2018

The prototype was an open-play "Lab" that focused on a pin and strut mechanic. Early on, we found that this was a bit too clunky for our target audience and honestly quite frustrating on mobile devices. We continued to wrestle with the basic handling of game elements as the individual games were designed. Base Builder started with loose joints and floppy beams, which, after many iterations, ended with stiff joints and static beams to make game-play easier and more intuitive for our target audience. Rover Maker avoided beams altogether and went more of a building-block route from the onset: blocks snap together to create a rollin' rover.

As the game-play across titles solidified, integrating each of the games into the Lab proved to be a huge challenge. Base Builder and Rover Maker provided natural elements for the Lab, but Cooking School was an odd fit, and Mission Control and Food Farmer had completely different mechanics from the other three titles. Merging these into a cohesive whole required a bit of creativity.

Adding Cooking School ingredients was easy enough: playing with your food is fun. However, the kitchen tools didn't really have a place to be in the Lab, Gravity put them on the ground (which doesn't work well for various reasons, like the Mixer tool that outputs mixtures downward). They can't levitate like the game, because it looks odd and breaks the other games' elements in peculiar ways. Lastly, it opened new questions about what exactly can be processed by a kitchen tool? Astronaut dolls from Base Builder shouldn't, but what about Rover Maker wheels? Can they be fed into a Cooking School Chopper? Ultimately, we decided to add a "wall" block, identical to the Rover Maker blocks in functionality, but visually conveying the sense that kitchen tools could be "pinned" to them. Kitchen tools were then implemented to behave just like Rover Maker rockets and wheels: they can be attached to blocks and won't process other pin-able things like wheels.

Mission Control was tougher: it doesn't really have "pieces" of things to work with like the other titles. So for this game, I added Boop, the rover, and Jet 2, Jet's trusty robot, as items in the Lab. The Lab play area was also extended to provide more room for these two to go exploring and interact with other Lab items.

Finally, Food Farmer. Adding this game into the Lab focused primarily on the food, since we already had kitchen tools in place to process vegetables! In addition to the basic food items, their various cooked, sliced, and diced versions were added. Now players could cook their watermelon and pop their corn!


That's a bit of an overview regarding the Lab and how it came together. Check out the app and see what kind of awesome machines you can make in the Lab! I just thought of something...

Gotta run... ...I'm off to build a battery-powered popcorn-popping, five-wheeled toppling tower on the moon!

Enabling HTML5 Audio Playback on iOS Safari

I hate wearing headphones. :-P

Building off of a few things we've learned about audio on mobile devices, here's a convenient function for enabling audio on iOS devices. Essentially, as described in our first foray into audio issues on mobile devices, iOS will not play audio without it being first invoked by the user.

The following function takes a DOM element and assigns it an HTML5 audio tag to play when the DOM element is tapped. This hides the first user-invoked "audio.play()" behind another button so that it can now be invoked by code for the rest of the game without explicit user interaction. For example, in our PBS Kids games, we have a "Play!" button on the opening screen, assign our voice-over soundtrack to this button, and once a child taps "Play!", the game is thereafter able to play voice over clips without the need for additional user interaction.

function enableAudio(element, audio, onEnd){
  var callback = false,
      click    = false;

  click = function(e){
    var forceStop = function () {
          audio.removeEventListener('play', forceStop, false);
          audio.pause();
          element.removeEventListener('touchstart', click, false);
          if(onEnd) onEnd();
        },
        progress  = function () {
          audio.removeEventListener('canplaythrough', progress, false);
          if (callback) callback();
        };

    audio.addEventListener('play', forceStop, false);

    audio.addEventListener('canplaythrough', progress, false);

    try { 
      audio.play();
    } catch (e) {
      callback = function () {

        callback = false;
        audio.play();
      };
    }
  };

  element.addEventListener('touchstart', click, false);
}

To use the above, call the function giving it a clickable DOM element and an audio element to invoke as shown below:

enableAudio(element,audio);

As a bonus, if you want to make sure the audio is indeed ready before performing a next action, you can send a function as the third argument; this function will be called once the audio is ready.

Entanglement iOS - What's Going On?

Nothing has changed. :-/

To all of our wonderful Entanglement iOS fans, you may have noticed the promise of a new level "Coming Soon! Free!" that's been on the intro screen for... ...over a year. Well, it's not coming. Not because we don't want to, but because fulfilling that promise is unfortunately out of our control. Entanglement iOS was developed last year by CrateSoft and shortly after its release, the company all but disbanded. It does not appear that we will be able to work out a well-deserved future for Entanglement iOS in spite of the success you have helped make it. It is currently in the state it will remain for the foreseeable future.

If you own the iOS version of Entanglement, we want to make it up to you. We are prepared to give you the online Sakura Grove Expansion Set at no cost to you: simply send a note to us at feedback@gopherwoodstudios.com using the same email address you use to log into http://entanglement.gopherwoodstudios.com, and we will enable the expansion set for your account.

We've learned a few things from this unfortunate turn of events and we are sorry it has affected you this way. Thanks for your understanding and we hope you continue to enjoy Entanglement!

Entanglement Available for iPad

In addition to the Sakura Grove add-on we've created for Entanglement, we've also been hard at work (with a little help from our friends at CrateSoft) creating a version of Entanglement for iOS. We're proud to announce that the iPad version of the game is now available on the iTunes App Store. For $3.99 you can buy it here.

The iOS version of Entanglement features four game boards, the classic board (seen above) plus three new boards exclusive to the iOS version. It also features a new mode, Gold Rush, which adds a twist to the traditional Entanglement by introducing golden paths to the mix. Cross a golden path to uncover a gold nugget. Earn points for each tile the nugget crosses returning to the mine cart.

We're very proud of what we've created in Sakura Grove and now in Entanglement iOS. We hope you'll take the time to check out the new modes and maps we've created for both versions of Entanglement.

Have fun!