GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → servercharlie → awesome-html5gamedev

servercharlie / awesome-html5gamedev

Licence: MIT license
A curated list of awesome things related to HTML5 Game Development

Labels

gamedevelopmenthtml5pixi

Projects that are alternatives of or similar to awesome-html5gamedev

wordless gem
The quickest CLI tool to setup a new WordPress locally. Wordless ready.
Stars: ✭ 38 (+153.33%)
Mutual labels:  development
multi-site-docker
A multi-site-docker configuration featuring nginx, php and mysql
Stars: ✭ 85 (+466.67%)
Mutual labels:  development
rebuild
Zero-dependency, reproducible build environments
Stars: ✭ 48 (+220%)
Mutual labels:  development
storybook-graphql-kit
Write GraphQL queries and pass response data to your components
Stars: ✭ 19 (+26.67%)
Mutual labels:  development
Diccionario-JavaScript
project-dictionary.gitbooks.io/diccionario-javascript/content/
Stars: ✭ 13 (-13.33%)
Mutual labels:  development
awesome-chromebook
Chromebook as development machine.
Stars: ✭ 57 (+280%)
Mutual labels:  development
wallstant
Create your own social network for free with Wallstant social network, easy to install and fast to use .. Make people connected
Stars: ✭ 157 (+946.67%)
Mutual labels:  development
pug-server
🐶 A simple pug server
Stars: ✭ 19 (+26.67%)
Mutual labels:  development
awesome-mud
🖥 A curated list of bookmarks, tools, tutorials, and other cool resources for text-based game developers.
Stars: ✭ 61 (+306.67%)
Mutual labels:  development
winup
Automate a Windows 10 VM setup for coding and testing
Stars: ✭ 21 (+40%)
Mutual labels:  development
SNIPs
Secret Network Improvement Proposals (SNIPs) ✂️
Stars: ✭ 42 (+180%)
Mutual labels:  development
jpath.ru
Для разработчиков и опытных пользователей Joomla! CMS
Stars: ✭ 15 (+0%)
Mutual labels:  development
awesome-scripts
Set of scripts that can do awesome stuff for developers
Stars: ✭ 16 (+6.67%)
Mutual labels:  development
semver-generator
Semantic version generator using git commit keywords and overrides
Stars: ✭ 26 (+73.33%)
Mutual labels:  development
alfred-string-operations
Perform string operations to clipboard content
Stars: ✭ 70 (+366.67%)
Mutual labels:  development
create-material-ui-app
create-react-app + storybook + storybook-addon-material-ui
Stars: ✭ 55 (+266.67%)
Mutual labels:  development
json-server
Create a dummy REST API from a json file with zero coding in seconds
Stars: ✭ 34 (+126.67%)
Mutual labels:  development
Tokenmagic
A Foundry VTT module that allows you to add animations and graphic effects to tokens, tiles, templates and drawings.
Stars: ✭ 28 (+86.67%)
Mutual labels:  pixi
VSCode-Bedrock-Development-Extension
An extension that provides support for files such as: .mcfunction, .json and .lang. Features include: completion, validations, formatters, diagnostics, cheat-sheets, code-actions, generation of files, and development tools to help develop Minecraft Bedrock Addons or Minecraft Education Edition.
Stars: ✭ 45 (+200%)
Mutual labels:  development
protection
Flexible server protection system (development)
Stars: ✭ 23 (+53.33%)
Mutual labels:  development
View All Similar Projects ➔


awesome

awesome-html5gamedev

A curated list of awesome things related to HTML5 Game Development

Official Libraries

  • official libraries, sites, etc

Official Examples

  • pixi, phaser, panda, etc

Community

  • game dev forums, reddits, discord & slack, etc

Tutorials

  • sites, vids, forum posts, etc.

Game Developer Tools

General Developer Tools





All About Games

Game Genres

Game Engines, Programming Language, etc.

Game Platforms

  • There are various platforms you can choose your game to run on

    • Desktop (Windows, Mac, Linux)
    • Smartphones, and Tablets (Android, iOS, Windows Phone, etc.)
    • Desktop Browsers (Chrome, Firefox, Safari, Opera, Internet Explorer & Edge)
    • Consoles, such as Xbox One, Xbox 360, PS3, PS4, PS Vita, Wii U, New 3DS, etc.

  • Platform version support matters

    • Ask yourself, do you want your game to run only in new versions of iOS and Android, or also on older versions?

  • Canvas or WebGL in platforms

    • 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?

Game Output

  • Screen sizes

    • Different devices have different screen dimensions / width-height ratio.

  • Pixels per inch

    • This matters greatly for smartphones and tablets.

  • Frames per second

    • As much as possible you wanna be running around 60 fps.
    • Anything else lower than that = poor gaming experience.

  • WebGL or Canvas?

    • If you're simply aiming for desktop & browser, take advantage of WebGL if you can!
    • 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)

  • Music & Sound Effects

  • Others

    • Is it portrait / landscape?
    • Does your game use vibrations?

Game Input

  • Keyboard
  • Mouse
  • Screen Touch Gestures
    • Like taps, swipes, pinch, shake, etc.
  • Gamepads & Controllers

Game Networking





Javascript: Learning The Language

Mozilla Developer's Network

You Don't Know JS

Javascript Design Patterns

Single-arity Functions

Introduction to Promises

Javascript: All About NodeJS & NPM

What is NodeJS

What is NPM

Installing NodeJS & NPM

Javascript: Useful Libraries

Lodash

  • A modern JavaScript utility library delivering modularity, performance & extras.
  • Generate random numbers, sort arrays, throttle functions, etc etc.. (check the docs!)
  • @ https://lodash.com/
  • @ https://lodash.com/docs/

Socket.IO

Primus

Primus EventEmitter3

Primus EJSON

Sat JS

HammerJS

KeypressJS

  • 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.
  • Fire on KeyUp, KeyDown
  • Do combos, like "down left x"
  • @ https://dmauro.github.io/Keypress/

Javascript: Creating Desktop Apps

Electron

  • Build cross platform desktop apps with JavaScript, HTML, and CSS
  • Compiles in Windows, Mac & Linux binaries, more preferred than Node-Webkit
  • @ https://electron.atom.io/

Node-Webkit

  • 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.
  • @ https://nwjs.io/

Programming: Apache Cordova

What the f*ck is Cordova?

  • Apache Cordova allows you to build mobile apps with HTML, CSS & JS.
  • Allows you to target multiple platforms with one code base.
  • It's free and open source.

In layman's term?

  • Basically it's something you can use to create mobile versions of your HTML5 games.
  • By 'target multiple platforms', it means you can create versions for Android, iOS and Windows Phone.
  • Simply follow the links below to create your first cordova app.
  • 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.
  • 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.

Building Your First Cordova App

Using Cordova & Visual Studio to build Android & iOS Apps

Common Solutions to Errors (in building w/ Visual Studio)

  • Environment Variables
    • ANDROID_HOME should be set to Android SDK directory. ie: C:\AndroidStudioSDK
    • ADT_HOME should be set to Android SDK directory. ie: C:\AndroidStudioSDK
    • ANT_HOME should be your Ant's directory. ie: C:\Ant
    • JAVA_HOME should be your Java SDK's directory. ie: C:\Program Files (x86)\Java\jdk1.8.0_121
    • _JAVA_OPTIONS should be "-Xmx512M" w/o quotes.
    • 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
  • Your JDK & JRE version should be 1.8 instead of 1.7.
  • Your Java Development Kit's version must match your Java Runtime Environment's version. ie: JDK v8 = JRE v8
  • add "org.gradle.jvmargs=-XX:MaxHeapSize=512m -Xmx512m" w/o quotes to your "project.properties" file at "%YourVisualStudioProject%\platforms\android" directory.
  • add "multiDexEnabled = true" w/o quotes to your "defaultConfig { }" section in your "build.gradle" file at "%YourVisualStudioProject%\platforms\android" directory.
  • Always Build->Clean your project before building it.

Programming: The Crosswalk Project

What the f*ck is Crosswalk?

  • The CrossWalk enables you to use the most advanced web innovations in your Android and Cordova apps.
  • From the crosswalk-project.org homepage:
    • 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.
    • Get consistent, predictable behavior by reducing Android device fragmentation.
    • Use the latest web innovations and APIs. Provide a feature rich experience on all Android 4.0+ devices.
    • Easily debug with Chrome DevTools.
    • Improve the performance of your HTML, CSS, and JavaScript.
HTML5 feature Without the Crosswalk Project With the Crosswalk Project
WebRTC Nope Yup
WebGL Nope Yup
Vibration API Nope Yup
Presentation API Nope Yup
WebView Updates Nope Yup

In layman's term?

  • Simply put, if you want to harness the power of WebGL (and helluva bunch of other features), use CrossWalk!

Okay, how do I use it?

Programming: Cheatsheets

Android Codenames, Tags, and Build Numbers

  • At a high level, Android development happens around families of releases, which use code names ordered alphabetically after tasty treats.
  • In this document: Platform Codenames, Versions, API Levels, and NDK Releases
  • @ https://source.android.com/source/build-numbers.html

Programming: Useful Statistics

Market share held by the leading internet browsers in Europe from January 2012 to January 2017

Mobile OS Fragmentation (as of June 2016)

Mobile Payment Volume Increase (projection, from 2015 to 2021)

Average cost per installation (CPI) for Android and iOS apps worldwide as of February 2017 (in U.S. dollars)

Programming: Tools, Development Kits, Runtimes, Etc.

Android Studio

  • Android Studio Latest
  • Installation Notes:
    • You might have to set the following environment variables
      • ANDROID_HOME, set to your-ANDROID-SDK-directory
      • ADT_HOME, set to your-ANDROID-SDK-directory
      • PATH, add your-ANDROID-SDK-directory

Apache Ant

  • Ant Build Tool Binaries
  • Installation Notes:
    • You might have to set the following environment variables
      • ANT_HOME, set to your-Ant-directory
      • PATH, add your-Ant-directory\bin

Java Development Kit (JDK) & Java Runtime Environment (JRE)

Version Control

Code Editors

Terminals

  • Hyper

    • JS/HTML/CSS powered, highly extensible / customizable terminal.
    • @ https://hyper.is/

  • CMDER

    • 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.
    • Allows multiple terminals opened.
    • @ http://cmder.net/




Useful Gists





Miscellaneous Links

  • cordova, crosswalk, etc
  • monetizing
Table Head Test
Row Test

Drafted / To-Includes

  • links to books ie truevalhalla
  • twitter
  • youtube channels
  • 0fps series
  • https://0fps.net/2014/02/17/replication-in-networked-games-latency-part-2/
  • statistics, between desktop & mobile & tablets
  • statistics, iOS vs android
  • statistics, of ios and android versions
  • statistics, browser share, mozilla, chrome, ie, etc
  • links to webgl coverage
  • links to other game engines and renderers
  • links to gists and demos
  • developer tools --> game developer tools
  • general developer tools (filezilla, flux, faststone, screentogif, etc)
  • guide to mmo game hosting
  • web concepts
  • vps, dedicated servers, shared hosting
  • virtual machines, etc.
  • server location, server latency, server hardware & bandwidth throughput / ingress/egress
  • github, gitlab, bitbucket
  • trello, slack, telegram, discord, gitter
  • facebook, twitter
  • game assets
    • free and paid
  • cover use of browserify, babel with preset-env and uglify js w/ mangle and compress
  • http://www.goodboydigital.com/exclusively-everything/
  • OSX Virtual Machine Rental
  • About game networking
    • create a concise table that sums up trade-offs between udp and tcp.
    • another table, where running javascript in browser = tcp only. and with nodejs,
      • javascript browser clients = tcp only
      • javascript desktop cleints (w/ Electron and Node Webkit) = tcp & udp
      • javascript servers (in NodeJS) = tcp & udp.

Other ideas

  • Turn servercharlie.github.io into an examples directory.
  • People can submit pull requests of their examples saved in a directory.
  • servercharlie.github.io/pixi-examples/
    • list of examples.
  • servercharlie.github.io/pixi-examples/example1.html
    • sample example, demonstrating use of interactivity.
    • also displays the used code.

Similar game-dev related repositories

git add -A && git commit -m "Update Readme.md" && git push -u origin master

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].