rui live note

WordPress、PHP、子育て、ブログ、将棋、コワーキング、子育て、群馬等に関する日々感じたことを書いているブログです

*

前橋のゆるキャラころとんをSVGでアニメーション描画してみた

      生活, 群馬 ,

  • このエントリーをはてなブックマークに追加
  • Pocket

ころとん

我らが前橋のゆるキャラ「ころとん」を SVG で書いて、絵描き歌風にアニメーションで描画させてみました。下記リンクからそのころとんが見られます。

絵心が無いのでひどいころとんになってしまいましたがw、スラスラと本当に絵描き歌っぽく描かれるアニメーションが結構面白いです。

このころとん、結構簡単にできてしまうのでその作り方を紹介してみましょう。

作り方

SVG でイラストを描く

まずはころとんのイラストを用意します。

ころとんの書き方は、こちらの公式サイトに絵描き歌が公開されているので、一緒に歌いながら書いてみましょう。

なお、SVG 形式の画像が作れれば良いので、今回自分はブラウザ上でお絵かきができる svg-edit というツールを使って書いてみました。

ころとん

なお、できあがった coroton.svg ファイルはこちら。

SVG 画像をアニメーションさせる

SVG 画像をアニメーション描画させるのには、Lazy Line Painter という jQuery プラグインを使ってみました。

まず、Lazy Line Painter のサイトの下の方にある「SVG TO LAZY LINE CONVERTER」というエリアに、作成した SVG 画像をドラッグ&ドロップでアップロードします。

Lazy Line Painter

画像がアップロードされると、このようにアニメーションして表示されます。

ころとん

この下にコードが表示されるので、svgdata.js というファイルを作成しそのコードをコピー&ペーストして保存します。

Lazy Line Painter

なお、コードの最後の方にある「$(‘#undefined’).lazylinepainter(」という箇所を「$(‘#coroton’).lazylinepainter(」に直しておきます。(※変更は任意です。)

保存する svgdata.js はこのようになりました。

Lazy Line Painter の GitHub ページにあ
る「Download ZIP」からソースをダウンロードして解凍します。その中に同梱されている「jquery.lazylinepainter-1.7.0.min.js」というファイルを取り出して使います。

下記のように、index.html ファイルを作成します。(「<div id=’coroton’></div>」という箇所の ID 属性を、svgdata.js で修正した “coroton” に合わせるのがポイントです。)

ちなみに、ここまで作ったファイルはこのような構成になります。

/directory
├─ index.html
├─ jquery.lazylinepainter-1.7.0.min.js
└─ svgdata.js

あとはブラウザでこの index.html を開けば、アニメーションでころとんが見られると思います。

頑張れ!ゆるキャラグランプリ

さて、今回ご紹介した前橋のゆるキャラころとんは、ただいま投票受付中の「ゆるキャラグランプリ2015」に参加中です。

10/19現在でころとんは総合26位、今年の目標10位以内にはまだまだもう一頑張り必要な状況です!

インターネット投票の期間は2015年11月16日(月)18時まで。

こちらのページから誰でも投票できますので、ぜひみなさんでころとんを応援しましょう!

ad

この記事が気に入ったらシェアしてもらえると嬉しいです!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • follow us in feedly
  • RSS

  関連記事

前橋
前橋市で大雪災害等の基本的な情報を収集するためのサイトまとめ

2週連続の記録的大雪となった群馬県。私が住む前橋も観測史上最大の73cmという積 …

ナポリタン
ランチパスポートVol5の1店目。安定の美味しさな高崎市「room’s」でナポリタンランチ

500円でお得なランチが頂けるランチパスポート、Vol5 を購入してからようやく …

佐世保バーガー
ランチパスポート5店目。初めての佐世保バーガー、高崎市「エッグマン」のベーコンエッグバーガーセット

500円でランチが楽しめるランチパスポート、5店目は高崎駅前LABI1高崎にある …

FAAVO群馬
群馬を応援できるクラウドファンディング「FAAVO群馬」がオープン!

クラウドファンディングサービス「FAAVO」の群馬版である「FAAVO群馬」が、 …

パスタ
500円でお得ランチをGET!「ランチパスポート 前橋・高崎 Vol.5」が4月10日発売!

当ブログでも何度かレポートさせて頂いている「ランチパスポート 前橋・高崎」。いよ …

ゆるキャラグランプリ
ぐんまちゃん、ゆるキャラグランプリ2015悲願の優勝!おめでとうございます!

11月1日〜3日、中部国際空港セントレア(愛知県)で開かれた「ゆるキャラグランプ …

和凧
前橋の「上州空っ風凧揚げ大会」に行ってきました

2月15日、前橋で開かれた「第23回上州空っ風凧揚げ大会」に子どもたちと行ってき …

ゆるキャラグランプリ
ぐんまちゃんインターネット投票1位通過!グランプリの行方はセントレアでの最終決戦へ!!

10月20日までに行われたゆるキャラグランプリ2014のインターネット投票でぐん …

ゆるキャラグランプリ
インターネット投票最終日まであと4日。ゆるキャラグランプリ制覇へぐんまちゃんラストスパート!

ゆるキャラグランプリ2014のインターネット投票は10月20日(月)まで、いよい …

サイクルポート
前向きな方向で高チャリが改善されるといいなあと思っている件

高チャリが何やら話題になっているようですね。 高崎市民の民度が問われる「返ってこ …