Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Going the Distance with Babylon.js

You're reading from   Going the Distance with Babylon.js Building extensible, maintainable, and attractive browser-based interactive applications using JavaScript

Arrow left icon
Product type Paperback
Published in Sep 2022
Publisher Packt
ISBN-13 9781801076586
Length 426 pages
Edition 1st Edition
Languages
Arrow right icon
Author (1):
Arrow left icon
Josh Elster Josh Elster
Author Profile Icon Josh Elster
Josh Elster
Arrow right icon
View More author details
Toc

Table of Contents (20) Chapters Close

Preface 1. Part 1: Building the Application
2. Chapter 1: The Space-Truckers Operation Manual FREE CHAPTER 3. Chapter 2: Ramping up on Babylon.js 4. Chapter 3: Establishing the Development Workflow 5. Chapter 4: Creating the Application 6. Chapter 5: Adding a Cut Scene and Handling Input 7. Part 2: Constructing the Game
8. Chapter 6: Implementing the Game Mechanics 9. Chapter 7: Processing Route Data 10. Chapter 8: Building the Driving Game 11. Chapter 9: Calculating and Displaying Scoring Results 12. Chapter 10: Improving the Environment with Lighting and Materials 13. Part 3: Going the Distance
14. Chapter 11: Scratching the Surface of Shaders 15. Chapter 12: Measuring and Optimizing Performance 16. Chapter 13: Converting the Application to a PWA 17. Chapter 14: Extended Topics, Extended 18. Index 19. Other Books You May Enjoy

Space-Truckers: The Video Game Design

The basic idea behind Space-Truckers is simple: get stuff from Point A to Point B, in spaaace! (It’s not required to draw out that last word, but it helps set the mood.) As a game, it is separated into several distinct phases or states:

  • Landing (Home) Screen
  • Splash Screen
  • Menus (inc. High Scores)
  • Route Planning
  • Driving + Scoring

Each of these screens (used as a synonym for “state” here) will be established, then later enhanced over the course of this book along with an underlying application to support and coordinate between them.

Landing

This is the first thing that a player sees when they navigate to space-truckers.com (or the beta testing site, dev.space-truckers.com). It’s an HTML page with a simple Call to Action: “Launch.” Under the hood, however, the HTML page is the host for the main application canvas – the WebGL context onto which all the rendered outputs are painted. It is responsible for loading the packaged web application as well as registration of a Service Worker (see Chapter 13, Converting the Application to a PWA) to manage and pre-fetch assets. As the DOM host, it provides access to the web browser and through it the host machine’s resources, such as the ability to play sound or read input from gamepads or VR hardware. Learn more about this in Chapter 3, Establishing the Development Workflow.

Splash Screen

In music and comedy, a warm-up act precedes the main headline performance as a way to put audiences into a particular frame of mind or mood. After all, it’s much easier to crank things up past 10 on the volume dial when you’re already at 7! The Space-Truckers Splash Screen serves that purpose, as well as giving us an opportunity to showcase the underlying framework and proclaim that this game is Powered by Babylon.js. Once the short, animated content completes, the application enters “attract mode” to entice players to continue.

Menus

The transportation hub of the game, the Main Menu, is where players will start a new game, view high scores, exit back to the landing page, and potentially do more. Sound effects and an animated selection icon bring a bit of motion to a twinkling background. The menu system is initially covered in Space-Truckers: The Main Menu section of Chapter 4, Creating the Application.

Route Planning

One of the two main game phases, the Route Planning Simulation, is where players become content creators. Using a top-down map view, drivers plan their route before embarking on their journey. From an initial starting orbit close to the inner-most planet, players must balance how much launch force is used with aiming and timing to put the simulated cargo on a path to the destination planet. Once launched, the cargo is entirely at the mercy of gravity and Sir Isaac Newton. Pro tip: aim ahead of where you want to end up but be sure to account for the pull of the sun. Because it is a simulation of a route, there are no consequences for failure – the player is free to try as many times as they want to find the perfect route to drive in the next phase.

Driving and Scoring

After planning out the desired route, it’s time for players to then take the wheel and guide their Space-Truck through the transit corridor while avoiding collision with the random events that have been recorded during the route planning phase. The player’s unit drifts in free-fall, so velocity accrued in any given direction will remain unless later canceled out by opposing acceleration. Collision results in damage, and with enough damage, the truck and its cargo are destroyed.

Figure 1.7 – Collisions during the driving phase have consequences

Figure 1.7 – Collisions during the driving phase have consequences

On a brighter note, completing the course results in the player’s score being calculated. Several different factors contribute to the overall total final score. The length of the route, the time it took the simulation to complete the route versus the time the player took, and the initial launch velocity in route planning are all some of the factors involved in scoring. If a player’s score is high enough, then it will displace one of the previous high score holders to place the player’s selected initials into the hall of legends.

This is the game in a nutshell. As with any such high-level overview, it is necessarily lacking in some detail, but it provides a holistic picture of what we’re going to be developing over the course of this book. To get into more detail, we’re going to need to first get an understanding of where we can find those details as well as where and how to pick up supporting context in the GitHub repository for Space-Truckers.

You have been reading a chapter from
Going the Distance with Babylon.js
Published in: Sep 2022
Publisher: Packt
ISBN-13: 9781801076586
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image