Example/template project with typescript

[Ciberus]

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
  

• 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
  

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.

[vmwxiong]

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?

[sooyong_Kim]

can you test the template with the orbit camera script?

[will]

@sooyong_Kim The official one? Is there a bug?

[sooyong_Kim]

@will I converted the official orbitCamera script into a typescript version with decorators used by this template.

After then, the bundling with webpack works okay. But somehow, pivotPoint property is undefined when I actually runs on the launch mode.

[sooyong_Kim]

@Ciberus I’ve created a sample project.

GitHub - figo2264/pc_ts_orbit_camera

Can you kindly take a look at it?

I’ve converted orbitCamera and mouseInput script as TS.