Giter Club home page Giter Club logo

ts-game's Introduction

TypeScript WebGL Game Framework

In theory it is small code-oriented framework for building html5 games.
In fact it is just a beginning of that.

Quick demo

Simple shooter game gif

Features

In alphabetical order:

  • GUI
    • Button
  • Helpers
    • Action manager — perform actions (simple or continuos) with pause, chain them and so on. No more timers and flags in update() method
    • Event — simple observable with subscribe functionality
    • Pool — do not create/delete items with short time to life. Reuse them.
    • Tween — perform curve based animations
  • Input — keyboard, mouse, touches
  • Asset loading — async with promises
  • Math — vectors, matrices
  • Physics — simple collision detection
  • Render
    • WebGL renderer
    • Texture atlases
    • Font rendering
  • Render 2D
    • Sprite
    • Text
  • Scene
    • Node
    • Camera
  • Scenes — game, menu, options, pause management routines
  • Sound — play sounds and music

What features are in progress?

Global roadmap

  • 2D graphics full support
  • 2D physics
  • 2D games
  • 3D graphics

Quick start

  1. Install node.js with npm (https://nodejs.org/en/)
  2. Open your favorite IDE/editor. I prefer Visual Studio Code.
  3. Open your favorite terminal (bash, cmd, powershell) at project's root folder
  4. Type $ npm install or $ npm i for package restore
  5. Run game: $ npm run start:{game} with dev server and hot reload or
  6. Get release: $ npm run build:{game} — minified and optimized build at /dist/{game} folder

ts-game's People

Contributors

perfectdaemon avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

ts-game's Issues

Вопрос по игровому времени

const gameLoop = (timestamp: number) => {

const gameLoop = (timestamp: number) => {
      this.lastTime = this.currentTime;
      this.currentTime = timestamp / 1000;

      this.deltaTime = Math.min(this.currentTime - this.lastTime, 0.1);

      if (!this.pauseAll) {
        this.onUpdate(this.deltaTime);
        this.onRender();
      }

      window.requestAnimationFrame(gameLoop);

    };

Добрый день.

Функция передаваемая в requestAnimationFrame, при вызове получает единственный параметр requestId: number. Он используется для отмены анимации, по аналогии с таймаутами clearTimeout(timerId).

Если запускать в консоле, видно что requestId при каждом запуске увеличивается на единицу.

Есть ли какая-нибудь разница между использованием requestId в качестве timetamp и к примеру perfomance.now()? Смущает, что requestId привязан к количеству вызовов колбека, а не к реальному времени

Math library

Add Vector and Matrix classes from tiny-glr project

Debug!

Debug is missing at now due to TypeScript Compiler.

Tweener

Add Tweener class from tiny-glr

Add Sprite constructor with options? parameter

I want to implement something like that:

const sprite = new Sprite({
  width: 30,
  height: 30,
  pivotPoint: new Vector2(0, 0.5),
  verticesColor: new Vector4(1, 1, 1, 1),
  textureRegion: {
    region: someAtlas.getRegion('myRegion.png'),
    adjustSize: false,
  }
  addTo: someRenderHelper
});

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.