├── LICENSE ├── README.md └── assets └── logo ├── awesome html5gamedev.png └── awesome html5gamedev.psd /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 ServerCharlie 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |
3 | awesome 4 |
5 |
6 |

7 | 8 | ## awesome-html5gamedev 9 | A curated list of awesome things related to HTML5 Game Development 10 | 11 | - [Official Libraries](#official-libraries) 12 | - [Official Examples](#official-examples) 13 | - [Community](#community) 14 | - [Tutorials](#tutorials) 15 | - [Game Developer Tools](#game-developer-tools) 16 | - [General Developer Tools](#general-developer-tools) 17 | - [Miscellaneous Links](#miscellaneous-links) 18 | 19 | ### Official Libraries 20 | - official libraries, sites, etc 21 | 22 | ### Official Examples 23 | - pixi, phaser, panda, etc 24 | 25 | ### Community 26 | - game dev forums, reddits, discord & slack, etc 27 | 28 | ### Tutorials 29 | - sites, vids, forum posts, etc. 30 | 31 | ### Game Developer Tools 32 | - Spritesheets / Texture Management 33 | - Spritesheet Packer (Free / Open-source) 34 | - Download here @ https://github.com/amakaseev/sprite-sheet-packer/releases 35 | - *For the 32-bit windows version, use SpriteSheetPacker-Installer_32b.exe* 36 | - GitHub repo @ https://github.com/amakaseev/sprite-sheet-packer 37 | - Dev thread @ http://www.html5gamedevs.com/topic/26908-open-source-spritesheet-packer-with-gui/ 38 | - TexturePacker (Paid, $40) 39 | - Supported Formats: 40 | - @ https://www.codeandweb.com/texturepacker 41 | 42 | ### General Developer Tools 43 | 44 |
45 |
46 |
47 |
48 |
49 | 50 | # All About Games 51 | 52 | ### Game Genres 53 | - A video game genre is a specific category of games related by a similar gameplay characteristic. Genres are not usually defined by the actual content of the game or its medium of play, but by its common challenge. 54 | - @ https://en.wikipedia.org/wiki/List_of_video_game_genres 55 | 56 | ### Game Engines, Programming Language, etc. 57 | 58 | ### Game Platforms 59 | - **_There are various platforms you can choose your game to run on_** 60 | - Desktop (Windows, Mac, Linux) 61 | - Smartphones, and Tablets (Android, iOS, Windows Phone, etc.) 62 | - Desktop Browsers (Chrome, Firefox, Safari, Opera, Internet Explorer & Edge) 63 | - Consoles, such as Xbox One, Xbox 360, PS3, PS4, PS Vita, Wii U, New 3DS, etc. 64 | 65 | - **_Platform version support matters_** 66 | - Ask yourself, do you want your game to run only in new versions of iOS and Android, or also on older versions? 67 | 68 | - **_Canvas or WebGL in platforms_** 69 | - In the case of HTML5 games, you'll want to maximize the experience given the platform your users are using. Can your target platform support WebGL without sacrificing gameplay / playability? 70 | 71 | ### Game Output 72 | - **_Screen sizes_** 73 | - Different devices have different screen dimensions / width-height ratio. 74 | 75 | - **_Pixels per inch_** 76 | - This matters greatly for smartphones and tablets. 77 | 78 | - **_Frames per second_** 79 | - As much as possible you wanna be running around 60 fps. 80 | - Anything else lower than that = poor gaming experience. 81 | 82 | - **_WebGL or Canvas?_** 83 | - If you're simply aiming for desktop & browser, take advantage of WebGL if you can! 84 | - If you're aiming for smartphone / mobile / tablet support, and worried about platform compatibility.. Canvas is the way to go! (*Note: It varies greatly though, since sometimes you may want to take advantage of WebGL, too, ie: w/ CrossWalk*) 85 | 86 | - **_Music & Sound Effects_** 87 | 88 | - **_Others_** 89 | - Is it portrait / landscape? 90 | - Does your game use vibrations? 91 | 92 | ### Game Input 93 | - **_Keyboard_** 94 | - **_Mouse_** 95 | - **_Screen Touch Gestures_** 96 | - Like taps, swipes, pinch, shake, etc. 97 | - **_Gamepads & Controllers_** 98 | 99 | ### Game Networking 100 | 101 | - **_Why should I worry about networking?_** 102 | - It matters when your game has to connect to the internet, ie: it has ads, or submits data to an online ranking, or connects to a server for multiplayer support, etc. 103 | 104 | - **_I'm making a multiplayer game, should I use TCP / UDP, Websockets / Long-Polling?_** 105 | - Summary 1: TCP has more overhead than UDP, but UDP is more prone into being 'dropped' than TCP. Both has pros and cons and you can google it up (30 min read = enough to learn difference between both). 106 | - Summary 2: HTTP is built on top of TCP. Browsers operate on HTTP, so they're on top of TCP. Websockets are also built on top of TCP. Websockets > Long-polling, since long-polling is strenous for the servers. As of now, it means you're stuck with TCP since UDP support is only implemented in NodeJS's dgram library (hint hint: it means Desktop Clients built w/ Electron & Node-Webkit can take advantage of it). 107 | - Summary 3: However, you can use various techniques to 'mask' any latency / perceivable 'lag' effects on your games.. read the referenced in-depth articles below: 108 | - @ https://0fps.wordpress.com/2014/02/10/replication-in-networked-games-overview-part-1/ 109 | - @ https://0fps.net/2014/02/17/replication-in-networked-games-latency-part-2/ 110 | - @ https://0fps.net/2014/02/26/replication-in-networked-games-spacetime-consistency-part-3/ 111 | - @ https://0fps.net/2014/03/09/replication-in-network-games-bandwidth-part-4/ 112 | 113 |
114 |
115 |
116 |
117 |
118 | 119 | 120 | # Javascript: Learning The Language 121 | 122 | ### Mozilla Developer's Network 123 | - Introductory 124 | - @ https://developer.mozilla.org/en-US/docs/Web/JavaScript 125 | - Intermediate to Advanced 126 | - @ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction 127 | 128 | ### You Don't Know JS 129 | - This is a series of books diving deep into the core mechanisms of the JavaScript language. 130 | - @ https://github.com/getify/You-Dont-Know-JS 131 | 132 | ### Javascript Design Patterns 133 | - Self explanatory. 134 | - @ https://addyosmani.com/resources/essentialjsdesignpatterns/book/#mixinpatternjavascript 135 | 136 | ### Single-arity Functions 137 | - @ https://gcanti.github.io/2014/09/25/six-reasons-to-define-constructors-with-only-one-argument.html 138 | 139 | ### Introduction to Promises 140 | - @ https://developers.google.com/web/fundamentals/getting-started/primers/promises 141 | 142 | # Javascript: All About NodeJS & NPM 143 | 144 | ### What is NodeJS 145 | 146 | ### What is NPM 147 | 148 | ### Installing NodeJS & NPM 149 | - @ https://nodejs.org/en/download/ 150 | 151 | 152 | 153 | # Javascript: Useful Libraries 154 | 155 | ### Lodash 156 | - A modern JavaScript utility library delivering modularity, performance & extras. 157 | - *Generate random numbers, sort arrays, throttle functions, etc etc.. (check the docs!)* 158 | - @ https://lodash.com/ 159 | - @ https://lodash.com/docs/ 160 | 161 | ### Socket.IO 162 | - **Realtime application framework**, built on top of engine.io. 163 | - *Allows server-to-client communication* 164 | - *Note: Servers are ran under NodeJS.* 165 | - @ https://socket.io/ 166 | - @ https://github.com/socketio/socket.io 167 | 168 | ### Primus 169 | - **Same as socket io, but with more robust plugins** (check their github profile). 170 | - @ https://github.com/primus/primus 171 | 172 | ### Primus EventEmitter3 173 | - **NodeJS-like event emitters**, useful for event-driven code flow. 174 | - @ https://github.com/primus/eventemitter3 175 | 176 | ### Primus EJSON 177 | - **Extended JSON** from MeteorJS library. 178 | - *Make sure to check out docs to maximize usefullness!* 179 | - @ https://github.com/primus/ejson 180 | 181 | ### Sat JS 182 | - Simple JS library for performing **2D collision detection**. 183 | - @ https://github.com/jriecken/sat-js 184 | 185 | ### HammerJS 186 | - Add support for **Touch Gestures** 187 | - @ https://hammerjs.github.io/ 188 | - @ https://github.com/hammerjs/hammer.js 189 | 190 | ### KeypressJS 191 | - Keypress is an input capture library with some very special features, it is easy to pick up and use, has a reasonable footprint (~9kb), and has no dependencies. 192 | - Fire on KeyUp, KeyDown 193 | - Do combos, like "down left x" 194 | - @ https://dmauro.github.io/Keypress/ 195 | 196 | # Javascript: Creating Desktop Apps 197 | 198 | ### Electron 199 | - Build cross platform desktop apps with JavaScript, HTML, and CSS 200 | - *Compiles in Windows, Mac & Linux binaries, more preferred than Node-Webkit* 201 | - @ https://electron.atom.io/ 202 | 203 | ### Node-Webkit 204 | - NW.js (previously known as node-webkit) lets you call all Node.js modules directly from DOM and enables a new way of writing applications with all Web technologies. 205 | - @ https://nwjs.io/ 206 | 207 | 208 |
209 | 210 | 211 | 212 | 213 | 214 | # Programming: Apache Cordova 215 | 216 | ### What the f*ck is Cordova? 217 | - Apache Cordova allows you to build mobile apps with HTML, CSS & JS. 218 | - Allows you to target multiple platforms with one code base. 219 | - It's free and open source. 220 | 221 | ### In layman's term? 222 | - Basically it's something you can use to create mobile versions of your HTML5 games. 223 | - By 'target multiple platforms', it means you can create versions for Android, iOS and Windows Phone. 224 | - Simply follow the links below to create your first cordova app. 225 | - Once you're done, replace the html files in the "/www/" folder of your cordova project, rebuild it, test your mobile app output and tweak your HTML5 game as it fits. 226 | - Note that cordova also allows you to utilize "cordova plugins", which gives you a javascript API for the native side of your mobile platforms. Ie: Allow your mobile app to access the internet, save a file, etc etc. 227 | 228 | ### Building Your First Cordova App 229 | - @ https://cordova.apache.org/ 230 | - @ https://cordova.apache.org/docs/en/latest/guide/cli/index.html 231 | - @ https://cordova.apache.org/plugins/ 232 | 233 | ### Using Cordova & Visual Studio to build Android & iOS Apps 234 | - @ https://weblog.west-wind.com/posts/2015/jan/06/using-cordova-and-visual-studio-to-build-ios-mobile-apps#iOSsupportisExcellent 235 | - @ https://taco.visualstudio.com/en-us/docs/install-vs-tools-apache-cordova/ 236 | - @ https://taco.visualstudio.com/en-us/docs/tutorial-package-publish-readme/ 237 | 238 | ### Common Solutions to Errors (in building w/ Visual Studio) 239 | - Environment Variables 240 | - ANDROID_HOME should be set to Android SDK directory. *ie: C:\AndroidStudioSDK* 241 | - ADT_HOME should be set to Android SDK directory. *ie: C:\AndroidStudioSDK* 242 | - ANT_HOME should be your Ant's directory. *ie: C:\Ant* 243 | - JAVA_HOME should be your Java SDK's directory. *ie: C:\Program Files (x86)\Java\jdk1.8.0_121* 244 | - _JAVA_OPTIONS should be "-Xmx512M" w/o quotes. 245 | - PATH should contain directory for Android *ie: C:\AndroidStudioLocal\bin;C:\AndroidStudioSDK\tools;C:\Ant\bin;C:\Program Files (x86)\Java\jdk1.8.0_121\bin* 246 | - Your JDK & JRE version should be 1.8 instead of 1.7. 247 | - Your Java Development Kit's version must match your Java Runtime Environment's version. *ie: JDK v8 = JRE v8* 248 | - add "org.gradle.jvmargs=-XX:MaxHeapSize\=512m -Xmx512m" w/o quotes to your "project.properties" file at "%YourVisualStudioProject%\platforms\android" directory. 249 | - add "multiDexEnabled = true" w/o quotes to your "defaultConfig { }" section in your "build.gradle" file at "%YourVisualStudioProject%\platforms\android" directory. 250 | - Always Build->Clean your project before building it. 251 | 252 | 253 | # Programming: The Crosswalk Project 254 | 255 | ### What the f*ck is Crosswalk? 256 | - The CrossWalk enables you to use the most advanced web innovations in your Android and Cordova apps. 257 | - From the crosswalk-project.org homepage: 258 | - **Include the Crosswalk Project web runtime with your hybrid Android or Cordova / PhoneGap app, and users will consistently see it through a predictable, powerful WebView based on _Google Chromium_.** 259 | - Get consistent, predictable behavior by reducing Android device fragmentation. 260 | - Use the latest web innovations and APIs. Provide a feature rich experience on all Android 4.0+ devices. 261 | - Easily debug with Chrome DevTools. 262 | - Improve the performance of your HTML, CSS, and JavaScript. 263 | 264 | |HTML5 feature|Without the Crosswalk Project|With the Crosswalk Project| 265 | |:-----------------:|:----:|:---:| 266 | | WebRTC | Nope | Yup | 267 | | WebGL | Nope | Yup | 268 | | Vibration API | Nope | Yup | 269 | | Presentation API | Nope | Yup | 270 | | WebView Updates | Nope | Yup | 271 | 272 | ### In layman's term? 273 | - Simply put, if you want to harness the power of WebGL (and helluva bunch of other features), use CrossWalk! 274 | 275 | ### Okay, how do I use it? 276 | - **The ideal / recommended way is to _use crosswalk as a WebView plugin_ in your cordova project.** 277 | - Check out the link below for the quick guide! 278 | - @ https://crosswalk-project.org/documentation/cordova.html 279 | - *Note that the same workflow / plugin process is also possible if you've created your cordova project in Visual Studio* 280 | - However, if you don't wanna go the cordova way (very messy, imho).. 281 | - https://crosswalk-project.org/documentation/getting_started.html 282 | 283 | # Programming: Cheatsheets 284 | 285 | ### Android Codenames, Tags, and Build Numbers 286 | - At a high level, Android development happens around families of releases, which use code names ordered alphabetically after tasty treats. 287 | - In this document: Platform Codenames, Versions, API Levels, and NDK Releases 288 | - @ https://source.android.com/source/build-numbers.html 289 | 290 | # Programming: Useful Statistics 291 | 292 | ### Market share held by the leading internet browsers in Europe from January 2012 to January 2017 293 | - This statistic displays the market share, or the share of internet users in Europe who used different browsers to access the web from January 2015 to January 2017. As of November 2016, Chrome had a 50.49 percent share of the European market. 294 | - @ https://www.statista.com/statistics/269881/market-share-held-by-internet-browsers-in-europe/ 295 | 296 | 297 | ### Mobile OS Fragmentation (as of June 2016) 298 | - This chart shows the percentage of iOS and Android devices running the most recent versions of the two operating systems in June 2016. 299 | - @ https://www.statista.com/chart/5118/mobile-os-fragmentation/ 300 | 301 | ### Mobile Payment Volume Increase (projection, from 2015 to 2021) 302 | - This chart shows the estimated growth in mobile payment transaction volume in the U.S. 303 | - @ https://www.statista.com/chart/7793/mobile-payment-transaction-volume/ 304 | 305 | ### Average cost per installation (CPI) for Android and iOS apps worldwide as of February 2017 (in U.S. dollars) 306 | - This statistic gives information on the average cost per installation (CPI) for Android and iOS apps worldwide as of February 2017. During the measured period, the average CPI for an Android app was 0.44 U.S. dollars. 307 | - @ https://www.statista.com/statistics/247411/cost-per-installation-android-ios-worldwide/ 308 | 309 | 310 | # Programming: Tools, Development Kits, Runtimes, Etc. 311 | 312 | ### Android Studio 313 | - Android Studio Latest 314 | - https://developer.android.com/studio/index.html 315 | - Installation Notes: 316 | - You might have to set the following environment variables 317 | - ANDROID_HOME, set to **your-ANDROID-SDK-directory** 318 | - ADT_HOME, set to **your-ANDROID-SDK-directory** 319 | - PATH, add **your-ANDROID-SDK-directory** 320 | 321 | ### Apache Ant 322 | - Ant Build Tool Binaries 323 | - @ http://www.apache.org/dist/ant/binaries/ 324 | - *Simply get a _ZIP_ file of the latest (or a known version that works), then extract it to a local directory.* 325 | - Installation Notes: 326 | - You might have to set the following environment variables 327 | - ANT_HOME, set to **your-Ant-directory** 328 | - PATH, add **your-Ant-directory\bin** 329 | 330 | ### Java Development Kit (JDK) & Java Runtime Environment (JRE) 331 | - JDK Latest Versions 332 | - @ http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 333 | - JRE Latest Versions 334 | - @ http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html 335 | - @ https://www.java.com/en/download/manual.jsp 336 | - Old Version Archive (v7 & earlier) 337 | - @ http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downloads-javase7-521261.html 338 | - Installation Notes: 339 | - You might have to set the following environment variables 340 | - JAVA_HOME, set to **your-SDK-directory** 341 | - _JAVA_OPTIONS, set to **-Xmx512M** 342 | - PATH, add **your-SDK-directory\bin** 343 | - Furthermore, to prevent conflict make sure your installed JDK's version matches with your JRE version. 344 | 345 | ### Version Control 346 | - GIT 347 | - @ https://git-scm.com/downloads 348 | - SourceTree 349 | - @ https://www.sourcetreeapp.com/ 350 | 351 | ### Code Editors 352 | 353 | - Atom Editor (Free, Open-source) 354 | - A hackable text editor. 355 | - @ https://atom.io/ 356 | - @ https://atom.io/packages 357 | - @ https://atom.io/themes 358 | 359 | - Notepad ++ (Free, Open-source) 360 | - A minimal / open-source text editor. 361 | - @ https://notepad-plus-plus.org/download/ 362 | 363 | - JetBrains WebStorm (Paid, Licensed) 364 | - A lightweight yet powerful JavaScript IDE, perfectly equipped for client-side development and server-side development with Node.js. 365 | - Great TypeScript support! 366 | - @ https://www.jetbrains.com/webstorm/ 367 | 368 | - Sublime Text (Paid, Licensed) 369 | - A sophisticated text editor for code, markup and prose. You'll love the slick user interface, extraordinary features and amazing performance. 370 | - @ https://www.sublimetext.com/ 371 | 372 | ### Terminals 373 | 374 | - Hyper 375 | - JS/HTML/CSS powered, highly extensible / customizable terminal. 376 | - @ https://hyper.is/ 377 | 378 | - CMDER 379 | - Cmder is a software package created out of pure frustration over the absence of nice console emulators on Windows. It is based on amazing software, and spiced up with the Monokai color scheme and a custom prompt layout, looking sexy from the start. 380 | - Allows multiple terminals opened. 381 | - @ http://cmder.net/ 382 | 383 | 384 |
385 |
386 |
387 |
388 |
389 | 390 | # Useful Gists 391 | 392 | - Proper Socket.IO Latency Checking 393 | - @ https://gist.github.com/servercharlie/f3c85dbbfa8308e83257dc2ee31cd7cc 394 | - Proper PIXI window resizing, w/ jQuery. 395 | - @ https://gist.github.com/servercharlie/efa6eea2493fdd35d3192ec3066819c5 396 | 397 |
398 |
399 |
400 |
401 |
402 | 403 | ### Miscellaneous Links 404 | - cordova, crosswalk, etc 405 | - monetizing 406 | 407 | |Table Head Test| 408 | |:-------------:| 409 | | Row Test | 410 | 411 | 412 | 413 | 414 | # Drafted / To-Includes 415 | - links to books ie truevalhalla 416 | - twitter 417 | - youtube channels 418 | - 0fps series 419 | - https://0fps.net/2014/02/17/replication-in-networked-games-latency-part-2/ 420 | - statistics, between desktop & mobile & tablets 421 | - statistics, iOS vs android 422 | - statistics, of ios and android versions 423 | - statistics, browser share, mozilla, chrome, ie, etc 424 | - links to webgl coverage 425 | - links to other game engines and renderers 426 | - links to gists and demos 427 | - developer tools --> game developer tools 428 | - general developer tools (filezilla, flux, faststone, screentogif, etc) 429 | - guide to mmo game hosting 430 | - web concepts 431 | - vps, dedicated servers, shared hosting 432 | - virtual machines, etc. 433 | - server location, server latency, server hardware & bandwidth throughput / ingress/egress 434 | - github, gitlab, bitbucket 435 | - trello, slack, telegram, discord, gitter 436 | - facebook, twitter 437 | - game assets 438 | - free and paid 439 | - cover use of browserify, babel with preset-env and uglify js w/ mangle and compress 440 | - http://www.goodboydigital.com/exclusively-everything/ 441 | - OSX Virtual Machine Rental 442 | - Useful for low-budget indie developers, in building iOS apps 443 | - http://macstadium.com/ 444 | - https://xcloud.me/ 445 | - http://www.macincloud.com/ 446 | - https://feedback.azure.com/forums/216843-virtual-machines/suggestions/13826655-mac-os-x-virtual-machines 447 | - About game networking 448 | - create a concise table that sums up trade-offs between udp and tcp. 449 | - another table, where running javascript in browser = tcp only. and with nodejs, 450 | - javascript browser clients = tcp only 451 | - javascript desktop cleints (w/ Electron and Node Webkit) = tcp & udp 452 | - javascript servers (in NodeJS) = tcp & udp. 453 | 454 | # Other ideas 455 | 456 | - Turn servercharlie.github.io into an examples directory. 457 | - People can submit pull requests of their examples saved in a directory. 458 | - servercharlie.github.io/pixi-examples/ 459 | - list of examples. 460 | - servercharlie.github.io/pixi-examples/example1.html 461 | - sample example, demonstrating use of interactivity. 462 | - also displays the used code. 463 | 464 | # Similar game-dev related repositories 465 | 466 | - https://github.com/ummahusla/HTML5-Game-Development 467 | - https://github.com/leereilly/games 468 | - https://github.com/mbrukman/awesome-gamedev 469 | - https://github.com/DaRaFF/jsgamewiki 470 | 471 | git add -A && git commit -m "Update Readme.md" && git push -u origin master 472 | -------------------------------------------------------------------------------- /assets/logo/awesome html5gamedev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/servercharlie/awesome-html5gamedev/2126551aced80f5661bc9f539422337e874cbb90/assets/logo/awesome html5gamedev.png -------------------------------------------------------------------------------- /assets/logo/awesome html5gamedev.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/servercharlie/awesome-html5gamedev/2126551aced80f5661bc9f539422337e874cbb90/assets/logo/awesome html5gamedev.psd --------------------------------------------------------------------------------