Game Developer Getting Started

Developing with Gig Game

What is Gig Game?

Gig Games is an innovative platform tailored for creating and hosting interactive multiplayer games. Created by Jason Bramble, it streamlines the development of complex multiplayer experiences by automating most client-server tasks.

Our JavaScript framework takes care of the essential infrastructure for client-server communication, allowing developers to focus on refining their core gameplay. It simplifies the process for players to join and engage with your game via QR codes and SMS validation, providing a smooth and intuitive user experience.

Gig Games also includes built-in features like player-sharable images with the game host and host moderation tools, enhancing the social and interactive elements of your game. By managing technical aspects such as user authentication, storage, and client-server communications, it frees developers to concentrate on crafting compelling gameplay.

With just knowledge of HTML and JavaScript required, Gig Games makes game development accessible to a broader audience, enabling more people to turn their creative ideas into reality and contribute to the dynamic world of multiplayer gaming.

This is the essence of our mission.

What Do I Need to Know to Make a Game?

Must-Have Knowledge:

  • HTML: HTML forms the structure of your web pages. Think of it as the layout or the skeleton of your webpage. Learn HTML for free at W3 Schools
  • CSS: CSS styles your web page with colors, fonts, and layouts, making it visually appealing. Learn CSS for free at W3 Schools
  • JavaScript: JavaScript is the programming language of the Web, allowing you to create interactive and dynamic content. Learn JavaScript for free at W3 Schools
  • Photo Editing: Understanding how to edit photos is crucial for creating game assets and graphics. Tools like Photoshop or GIMP are commonly used.

Nice-to-Have Knowledge:

  • HTML5 Canvas: Think of Canvas as your drawing pad. Using JavaScript, you can draw, animate, and create 2D graphics. It's where things start to get cool. Learn HTML5 Canvas for free at W3 Schools
  • Three.js: Three.js is the leading library for 3D design and animation on the web. The Gig Games library is built to support Three.js, making it essential for stunning 3D graphics. Learn Three.js

With a foundational knowledge of HTML, CSS, and JavaScript, you can craft impressive games. CSS and JavaScript provide numerous methods for implementing basic animations and transitions. The HTML5 Canvas just takes it a step further by offering precise graphical control down to the pixel, making it perfect for creating really custom 2D graphical effects. These technologies can address the majority of gaming concepts, covering around 90% of most game development needs.

However, for those looking to showcase their skills in 3D graphics, Three.js is, well, let's just say, "these are the droids you are looking for."

But really, there are no right or wrong ways to build a game. Sometimes simple is honestly the best way.

What Tools Do I Need to Make a Game?

To create a game, you'll need tools for both coding and graphic design. Specifically, you'll require a text editor or an Integrated Development Environment (IDE) for writing and editing JavaScript and other web-based code, as well as a graphics editor for creating and editing images. Here are some popular and highly recommended options:

Essential Tools:

  • 1. Developer IDE: An Integrated Development Environment (IDE) is software that provides comprehensive facilities to programmers for software development. It typically includes a code editor, debugger, and build automation tools. Popular examples include:

    • Visual Studio Code: A powerful, open-source IDE with extensive support for web development and JavaScript. Download Visual Studio Code
    • Sublime Text: A sophisticated text editor for code, markup, and prose, with excellent support for web development and JavaScript. Download Sublime Text
    • Atom: An open-source text editor that's modern, approachable, yet hackable to the core, with strong support for web development and JavaScript. Download Atom
    • Eclipse: A popular open-source IDE that supports various programming languages, including web development and JavaScript through plugins. Download Eclipse
    • IntelliJ IDEA: A versatile IDE with strong support for web development and JavaScript, along with its robust Java capabilities. Download IntelliJ IDEA
    • PyCharm: While primarily for Python, it includes support for web development and JavaScript through plugins. Download PyCharm
    • NetBeans: An open-source IDE that supports development in Java, PHP, and JavaScript, with robust web development capabilities. Download NetBeans
    • WebStorm: An IDE specifically for JavaScript development, including support for Angular, React, and other web frameworks. Download WebStorm
    • PHPStorm: An IDE specifically for PHP development, with strong support for JavaScript and web development. Download PHPStorm
    • Komodo Edit: A free, open-source editor for dynamic languages, including strong support for web development and JavaScript. Download Komodo Edit
    • Brackets: An open-source code editor specifically for web design and development, with excellent support for HTML, CSS, and JavaScript. Download Brackets
    • Light Table: An IDE that offers real-time feedback and supports web development with strong JavaScript capabilities. Download Light Table
    • Code::Blocks: An open-source, cross-platform IDE with plugins available to support web development and JavaScript. Download Code::Blocks

  • 2. Photo Editing Software: These tools are used to create and edit images and graphics for your game. Popular examples include:

    • Adobe Photoshop: Industry-standard photo editing software. Download Photoshop
    • GIMP: A powerful, open-source image editor. Download GIMP
    • Paint.NET: A free and straightforward image and photo editing software for PCs. Download Paint.NET
    • Adobe Lightroom: A powerful photo editor and organizer, particularly useful for photographers. Download Lightroom
    • CorelDRAW: A vector illustration and photo editing software, great for creating detailed graphics. Download CorelDRAW
    • Affinity Photo: A professional photo editing software that offers a one-time purchase model. Download Affinity Photo
    • Krita: A free, open-source painting program designed for digital artists. Download Krita
    • Canva: A web-based graphic design tool that is user-friendly and versatile for creating various visuals. Use Canva
    • Fotor: An online photo editing tool that offers a variety of effects and tools. Use Fotor
    • Pixlr: A free online photo editor with both basic and advanced tools. Use Pixlr
    • PhotoScape: A fun and easy photo editing software that enables various effects and enhancements. Download PhotoScape
    • Inkscape: A free and open-source vector graphics editor useful for creating illustrations and designs. Download Inkscape
    • Sketch: A vector graphics editor for macOS, widely used in UI/UX design. Download Sketch
    • Figma: A web-based interface design tool with real-time collaboration features. Use Figma
    • Gravit Designer: A full-featured vector design app that works on all platforms. Use Gravit Designer
    • Photoshop Elements: A simpler, more affordable version of Adobe Photoshop with many of the same powerful features. Download Photoshop Elements

Advantages of Developing with Gig Games

  • Ease of Use: Develop games using simple HTML and JavaScript.
  • Multiplayer Capabilities: Seamlessly connect players for real-time interaction.
  • Extensive Libraries: Utilize a suite of libraries for enhanced functionality.
  • Global Reach: Built-in globalization features for multi-language support.
  • Flexible Architecture: Games can be run in various configurations, providing flexibility for different setups and requirements.

Make Game Developement your Gig

At Gig Games, we believe in rewarding our talented developers. By participating in our profit-sharing program, you can earn ongoing royalties for the games you create. If you have a proven track record and an exciting game idea, we might also provide financial advances to support your development efforts. These advance agreements are tailored to individual requests and are evaluated on a case-by-case basis. Join us, share your creativity, and be part of an innovative community where your hard work truly pays off.

Parts of a Gig Game

Gig Games are designed with three primary components in mind:

1. Host Console:

  • PC or Mobile Devices: In host-controlled games, this is typically a PC or laptop used to manage the game. In player-controlled games, this is the account owner's mobile device that can start and control games. Either way, this device manages the gameplay.
  • Technologies: Developed with HTML, CSS, and JavaScript.

2. Optional Controller:

  • Mobile Devices: Used by players invited to interact with the game.
  • Technologies: Developed with HTML, CSS, and JavaScript.
  • Optional Component: Not used in single-player games.

3. Optional Engine:

  • Maintains Game State: Capable of preserving a game state over extended periods, independent of an active host PC.
  • Network Efficiency: Reduces network lag by eliminating the need for round trips to a host console, providing a smoother gameplay experience.
  • Technologies: Can be developed in .NET or JavaScript.
  • Learn more about developing engines.

Getting Started

To get started, the first step is to sign into the Gig Game Hud.

  1. Click "Settings".
  2. Scroll down to "Developer".
  3. Click "Edit" next to "Enable Developer Mode".
  4. Change "Developer Mode" to "Active".
  5. Click "Save Changes".

Next, click "Create a Game". Fill out the form as best as you can; it doesn't need to be perfect at this stage. Your game app will not be visible to anyone until it is published.

Configuring Your Game

  1. Navigate to "Integration Type" and select the appropriate option:

    • "Gig Game Hosted": Choose this if you want your game to be hosted on the Gig platform with standard console/controller javascript hosting (default).
    • "Gig Game Hosted with JS Engine": Select this if your game will be hosted on the Gig platform and also uses a JavaScript game engine.
    • "Gig Game Hosted with .NET Engine": Opt for this if your game will be hosted on the Gig platform and also uses a .NET game engine. Click here for more information on developing game engines.
    • "External Web App Via SSO": Choose this if your game is an external web application that integrates with Single Sign-On (SSO) for user authentication. Click here for more information on developing game engines.

  2. Set "Game Play" to the appropriate option based on your desired gameplay mode:

    • "Game Host-Controlled Multiplayer": Select this if your game features a host who controls the game session, while other players join as participants.
    • "Player Controller-Only Multiplayer": Choose this if your game supports multiple players using controllers, including the host who will also participate as a player.
    • "Player Controller-Only Single Player": Choose this if your game is designed for a single player using a controller to interact with the game.

  3. Click "Create Draft Game App".

Your screen will update, and you will be automatically assigned an API Service Key, along with other developer keys you will need to create your application.

Setting Up Your Development Environment

Using the IDE of your choice above, start a new web project on your local machine. In your web project, create two folders: "controller" and "console". In each folder, place a file named "index.html". This is the bare minimum structure required for your HTML to work with our framework.

Example Structure:

/project-root
├── /console
│   └── index.html
└── /controller
    └── index.html

At this point, you can start writing your game and test it by viewing it in your browser locally. Add other assets and structure the rest of your project as needed within these two folders.

This separation of the host and controller sides ensures clear organization. When it comes time to publish your game, you will zip these folders separately and upload them to us for review.

Game Host-Controlled Multiplayer Gameplay

  • /console/index.html used for the game host console.
  • /controller/index.html used for the mobile devices used by players.

Player Controller-Only Multiplayer

  • /console/index.html used for the mobile device of the player who initiates the game and owns the host account.
  • /controller/index.html used for the mobile devices used by other players invited to play.

Player Controller-Single Player

  • /console/index.html used for the mobile device of the player who starts and plays the game, owning the host account.
  • /controller/index.html is not applicable in this mode as it is a single-player game with no players invited.

Next Steps

This guide provides developers with the essential information and tools needed to build rich, interactive gaming experiences.

1. Review $GG API Endpoints

  • Description: All Gig Game Library API endpoint definitions and descriptions with sample code.

2. Learn about Client / Server Event Communications

  • Description: Learn how to manage server interactions, handle events, and synchronize data effectively.

3. Learn about the Asset Manager

  • Description: Discover methods for efficiently loading, managing, and utilizing game assets such as images, videos, and audio files.

4. Learn about the HUD Manager

  • Description: Discover methods for displaying and extending the HUD.

5. Learn about the Audio Manager

  • Description: Understand the functionalities for audio playback, control, and manipulation within your game.

6. Learn about the Input Manager

  • Description: Explore how to handle user input events to enhance interactivity and responsiveness in your game.

7. Learn about the Visual FX Manager

  • Description: Learn about managing visual effects, including stage props, transitions, and other visual properties.

8. Learn about using Globalization

  • Description: Get familiar with tools and techniques for implementing multilingual support and managing translations.

9. Two-Way Web View Binding

  • Description: Discover how to bind web views to controller classes using the Handlebars library for dynamic content rendering.

10. Rock Paper Scissors Demo

  • Description: Discover how to bind web views to controller classes using the Handlebars library for dynamic content rendering.