キャンバスの勉強No.03(canvasにて描画No.02)

2021.02.22.07:00



 キャンバス内で「落ち物」のアニメーショ

 ンを描く処理の第二弾です。

 ここでは、ちょっと早いかも知れませんが、

 根川緑道に桜の花びらが舞い降りるシーン

 を表現してみました。

 コロナ禍が一年を過ぎ、漸く収束に向かいそう

 な雰囲気ですが、まだまだ油断が出来ません。

 3月末までにはすっかり終息してお花見が出来

 るようになると良いですね。



 前回の「落ち物」のJavaScript処理に続い

 て、今回はまここまさん一家のキャラクター

 を登場させました。これらの画像もpng形式の

 素材ですが、配列を使用して指定しています。

 キャンバスでは階層構造と云う概念はないよう

 ですが、このような配列形式を用いると複数の

 画像処理が出来ます。





 根川緑道に桜の花びらが散るアニメー

 ションを表現するスクリプトをcanvasタグ

 内に指定しました。



キャンバスの勉強No.02(canvasにて描画No.01)

2021.02.15.07:00



 キャンバスではタグ内で一一図形を描かなく

 とも画像ファイルを直接扱う事が出来ます。

 そこで、ここでは雪の結晶のpng画像を使用し

 て、雪が降る所謂「落ち物」のアニメーション

 を表現してみました。

 このような処理では何もフラッシュアニメでは

 なくとも十分遜色ない表現が出来ます。



 既に終焉したFlash Player自体をエミュレー

 トするプログラム「Ruffle」の開発が進めら

 れているそうです。このRuffleを使えばweb上

 で直接.swfファイルをエミュレートして動作

 してくれるようです。これはブラウザ(Firefox,

 Chrome/Edge/Safari)の拡張機能として機能する

 そうです。早速インストールして試してみた処

 JavaScript変換しなくともこれまでの多くの

 フラッシュコンテンツがスムーズに表示され

 ました。まだ開発途中との事でAction Script

 Ver.3.0移行の複雑な処理には未だ十分に対応が

 取れていないそうです。

 「Ruffle」で検索すれば公式ホームページや

 詳しい使い方のページが表示されますので

 一度試してみては如何でしょうか?





 根川緑道に雪が降るアニメーションを

 表現するスクリプトをcanvasタグ内

 に指定しました。



キャンバスの勉強No.01(canvasでのお絵かきNo.01)

2021.02.08.07:00



 久し振りの投稿です。フラッシュアニメを

 制作するアプリのParaFlaとParaDrawが全く

 使えなくなってしまって、かなりショックを

 受けていました。

 Flash Playerによるフラッシュアニメがweb上で

 表現出来なくなって、その代替技術のひとつとし

 てHTML5によるcanvasタグを使ってJavaScriptを

 併用することで高度なグラフィックを表示出来る

 そうです。そこでこのcanvasタグを使って図形を

 描く勉強をこれまでしていました。

 これから少しずつそのやり方について順次投稿して

 行きたいと思います。



 canvasタグによる図形の描画ではParaDraw

 のような便利なアプリが開発されていません。

 従って、画像の枠線を描くアンカーの位置等は

 ひとつひとつその座標を指定しなければなりま

 せん。四角や丸などの単純な図形では何の問題

 もないのですが、キャラクターなどの複雑な曲

 線を描く為には相当面倒な多くの座標指定を

 施さなければなりません。

 然しながらこれも一つの試練だと思ってこれまで

 ParaDrawで描いて来たミニラちゃんの画像をこの

 canvasタグ内に制作しました。





 下欄のミニラちゃんの元図を参考に

 canvasタグ内にJavaScriptにて描いた

 ミニラちゃんの正面画像です。



プロフィール

chappychan2

Author:chappychan2
FC2ブログへようこそ!

最新記事
最新コメント
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR