ITエンジニア/デザイナ向けにオープンソースを毎日紹介

2Dのイラストをまるでアニメーションのように動かしてくれるのがLive2Dです。ノベルゲームなどで使うと、より臨場感が生まれることでしょう。最近ではVTuberなどでも活用されているようです。

公式で提供されているリソースを使い、何とかCSSとJavaScriptでLive2Dのデータを動かしたのがCSSLive2dになります。

CSSLive2dの使い方

動かしているところです。

CSSLive2dの開発過程をつづったSVG+CSS AnimationでLive2Dを動かす - はるさめスープによれば、結果的に動かせたものの、公式提供されているWebGLを使った方がいいとのことです。様々な情報がバイナリになっており、解析したりしながら実装している様子が面白いです。

CSSLive2dはCSS製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

CSSLive2d Live demo

spring-raining/CSSLive2D

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2