Example/template project with typescript

Recently i knewed about playcanvas. Didn’t found any template that fit my needs and decided to setup project myself - small FPS game, during development I found solutions and approaches on how its possible to write code for playcanvas and wants to share project with them combined. Hope it will helps newcomers as I am to make first project without hours of setup.

Github - GitHub - Ciberusps/playcanvas-typescript-example
Project - PlayCanvas 3D HTML5 Game Engine
Build - Typescript example - PLAYCANVAS

Features

  • typescript
  • eslint
  • prettier
  • webpack
  • classes and attributes using decorators
  • single js bundle
  • playcanvas-sync

Highlights/Approaches

  • small and clear classes creation and attributes declaration using decorators
    image

  • consts map for “lifecycleMethods” to lower chance of typo errors

  • communication events aka “event bus” aka this.app("eventName") also typesafe, there were many ways how to do it but i stopped on simple consts map with event names and typings for “event objects” for transferring data - example TPlayerScoreChangedEvent on screenshot

  • webpack bundles all scripts in single file

  • “hot reload” - start project via npm run dev, webpack and playcanvas-sync will start in “watch mode” every time u change any script all changes immediatly bulids and syncs, so u will only need to refresh page with launched game

  • eslint, prettier, typescript settuped and u can use
    npm run typecheck
    npm run prettier:check
    npm run lint
    in your CI/CD, also I added github action that makes build and “push all” scripts to current branch every time when u push commit

  • DebugSystem(window.debugSystem) can be used to debug scripts independantly by creation of categories for example u want to test some functionality of character to enable this category just open dev console(F12) and write window.debugSystem.enableCategory("character")


    in code u can check that debug category is enabled and send some debug information
    image

What can be improved

  • probably classes inheritance broken
  • jest setup for unit tests

Not sure that some of approaches scales well in big projects or in network-based games, if u have thoughts on how to improve this example project pls leave feedback and probably if many people will be interested i can go further and make small network based FPS/TPS game to test that all things scales well.

7 Likes

Very cool! Just wanted to make sure you were aware of the official Typescript template as well: GitHub - playcanvas/playcanvas-editor-ts-template: A simple TypeScript template for PlayCanvas that can also sync with your playcanvas.com project

Might even want to take some of your stuff and PR those features in?

2 Likes