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

  関連記事

こんにゃくパーク
無料でバイキング食べ放題!話題のこんにゃくパークに行ってきました

群馬県甘楽町にある世にも珍しいこんにゃくに特化したテーマパーク、その名も「こんに …

富岡製糸場
グンマーの世界遺産・富岡製糸場でプロジェクションマッピングが開かれる!

先日の世界遺産登録が正式に決定し、グンマー起こしの希望の星として大いに湧いている …

パスタ
知らずに損した!ワンコインでお得なランチが食べられる「ランチパスポート前橋・高崎」は要チェック!

高崎・前橋市内の飲食店でワンコイン500円でお得なランチが食べられる!という「ラ …

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

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

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

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

ころとん
2014年はぐんまちゃん・ころとんでグンマー年賀状などいかがでしょうか?

今年も残すところあと半月!ということで、毎年恒例のそろそろ年賀状をどうするか考え …

ピザ
ランチパスポート3店目。高崎市「PIZZERIA BACI」のナポリランチに大満足!

ランチパスポートを使ったお得なワンコインランチ、3店目は高崎市内の慈光通りにある …

カルボナーラ
ランチパスポート6店目。高崎ビューホテル「ノーヴァ」で優雅なランチの一時。

昨年末もお世話になってきたランチパスポート前橋・高崎版のVol3。1月9日は使用 …

ミンナノグンマ
ぐんまちゃんダンス『ミンナノグンマ』の一般募集バージョンが公開されたそうです

みなさん、「ミンナノグンマ」って知ってますか? 群馬県のサイトによると、 群馬県 …

高崎駅西口にあるだるまの壁画が好き

高崎はだるまの生産量が全国一(シェア80%もあるんだとか)ということで、JR高崎 …