After some research on HTML5, CSS, and javascript for my phase 3 project in Flatiron, I have realized, when these three components are combined, they can be used in many different ways and create incredible and fabulous projects, including some really cool games.
One of the most trending games of all time, Angry Birds, which was originally an IOS game, made its way to the Google Playstore by implementing WebGL and HTML5. As simple as simply inserting a <canvas> tag within the body of your index.html, and have the width and height of the canvas set up within the opening and closing canvas tag as follows.
After setting up the HTML correctly, you will write your code in index.js or whatever name you want to name your JS file and have all of the crazy game logic in there. If you are interested in creating your game in 2D, you will need to include the following code at the top of your JS file to kick start your project.
You can actually render 2D context or 3D objects within the HTML <canvas> element depending on your knowledge of either topic. (∑（｡･Д･｡）???) If you are interested in creating a 3D game, there are actually a few tools that you can use during the development of your game. According to MDN web docs:
- Mozilla’s A-Frame framework provides a markup language that allows us to build 3D VR landscapes. It is useful for quickly and successfully building prototypes and demos, without having to write a lot of JavaScript.
- Babylon.js is one of the most popular 3D game engines used by developers. As with any other 3D library, it provides built-in functions to help you implement common 3D functionality more quickly.
- PlayCanvas is a popular 3D WebGL game engine, originally created by Will Eastcott and Dave Evans. It is open-sourced on GitHub.
- Three.js, as with any other 3D library, provides built-in helper functions to help you implement common 3D functionality more quickly.
As of now, I have no knowledge of 2D and 3D whatsoever, so I wrote this blog for myself as a future reference back when I have more time to explore new topics.
From reading about all the cool stuff that we can actually do with the HTML <canvas> tag, I also came to know about WebGL. It is created by Mozilla Foundation back on March 3rd, 2011, who were also the same developer that created the Firefox browser! (Surprise!)
WebGL (Short for Web Graphics Library) is a JavaScript API for rendering high-performance interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5
<canvas>elements. This conformance makes it possible for the API to take advantage of hardware graphics acceleration provided by the user's device. More Info on WebGL in this link here: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API
As we all know, some mobile hardware is not optimize to run “breathtaking” 3D graphic render, therefore, the implementation of WebGL can significantly decrease the rendering workload of low-performance devices such as Virtual Reality and Augmented Reality headsets, mobile phones, and low-performance laptop. That makes WebGL a more efficient and optimized Javascript API to render breathtaking games and other applications on any web browser and mobile device.
For example, in celebrating the 10th anniversary of Minecraft, developers in Mojang implement the use of WebGL to recreate the classic flavor of Minecraft that bring gamers to feel like they are back 10 years ago. Some truly classic games such as Medal of Honor and Prince Of Persia CGA were also recreated using WebGL. This further shows the bottomless opportunities for this technology to be used in many other ways.
As we can see, WebGL is really a ground-breaking achievement of internet history that changes the tech industry forever. As most applications are now shifting their way towards web API, especially during this Pandemic, where most people have to stay and work from home, a lot of applications dedicated for such purposes have been blooming since. This inspires me to be more creative when using HTML5 <canvas> because of the endless possibility of its potential for further enhancement and advancement with WebGL of near-future technology.
But for now… A Newbie web developer like me would probably get nowhere near to the master of WebGL anytime soon since I can’t even do Javascript animation yet. lol. ｡(*^▽^*)ゞ
This is the end of my blog, thanks for reading! (I think a game of a cat with lighting will be fun to make!)
