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

ころとん

我らが前橋のゆるキャラ「ころとん」を 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時まで。

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

この記事を書いた人

ko31

岩手県出身、群馬県在住のフリーランスWeb系エンジニアです。
Webシステム・アプリ、Webサービス、WordPress開発等を雑多にこなしています。バンカラ応援好きの振り飛車党。
PHP / WordPress / 高校野球 / 将棋 / WordPress / ブログ / 食べること / 二児の父親

>>もっと詳しいプロフィールはこちら

お仕事のご相談・お問い合わせ

当ブログの管理人は、Gosign(ゴーサイン)という屋号でフリーランス Web エンジニアとして活動しています。
ブログの掲載内容はもちろん、Web サイト制作や Web アプリケーション開発などのご相談・ご質問がありましたら、どうぞお気軽にお問い合わせください!

合わせて読みたい記事