Nice Arcade Sample Game: CyberEgg 2077

This project is a sandbox for building the Nice Arcade SDK. This sandbox provides enough of a harness to get your game or app up and running in a view similar to what will be offered in the Arcade.

There will be a yarn command to generate and submit a bundle to the Arcade from this project. To run it, you will need developer credentials provided in a configuration file that does not exist, yet. Information about all of that will be coming soon.

Nice Game SDK

CyberEgg 2077 is a demonstration or sample game showing how to use the Nice Game SDK to build games for the Nice Arcade.

Starting the Dev Server

yarn develop

This will run minigame-engine.js, which is just enough ExpressJS and Pug to emulate how the game will be loaded and presented by a DTP application. This harness is not bundled with your game or application. Any changes you make to minigame-engine.js will not be available in the final hosting environment.

The script is using a bare-bones ExpressJS server to emulate the services that will be provided to your game in the Arcade hosting environment. This enables you to iterate at your own pace in your own self-hosted environment. When your bundle is then later deployed to the production servers, your game will be calling the real versions of those services at their actual endpoints in the production environment using different credentials.

Webpack Integration

The development server uses the Webpack Dev Middleware plugin to provide dynamic builds of the system as you iterate on game code. Your JavaScript build will be updated and maintained automatically as you work.

Webpack is also used to generate the Nice Game Bundle. This is a fully-contained optimized build of your JavaScript source that can be easily delivered by the system to players' devices.

Game Bundle Submission

When you are ready to submit your build for hosting in the arcade, run the bundle-build script to produce ./bundle/nice-bundle-YYYY-MM-DD.tar.gz. The script will (re)create the dist directory to ensure each build starts from scratch, populate dist with your game's build artifacts by calling Webpack to process your code and style, then copying files from source locations in the project to dist. It then tar's the dist directory, and removes it.

All that will be left is ./bundle/nice-bundle-2022-03-24.tar.gz. This is the file that will be submitted by running the bundle-submit script.

Your bundle will go through a QA process and, if accepted, will go live in Nice Arcade as quickly as possible. Submitting a bundle while one is pending in the queue will update that bundle. Feel free to update your bundle as often as desired. When in review, we will lock out update permissions to help guarantee we're only talking about one version.

You can not submit bundle builds without developer credentials. Visit link to apply for a developer account and submit games to Nice Arcade.

Font Licensing

It is possible to include and bundle custom fonts with your game or application. This sample application does exactly that. And, it is using permissive fonts to show you how to do it. This does not, however, mean you can just bundle any font you want. When it comes to licensing for use and redistribution, not all fonts are the same.

Please make sure you have the rights to bundle and distribute any font(s) you include with your game or application. Not all fonts are able to be redistributed with an application, and some fonts apply special rules for using them on the Web. Your game/app will be deployed as a desktop application and also to the Web. Please make sure you have the rights required to distribute all fonts used in your app as a desktop application and also on the Web.

There are fonts that require a license fee to be paid for these redistribution rights. Some of these fees can be enormous. You are responsible for providing those rights along with your application, which involves paying a fee to the font creator.

Game View

Everything begins with the game view. This is implemented using Pug, a templating and scripting language for generating HTML (and other) output. You are defining a view partial, not the whole page. Your view must implement the game-view block.

The layout.pug script included in this project provides enough to put your game on the page. It will be different in production, and will wrap your game in a different overall page structure. You can only rely on the elements you create in the game-view block. All other elements and CSS classes are provided by the system, and are subject to change at any time.

Game CSS

Your Game View will likely want to also provide custom CSS for styling the elements you'll add to the view. This sample project uses LESS to compile dist/css/style.css. The system will inject this CSS into your page when loading your game, and only when loading your game. This enables you to style everything within the game-view block however you see fit. How you build the file is entirely up to you. You can type raw CSS3, or you can use tools like SASS/SCSS, LESS, and others. You will need to modify gulpfile.js in the project root to provide alternate tools and build rules.

Game Scripts

The dist/js directory exists to host your JavaScript source files. These should be the final, output, bundled-up builds you want to distribute to the public.

The system will load dist/js/game-app.js. How you produce that file, and what it contains as a bundle, is entirely up to you. At a minimum, you application object must be named GameApp and must be derived from NiceGame as shown here:

const DTP_COMPONENT_NAME = 'your-game';

import { NiceGame } from '/dtp-nice-game/nice-game.js';

export default class GameApp extends NiceGame {

  constructor ( ) {
    super(DTP_COMPONENT_NAME);
  }

  async run ( ) {
    await this.startGameEngine(
      this.onGameUpdate.bind(this),
      this.onGameRender.bind(this),
    );
  }

  onGameUpdate ( ) {
    /*
     * Update all the things in the game
     */
  }

  onGameRender (ctx) {
    /*
     * Render/draw all the things in the game
     */
  }
}

License

Copyright © 2022 Rob Colbert @[email protected]

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.