game-ts

Combines graphics-ts with rxjs, plus disparate utilities for input & sprites

installation

yarn add game-ts

example usage

Toggles between blue and black when the 'Enter' key is pressed

import { Endomorphism } from 'fp-ts/function'
import { pipe } from 'fp-ts/pipeable'
import { invert } from 'fp-ts-std/Boolean'
import { error } from 'fp-ts/Console'
import * as Color from 'graphics-ts/lib/Color'
import * as S from 'graphics-ts/lib/Shape'
import * as C from 'graphics-ts/lib/Canvas'
import * as D from 'graphics-ts/lib/Drawing'
import { Key } from 'ts-key-enum'
import * as r from 'rxjs'
import * as ro from 'rxjs/operators'
import * as OBE from 'fp-ts-rxjs/ObservableEither'
import { renderWithState$, RenderError } from 'game-ts/dist/Render'

type State = boolean

const initialState: State = false
const frame$: OBE.ObservableEither<RenderError, void> = renderWithState$<State>(
  initialState,
  (state$: r.Observable<State>): r.Observable<Endomorphism<State>> =>
    pipe(
      r.fromEvent(window, 'keydown'),
      ro.map((e) => (e as KeyboardEvent).code),
      ro.filter((e) => e === Key.Enter),
      ro.mapTo(invert),
    ),
  (state: State): C.Render<CanvasRenderingContext2D> =>
    // renders on a window.requestAnimationFrame schedule via rxjs
    // the canvas is cleared before each render
    pipe(
      D.fill(
        S.rect(0, 0, 100, 100),
        D.fillStyle(state ? Color.hex('#0400ff') : Color.black),
      ),
      D.render,
    ),
  'canvasId',
)
frame$.subscribe()

features

• io-ts codecs for

  • spritesheets via spritesheet.js or TexturePacker
  • levels via Tiled

• rectangle conversions for denotative geometry (collisions etc) with geometric.js

• various utilities for Canvas, Window, images, Zipper (from fp-ts-contrib) and mouse/keyboard input

in-depth example

game-demo-parcel

pairs well with

• box2D physics via planck.js (world.step works well with an rxjs timer)