Webデザインの授業についていけなくなったので、Live2D Cubism SDK for Webをやってみることにします。
写経にすらついていけなくなったから
もう別のことし始めちゃう。
Webデザインの授業。
どうせ先生あとでコードくれるし、
まずは聞いて理解すればいいや…と思って内職をはじめてしまう
隣の人も別のことやってるなーと思ってチラ見したら
Live2Dの画面ひらいてるし
全然違うじゃねぇか！
コーディングのコの字もねぇ
Live2D Cubism SDK の存在
あ、そうだ
Live2D Cubism SDK for Webいつかやろうと思ってたんだ。
（WEB上でlive2dを動かす技術）
SDKは「Software Development Kit」の略称で、「ソフトウェア開発キット」と訳します。ソフトウェアやWebサービスなどの開発に必要なプログラムやAPI、サンプルコードや仕様書などをパッケージ化したものです。
Live2Dやってた人の横でLive2D Cubism SDK for Webを
ダウンロードして試行錯誤で動かしてみる。
公式にチュートリアルもあるので、導入はしやすかった
（といってもNode.jsとか先にいれていたからスムーズに行ったのあるかも）
他にも、「note」などに先駆者の資料もあったおかげもあり、
この午前中の授業で動作確認までできたのはよかった。
完全に本来の授業は聞くのをやめていた。
実行環境
OS: Windows 11開発環境: Visual Studio Code（言語：TypeScript（公式記載））
Node.jsの導入については別のところ参照お願いします…
実際に画面上にモデルを表示できた喜び
とりあえず、チュートリアルにしたがってビルドすれば、表示できた！！
こういうのって表示できると嬉しいっすね…！
サンプルページだと「右上の歯車」でモデルキャラクターを変えることができます。
▼モデル変更とか表示方法の解説はこちら▼
顔ドアップで表示させたいなーと思っていろいろと試行錯誤。
ちょっと画角があれですが、「モデルの表示位置」も変えることができます。
canvasというタグに対して指定シて上げる必要がありそう…？
こんな感じで本当にサンプルを動かす程度しかやってないレベルです。
あとはこういうのをキャラクターページとかに表示できれば万々歳ですね…
イメージはドルフィンウェーブのキャラクターページみたいな？
（実際はmp4の動画ファイルの埋め込みだけど、やりたいのはそれをモデル自体を埋め込んでみたい）
ちなみに、SDKは無料でダウンロードできます。
あとlocalhostでしかまだ動かせないし、ポート番号変えられたらお手上げレベルな私。
実際にサーバーにあげるときどうすればいいのかまじわかってない。
Live2Dやってみたいなら学割の活用を
Webとか小難しい話じゃなくて、キャラクターを動かしてみたい。
モデリングの方のLive2Dにも興味あります。なんなら授業とかあってほしかった。
どうやら4年制のイラストの方ではLive2Dの授業があるらしいじゃん？
この学校、4年制のほうがいいなーと思うこと多々あるわ。（逆もまた然りだが）
▼4年制のほうがいいと思った理由（その１）▼
ちなみに学生だと「Live2Dの学割」があります。
Live2Dは学割適用すると3年間で9,000円くらいで使えるらしい。
かなりお得に使えるので、卒業する前に買おうと思ってる。
（多分詰みゲーのようになりそうな未来しかみえないけど）
それでも、この安さはずるい…！
▼Live2Dの学割について詳しくはこちらから▼
動かせるようになるのって憧れる（遠い目）
コメント