🤔
Vite + Createjs + TypeScriptの環境構築
結論
- createjs-moduleを使う
vite
$ npm create vite@latest
- vannilaを選択
- typescriptを選択
https://ja.vitejs.dev/guide/#最初の-vite-プロジェクトを生成する
createjs
npm install createjs-module --save
プログラム
//createjs-moduleを読み込む
import * as createjs from "createjs-module";
const stage = new createjs.Stage("canvas");
const circle = new createjs.Shape();
circle.graphics.beginFill("DarkRed").drawCircle(0, 0, 50);
stage.addChild(circle);
circle.x = 300;
circle.y = 200;
createjs.Tween.get(circle, { loop: true })
.wait(300)
.to({ x: 740, y: 400, scale: 2 }, 700)
// 毎フレームステージを自動更新する
createjs.Ticker.on("tick", () => {
stage.update();
});
htmlの方にcanvas要素を用意し、canvasというidを付与する。サンプルコードなので自由にしてください。
苦労したストーリー
- createjs + typescriptの情報が全くない
- あってもみんなバラバラ
- viteでやってる人は多分いないはず
- 型が効かない
- 結局createjs-moduleを使うことで落ち着いた
備考
- 公式のcreatejsを入れてcreatejs-moduleのtypeだけ使うのもアリかも
- createjs-moduleに頼りすぎ。本当は公式を使いたい…。
- いつかまた挑戦したいが、そもそもcreatejsが古いので次はphaserに入ってるかも。
- つまり今回の挑戦は最初にして最後かもしれない
参考
Discussion