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

2021.03.29.07:00



 キャンバス内でのパノラマ画像の第一弾

 です。昭和記念公園内の広いみんなの原っぱ

 の画像がゆっくりとスクロールして行きます。

 canvas内でもJavaScriptの指定により、横長

 の画像をスクロール処理する事が出来ます。



 このキャンバスでは一枚の画用紙の上で

 画像を描くものです。従ってキャンバスサイ

 ズを超える画像を読み込んだ時にはキャンバ

 スからはみ出てしまいます。然しながら、こ

 の時の取り込んだイメージサイズを覚えてい

 るので、これとキャンバスサイズを上手く処

 理する事により、スクロール動作が実現する

 のです。





 広い昭和記念公園内のみんなの原っぱの画像

 がゆっくり流れて行くのをご覧ください。



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

2021.03.22.07:00



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

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

 昭和記念公園内の広場で沢山の桜の花びらが

 散るアニメーションです。

 青い空に浮かぶ雲がゆっくりと流れて行きま

 す。

 緊急事態宣言が解除されても、お花見などの

 飲食は控え、十分に気を付けながら鑑賞しま

 しょう。



 10種類の花びらを指定した配列をここ

 では300回も呼び出して描画しています。

 フラッシユ時代にduplicateMovieClipを含む

 スクリプトをJavaScript変換して表示するこ

 とに随分苦労しました。然しながら、このよ

 うに配列を上手く利用すると、いくらでも無

 尽蔵に落ち物アイテムを出現させることが出

 来ます。





 広い昭和記念公園内の広場にひっきり

 なしに舞い落ちる桜の花びらをご覧ください。



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

2021.03.15.07:00



 キャンバス内でキャラクタが歩行するアニ

 メーションを描く処理の第二弾です。

 これまでのフラッシュで特筆すべき事は、キャ

 ラクタや画像をボタン画像などにより自由に

 動かしたり、制御したりする処理が出来る事

 でした。これにはgifアニメやYouTube動画では

 遠く及ばないことです。また、このようなイン

 タラクティブな動きが出来るからこそ、これま

 で数多くのフラッシュゲームが開発されて来た

 のです。

 然しながら、このようなアニメ操作はCanvasの

 ようなhtml5下のJavaScriptに引き継がれること

 になります。



 広い昭和記念公園内のみんなの原っぱでまこ

 こまさんたちが散歩しています。

 下段のwaiteボタンとgoボタンによりまここま

 さんたちの動きを制御する事が出来ます。

 お試し下さい。





 広い昭和記念公園内を散歩するまここまさん

 たちのアニメーションを下欄のボタンにより

 足踏みさせたり、動かしたりして下さい。



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

2021.03.08.07:00



 キャンバス内でキャラクタが歩行するアニ

 メーションを描く処理の第一弾です。

 先ず各キャラクタが歩行する分解動作をpng形

 式の画像にして作成します。次に、それらの

 画像をキャンバス内に取り込みます。

 今回はまここまさんたち一家が満開の桜が咲く

 昭和記念公園内を散歩する様子をアニメーシ

 ョン画像にしてみました。



 キャンバス内では画像の切り替えを行うには

 一旦現在の画像を消去してから次の画像をロード

 する仕組みになっています。従ってParaDrawで描

 くモーフィング処理のようなスムーズな画像転移

 が出来ません。従って、gif形式のようなパラパラ

 の画像処理になってしまいます。





 桜が咲き誇る満開の昭和記念公園内を

 散歩するまここまさんたちのアニメーション

 を描くスクリプトをcanvas内に指定しました。



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

2021.03.01.07:00



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

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

 少し時期外れかも知れませんが、昭和記念公園

 に枯葉が舞い散る風景をアニメーションしてみ

 ました。

 前回の一種類の落ち物と違って、複数種類の落

 ち葉がひらひらと舞い降りるシーンを描いてみ

 ました。また、霧とも靄とも付かぬ薄くて白い

 半透明の画像がゆっくり流れる様子も表現して

 みました。



 今回は10種類の形の異なる落ち葉の画像

 を落ちるに従ってそれぞれ変形したり、角度を

 変えたり、また落下速度を変更したりする処理

 をJavaScriptで設定しました。

 また、靄のような半透明の画像の透過度合いを

 変更することも出来ます。





 昭和記念公園に数々の枯葉が落下する

 アニメーションを描くスクリプトをcanvas

 内に指定しました。



プロフィール

chappychan2

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

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

この人とブロともになる

QRコード
QR