Building Games for the Web
In Getting Started, we covered the basics of writing a game that can run from the command line. Here we’ll explain how to use the Gamefic SDK to make games you can run in a web browser.
The SDK’s web tools require Node.js and NPM.
Generating the Web Scaffold
After creating a game project, run
rake web:generate to add the necessary components. The following commands will create a new project and prepare it for the web:
$ gamefic init mygame $ cd mygame $ bundle install $ rake web:generate $ npm install
Quick Tip: If you have a game that already works on the command line, you should be able to make it into a web game simply by running
rake web:generate && npm install && rake web:run.
The Web Components
package.json: The primary configuration for your web application. You should’t need to change anything in here yet, but you can customize metadata fields like
authorif you’d like.
webpack.config.js: The rules for building the web app. You can leave this alone for now too. Elsewhere we’ll cover some of the things you can do with Webpack to add more features to your game, such as graphics and sound.
node_modules: The package dependencies required to test and build the application. You should never need to change anything in here yourself. It gets managed automatically via
web: The directory with all of your web assets. When you want to change the look and feel of your game’s interface, you’ll do most of the work in here.
We’ll cover the web components in more detail later. For now we can jump right into your new game.
Testing the Game in a Browser
rake web:run to start a local web server. Open your browser and go to
The initial game is the same one you get with
rake ruby:run, except you can play it in a browser instead of a terminal.
Make some changes to your game in
main.rb and reload the page. You should see the changes immediately.
The Gamefic SDK uses several Node-based tools for web apps.
- gamefic-driver: The interface between React and the game code. At its core, its only responsibilities are to receive input from the player and provide JSON data representing the current game state. For most Gamefic projects, it Just Works(tm).
- react-gamefic: A collection of React components that quickly bootstraps adventure games and allows for easy customization.
The runtime dependencies are limited to gamefic-driver and a small set of React packages.
- Symbols are strings
Opal does not differentiate between symbols and strings at runtime.
:word == 'word' # => true
- Strings are immutable
string = 'my string' string.concat '...' # Error string = string + '...' # OK string.upcase! # Error string = string.upcase # OK
- Most I/O functions are disabled
Ruby functionality is limited to features that do not violate browser security restrictions. As a result, the compiled code cannot access the filesystem or open network connections.
autoloadis supported in Opal, I’ve run into situations where the file never gets loaded, and I couldn’t determine why. Using
require_relativeis generally more reliable.
Changing the Design
The page layout can be customized through standard HTML and CSS. You can start experimenting right away by making changes to
The Base Layout
react-gamefic library provides several options for a base page layout. The default is
ebook, a clean and responsive design suitable for text adventures.
The base layout is declared by an
import call in
Other available options are
react-gamefic/styles/terminal. If you want to start your layout from scratch, you can also remove the
Refer to react-gamefic for more information.
Building the Web App
rake web:build to compile the game into a standalone web app. All the files you need will be created in the
builds/web/production directory. You can play it by opening the
index.html file in a browser. No web server is necessary.
Distributing the Game
If you want to share your game, all you have to do is provide the files in the
web/builds/production directory. Two quick solutions are uploading them to a website or sending them in a zip file.
Many game marketplaces like itch.io make it easy for developers to publish web-based games.
Since the app is built purely on web technology, you can also integrate it into other web-based development frameworks, such as Electron, PhoneGap, and Cordova.
Next: The standard library