【ドット絵エディタ制作】２回目：基本機能の実装

on 投稿日:

前回で開発環境は整ったので、
まずは、基本の機能を実装してみた。

作ったもの

お絵かきエリアでマウスをドラッグすることでドット絵が描ける。
ドットの色はカラーパレットで変更でき、不要な箇所は消しゴムツールで消せる。

確認用ページ

ソースコード

クラス図

Visual Studio Codeのプラグイン「classdiagram-ts」でクラス図が作れるようなのでやってみた。
簡単に書き出せるので利便性は最高。
もう少し細かい設定ができたらもっと最高。

お絵かきエリアを構成するのはWorkspaceクラス。
Layerを親クラスでそれを継承するBgLayer、DrawLayer、CusorLayerをWorkspaceに設置してそれぞれの処理を行っている。
WorkspaceとDrawLayerは将来的に複数になることを想定したため、現時点ではややめんどくさい作りになってる。
Stateクラスは状態を管理。

つまづきポイント

クラス継承時にアロー関数をオーバーライドするのは要注意

親クラスの関数の処理を維持しつつ、子クラスでオーバーライドするのに手こずった。
結局、親クラスの関数の内容を子クラスで別の名前のメンバに代入するという、
なんのためのオーバーライドなんだかよくわからない作りに…。

参考：アロー関数 – TypeScript Deep Dive 日本語版

GitHubの認証方法がトークン認証に

SourcetreeでGithubにプッシュしようとしたらできなかったが
同じように困ってた人の記事を参考にどうにか対応できた。
なにげにこれが一番しんどかった…。

参考：SourceTreeで、GitHub認証に失敗するから、Pushできない…を解決

CreateJSはバンドルできない

利用しているCreateJS1.0はwebpackでのバンドルができないらしい。
諦めてHTMLにscriptタグを書いて読み込ませた。

＜追記＞その後、調べていたら頑張ってる人がいるみたいなので不可能ではなさそう。

参考：CreateJSをbrowserifyで読み込む

Bootstrap Iconのバンドルを諦めた

こちらはCreateJSとは違ってバンドルできることはわかっていたが、
めんどうになって諦めた。

参考：webpackでBootstrapをまとめる | IT底辺脱却ブログ

追加したイシュー

ひとこと

すべてが手探り。