Build your own 2D Game Engine and Create Great Web Games: Using HTML5, JavaScript, and WebGL

by Kelvin Sung, Jebediah Pavleas, Fernando Arnez

Build Your Own 2D Game Engine and Create Great Web Games teaches you how to develop your own web-based game engine step-by-step, allowing you to create a wide variety of online videogames that can be played in common web browsers. Chapters include examples and projects that gradually increase in complexity while introducing a ground-up design framework, providing you with the foundational concepts needed to build fun and engaging 2D games. By the end of this book you will have created a complete prototype level for a side scrolling action platform game and will be prepared to begin designing additional levels and games of your own.

This book isolates and presents relevant knowledge from software engineering, computer graphics, mathematics, physics, game development, game mechanics, and level design in the context of building a 2D game engine from scratch. The book then derives and analyzes the source code needed to implement thes

e concepts based on HTML5, JavaScript, and WebGL.



After completing the projects you will understand the core-concepts and implementation details of a typical 2D game engine and you will be familiar with a design and prototyping methodology you can use to create game levels and mechanics that are fun and engaging for players. You will gain insights into the many ways software design and creative design must work together to deliver the best game experiences, and you will have access to a versatile 2D game engine that you can expand upon or utilize directly to build your own 2D games that can be played online from anywhere.

• Assists the reader in understanding the core-concepts behind a 2D game engine

• Guides the reader in building a functional game engine based on these concepts

• Lead

s the reader in exploring the interplay between technical design and game experience design

• Teaches the reader how to build their own 2D games that can be played across internet via popular browsers

498 pages, Kindle Edition

Published October 13, 2015

Reviews

[Barack Liu · Rating 5 out of 5]

425-Build your own 2D game engine and create great web games-Kelvin Sung-Computer Science-2015

Barack
2022/06/30

Build your own 2D game engine and create great web games, first published in 2015. It teaches you step-by-step how to develop your own web game engine, allowing you to create a variety of online video games that can be played in common web browsers. Chapters include examples and projects of increasing complexity while introducing a whole new design framework that gives you the basic concepts you need to build fun and engaging 2D games. By the end of the book, you'll have a fully prototyped side-scrolling action platformer level and be ready to start designing other levels and games of your own.

Kelvin Sung was born in 1964. Studied at the University of Wisconsin - Madison from 1983 to 1986, and studied at the University of Illinois at Urbana-Champaign from 1987 to 1992. From 1992 to 1995, he worked as an Assistant Professor in DISCS, NUS, Singapore. From 1995 to 1999, he worked as a Senior Software Engineer / Software Architect in Alias|Wavefront, Toronto, Canada (now part of Autodesk: Alias and Maya). Since 1999, he has worked as an Associate Professor/Professor at the University of Washington - Bothell.

Table of Contents
1. Introducing 2D Game Engine Development with JavaScript
2. Working with HTML5 and WebGL
3. Drawing Objects in the World
4. Implementing Common Components of Video Games
5. Working with Textures, Sprites, and Fonts
6. Defining Behaviors and Detecting Collisions
7. Manipulating the Camera
8. Implementing Illumination and Shadow
9. Simulating the World with RigidShapes
10. Creating Effects with Particle Systems
11. Supporting Camera Background
12. Building a Sample Game: From Design to Completion

Games are human nature. When the computer was born, it was natural for humans to think about how to use this powerful tool to create more vivid and engaging games. Making a game involves not only technical problems in software but also the author's concept of the game.

One of the best ways to learn in engineering is learning by doing. Watching others do things a thousand times, it is better to go through it yourself. Only after we have gone through the whole system completely can we have a profound experience of every detail. And predictably, it's inevitable that we make mistakes along the way. After we have made mistakes or have doubts, we may listen to related courses again, which may be more resonant and rewarding.

Self-learning is essential for a good programmer. We will encounter many technical details level questions, and the answers to these questions may be hidden in a technical document. We must be patient enough to read it ourselves, and we must be able to quickly locate solutions that can solve our own problems. If you don't have these abilities, you have to rely on others for hands-on guidance, and it may be difficult to go far.

The threshold for entry-level programming languages is getting lower and lower, and programming tools are getting more and more powerful, which makes more and more people who can try programming, and the population base rises, which has the soil for the birth of excellent programmers. On the other hand, the support of the community and the experience of the predecessors have enabled the later learners to obtain a certain degree of support, and it is easier to learn from the experience of the predecessors. All of these elements can form a healthy cycle and make this programming language more viable.

To learn how to build a building, we may not learn to build the first floor, and then learn to build the second and third floors. At the practical level, we may first build a small hut, then build a small wooden hut, and then try the construction of reinforced concrete. It is most important to ensure that each version is able to run independently and fully functional. Through multiple iterations, we gradually get closer to the final destination, and each version produced in the process should be an independent milestone.

We generally refer to "literature, music, dance, painting, sculpture, drama, architecture, and film" as the eight arts. Some people also tend to think that video games can be regarded as the ninth art. A good video game should not only involve fighting monsters and upgrading but should also involve many other aspects. Is its story well told? Does it sound right? Is its picture beautiful? A good game should be able to create a virtual, convincing world. The "metaverse" we talked about recently, in a sense, is also such a virtual world that people can immerse themselves in. When most people choose to escape reality and immerse themselves in the virtual world, it may be a sign of depravity for the human race. But as far as individuals are concerned, it is an important means to avoid real troubles.

With the development of video games today, the mainstream core gameplay has been summarized. But there is a lot to be done about how to turn design principles into specific games. The differences in how the story is told, how the VFX is done, how the sound effects are matched, etc., all add up to a different game. Even though the core gameplay may be very traditional, it can still attract new players. Players today can be attracted to games from 30 years ago, so the same core gameplay from 30 years ago may still be valid today.

A programming language is somewhat similar to a natural language we speak every day. The first thing we need to learn is its syntax. We start by memorizing words, then understand how to use words to form sentences, and finally learn how to use sentences to connect sentences into meaningful paragraphs. The best way for us to learn the natural language is by listening, speaking, reading, and writing. Maybe learning programming languages can also refer to similar ideas? Listen, listen to others about their programming ideas; talk, introduce their programming ideas to others; read, read the source code written by others; write, write more of your own source code.

This book is mainly about web games. For web pages, its three core elements are HTML, CSS, and JavaScript. HyperText Markup Language (English: HyperText Markup Language, referred to as HTML) is a standard markup language used to create web pages. HTML is an underlying technology that is often used by many websites along with CSS and JavaScript to design user interfaces for web pages, web applications, and mobile applications. A web browser can read HTML files and render them into visual web pages. HTML describes the structural semantics of a website as clues are presented, making it a markup language rather than a programming language. Cascading Style Sheets (English: Cascading Style Sheets, abbreviation: CSS; also known as String Style Lists, Cascading Style Sheets, Cascading Style Sheets, Hierarchical Style Sheets) is a style sheet used for structured documents (such as HTML documents or XML documents). Application) A computer language for adding styles (fonts, spacing, colors, etc.), as defined and maintained by the W3C. CSS3 is now supported by most modern browsers, while the next version of CSS4 is still in development. JavaScript (often abbreviated JS) is a high-level, interpreted programming language. JavaScript is a prototype-based, first-class function language, a multi-paradigm language that supports object-oriented programming, imperative programming, and functional programming. It provides the syntax for manipulating text, arrays, dates, regular expressions, etc. It does not support I/O, such as networking, storage, and graphics, but these can be supported by its host environment. It is used by the vast majority of websites in the world and is also supported by the world's major browsers (Chrome, IE, Firefox, Safari, Opera).

In the field of computer graphics, a shader is a computer program that was originally used for shading an image (calculating the lighting, brightness, color, etc. in an image), but recently, it has also been used to perform many different fields of work, such as processing CG special effects, doing video post-processing independent of shading. We use different shaders to draw different effects. If the existing shader cannot meet our requirements, we may also need to write our own shader.