13 コピー

Size: px

Start display at page:

Download "13 コピー"

よりとしはぎにわ
5 years ago
Views:

STAC STAR STAC STAR Sample URL http://stacstar.

1 STAC STAR STAC STAR Sample URL Archive.zip File ActionScript 2.0 Flash Player 8 Flash 8 2 3

発案デザイン大きなスクラッチを削る爽快さを表現コインの状態をユーザーの操作に置き換える置いてある状態立っている状態コインをつかむ動作コインの 3 つの状態をつなぐことで削る動作を表現立っている状態置いてある状態コインを離す動作このコンテンツは現れるコインをつかみスクラッチをひたすら削るだけです削りカスやコインの動き

ここに現れるアイテムはスクラッチコインスクラッチのカススクラッチの下の絵の 4 つだけです爽快さを表現するためにはその 1 つ 1 つにリアリティを持たせることが重要になります短い時間で各アイテムのリアリティをユーザーに認知させるためには実際とは異なるデフォルメした表現も必要ですまた Flash 8 から加わったエフェクトを使用しいままでの Flash

数枚の写真を実際に傾斜を付けて撮影を行いアニメーションさせましたまたスピードを付けてコインを離したときには普通に離したときのアニメーションとは違い回転しながらカタカタと小刻みに揺れながら落ち着くというコインらしい動きを付けました実際スクラッチをしていてこのような動きをすることはないと思いますしかしここではコインであるという表情を強く訴えたくてあえてこの表現を加えました

2 発案デザイン大きなスクラッチを削る爽快さを表現コインの状態をユーザーの操作に置き換える置いてある状態立っている状態コインをつかむ動作コインの 3 つの状態をつなぐことで削る動作を表現立っている状態置いてある状態コインを離す動作このコンテンツは現れるコインをつかみスクラッチをひたすら削るだけです削りカスやコインの動きスクラッチ全体の動きなど登場するアイテムをリアルに表現することで爽快感を演出していますまた背景の絵を容易に変えられるように外部の素材を読み込ませているのでスクラッチ本来の何が出るのかという楽しみ方もあります " コンセプトこのコンテンツのコンセプトは誰もが削ったことのあるスクラッチをステージいっぱいに配置しその大きなスクラッチを削ることの爽快さを表現することでしたここに現れるアイテムはスクラッチコインスクラッチのカススクラッチの下の絵の 4 つだけです爽快さを表現するためにはその 1 つ 1 つにリアリティを持たせることが重要になります短い時間で各アイテムのリアリティをユーザーに認知させるためには実際とは異なるデフォルメした表現も必要ですまた Flash 8 から加わったエフェクトを使用しいままでの Flash のベクターを中心とした表現とは違った表現を演出しています " コインの表現コインはユーザーが操作するアイテムになりますスクラッチを削るときコインの状態は置いてある状態立っている状態動いている状態の 3 つになりますこの状態をユーザーのマウス操作でスムーズにつなぎ表現することでリアルな操作感を演出させています動いている状態コインを動かす動作つかむ離すに関しては数枚の写真を実際に傾斜を付けて撮影を行いアニメーションさせましたまたスピードを付けてコインを離したときには普通に離したときのアニメーションとは違い回転しながらカタカタと小刻みに揺れながら落ち着くというコインらしい動きを付けました実際スクラッチをしていてこのような動きをすることはないと思いますしかしここではコインであるという表情を強く訴えたくてあえてこの表現を加えましたこの傾きながら落ち着くアニメーションでは実際に撮影したコインの写真を使っていませんそれはアニメーションさせたときに光の反射の部分のつなぎが困難だったからですそこで正面から撮った画像に画像編集ソフトで遠近を付けてそれをうまくつなげました " スクラッチの表現スクラッチの画像は質感の似た反射の少ないパネルを撮影しそれに画像編集ソフトで色合いや質感を調整していきましたしかしいくら繊細に表現しようが日常それほど目にすることのないスクラッチを画像 1 枚で認識させるのはなかなか困難ですスクラッチはコインと合わせることで初めてスクラッチであると認識できるでしょうしかしそれをあ細かなキズの表情えて利用してコインの登場を遅らせました一度ユーザーにこれはなんだろう? と思わせることにより興味を惹くためですスクラッチを削ったときに削れるのはもちろんですが実際に削ってみると弱く削ったときやコインが滑ってしまうときは削れずにその部分だけキズが付きますそういった細かな演出も取り入れています " カスの表現ムービー再生後コインはすぐに登場しない特にスクラッチの表現を豊かにするのがカスの存在です通常スクラッチを使うコンテンツでは下に出てくるアタリやハズレという結果が重要になりますが今回作成したものは下の面に絵があるだけで結果はありません ( もちろんランダムな絵を用意してアタリ / ハズレを用意することもできます ) 結果が目的である 4 5

コンテンツではカスが邪魔な存在にさえなってしまいますしかしこのコンテンツではカスの存在こそがリアリティを演出する大きな役割となっていますカスに関しては多くのスクラッチを削って実際に出てきたカスをいくつも撮影しました 1 つのカスに対して 6 カット程度用意して画像編集ソフトで切り抜き色彩調整を行いましたその画像を用い Flash

削ったところに細かなカスを実際よりもたくさん出現させることで削っているという爽快感を強調していますスクリプトスクラッチを削る動作のスクリプト化このスクリプトでは以下の各クラスを使ってそれぞれの動作を表現しますスクリプトで使用する各クラスクラス名 BitsOfScratch BitsOfScratchEdge Coin Scratch ScratchContents 概要

全体を拡縮したり移動したりして削っている部分へズームアップする機能やバックグラウンドの画像を読み込む機能を持つ " カメラの動き ScratchMediator ScratchShape このコンテンツ全体の流れを制御するクラス各アイテムに変更があった際にどうするかをコントロールする主にコインがドラッグされた際にスクラッチへ削るよう命令を出すスクラッチの削る形を制御するクラス

しかし対象のオブジェクトを動かすことで視線を変えるような表削っている部分をズームアップ現が可能ですまずは削るための大まかな流れを見ていきます次の図のような流れになります削る処理の流れ Coin.onMouseMove() マウスが動かされる Coin.noticeMove() Coin の中の noticemove() メソッドが呼ばれる ScratchMediator.

3 コンテンツではカスが邪魔な存在にさえなってしまいますしかしこのコンテンツではカスの存在こそがリアリティを演出する大きな役割となっていますカスに関しては多くのスクラッチを削って実際に出てきたカスをいくつも撮影しました 1 つのカスに対して 6 カット程度用意して画像編集ソフトで切り抜き色彩調整を行いましたその画像を用い Flash 上でアニメーションになるようにコマをつないでいますそしてスクラッチを削っている速さ ( 強さ ) に合わせてカスの大きさや角度を変えています実際には削りカスはコインにくっついてしまってこのコンテンツのように細かなカスがたくさん出てくることはありませんしかし実際に起こることを忠実に表現するよりもあえて頭の中にあるイメージとおりにカスを強調して表現しカスの表情てあります削ったところに細かなカスを実際よりもたくさん出現させることで削っているという爽快感を強調していますスクリプトスクラッチを削る動作のスクリプト化このスクリプトでは以下の各クラスを使ってそれぞれの動作を表現しますスクリプトで使用する各クラスクラス名 BitsOfScratch BitsOfScratchEdge Coin Scratch ScratchContents 概要スクラッチのカスを表すクラススクラッチを鋭角に削った際に出るカスを表すクラスコインを表すクラスドラッグ可能でコインを移動した際に ScratchMediator へ通知するスクラッチを表すクラス削ることができ削った際に自動的にカスを生成するこのスクラッチ全体を表すクラス全体を拡縮したり移動したりして削っている部分へズームアップする機能やバックグラウンドの画像を読み込む機能を持つ " カメラの動き ScratchMediator ScratchShape このコンテンツ全体の流れを制御するクラス各アイテムに変更があった際にどうするかをコントロールする主にコインがドラッグされた際にスクラッチへ削るよう命令を出すスクラッチの削る形を制御するクラス削る形をシェイプとして保持しコインを動かした際のスピード ( 強さ ) から削るサイズを調整するはじめに作ったバージョンではスクラッチ全体をズームさせて動かすことはしていませんでしたが実際に操作してみると何か迫力が足りませんそこで削っている部分をズームアップにしてカメラをアップしているような表現を加えました Flash には 3D ソフトのようにカメラの設定はありませんしかし対象のオブジェクトを動かすことで視線を変えるような表削っている部分をズームアップ現が可能ですまずは削るための大まかな流れを見ていきます次の図のような流れになります削る処理の流れ Coin.onMouseMove() マウスが動かされる Coin.noticeMove() Coin の中の noticemove() メソッドが呼ばれる ScratchMediator.colleagueChanged() Mediator( 監視役 ) にコインが動かされたことを通知する実際にスクラッチを削っているときに視線を近付けることはあまりないとは思いますが少なくとも削っている部分に集中しているでしょうそこで削っている部分にズームアップするという表現を加えましたこれにより自分が削っているというユーザーの視線がだいぶ強調され気持ちのよいコンテンツに仕上がったと思います Coin.getEdgeMC() Scratch.shave() コインから削るためのシェイプを取得するスクラッチに指定の引数で削るよう指示を出す 6 7

4 コインを動かしたとき onmousemove() イベントハンドラが呼び出されますこのイベントハンドラは Coin.noticeMove() メソッドで上書きされていて ScratchMediator.colleagueChanged() へコインが動いたことを通知しています ScratchMediator はコインが動かされたときにどうするかという判断をコントロールしますここではもちろんスクラッチを削る処理になります ScratchMediator は Coin.getEdgeMC() メソッドからコインがスクラッチと接しているエリアとなる領域を示す MC を取得し Scratch.shave へ必要な引数とともに呼び出しますこれがスクラッチを削るための大きな流れですこのスクラッチを削る際のメインの処理が書いてあるのが Scratch.shave() メソッドですこの処理にフォーカスを当ててスクリプトを見ていきます今回スクラッチを削る表現にはマスクではなく Flash 8 からの新機能であるビットマップデータを加工する手法を取りましたはじめはマスクとシェイプ描画 API を使うことで制作しようと考えましたが削り口が単調な形状となってしまい応用が利かないと感じてこの方法はやめました形状を自由にしたいと思うと特定の形状のシェイプを持ったMCをマスクに複数 attachmovie() していくことになりますしかしこうなると処理速度に不安を感じますそこで今回はその両方を解決できそうなビットマップデータを加工する方法を取りました Scratch.shave メソッドは引数を 3 つ取りますスクリプトで使用する引数引数 prevpoint var rectangle = new Rectangle(offset.x, offset.y, erasebitmap.width, erasebitmap.height); // 削る場合 if (!missflag) this.bitmap.copypixels(this.bitmap, rectangle, offset, erasebitmap, new Point(0, 0), false); // 削るのに失敗してすこし色が濃くなるとき else this.bitmap.copypixels(this.darkscratchbitmap, rectangle, offset); 概要 Point クラスのインスタンスで削りはじめる始点を表す " スクラッチを削る Scratch.shave メソッドのメインとなるスクリプトを見ていきます vector edge Vector クラスのインスタンスで始点の位置からどの方向にどのくらい削るかを表す MovieClip クラスのインスタンスで削っているときにカスとの接触を調べ接触した場合にはカスを転がすスクラッチを削る public function shave(prevpoint:point, vector:vector, edge:movieclip):void { var size = vector.size(); var currentpoint = new Point(prevPoint.x + vector.x, prevpoint.y + vector.y); // 削り口のサイズを変更 this.shapewrapped_mc.changesize(size); var erasebitmap = this.shapewrapped_mc.getshapebitmap(); ここでの Vector Point クラスは Flash.geom パッケージではなく org.graffiti.web.dotfla.data.type パッケージを使用しています最初のほうで行っている部分がまさにスクラッチを削る処理ですいっけんこのメソッドは長いスクリプトに見えますが多くは削るための領域を取得したりカスなどの演出のための処理であって実際にスクラッチのビットマップを削っているのは次の 1 行です this.bitmap.copypixels(this.bitmap, rectangle, offset, erasebitmap, new Point(0, 0), false); // 削るのに失敗して灰色になったとき var missmaxsize = 65; // 弱い力での削り方として認知する移動距離 var randommissmaxsize = 150; // これ以上の移動距離がある場合は灰色の削りにはしないしきい値 var missrand = 15; // missmaxsize 以上の移動距離でも灰色にする確率 var missflag = this.isscratchpoint(prevpoint) and (vector.size() < missmaxsize or (size < randommissmaxsize and MathUtil.randomInt(missRand) == 0)); for (var i = 0; i <= this.trimspan; i++) { var offset = new Point(prevPoint.x + (vector.x / this.trimspan) * i, prevpoint.y + (vector.y / this.trimspan) * i); BitmapData.copyPixels は指定の BitmapData に別の BitmapData の任意の矩形領域をコピーする機能ですオプションでαチャンネルを持つ BitmapDataを指定しその部分をαで抜く ( 削る ) ことができますここでは this.bitmap( スクラッチとなっているビットマップ ) に対して第 1 引数にスクラッチ自身の BitmapData である this.bitmapを指定しそして第 2 第 3 引数にて置き換える部分の矩形領域を指定しますここまででは置き換え元と置き換える素材が同じビットマップで同じ指定をしているので何も変化が起きませんオプションである第 4 引数にαチャンネルの erasebitmap を指定しスクラッチの BitmapData の任意の矩形部分をαチャンネルに置き換えていますこの矩形領域をαチャンネルで置き換えるという作業を 1 フレームの間に始点から終点まで指定の回数 (Scratch.TRIM_SPAN) 繰り返すことによってあたかも 1 フレーム間を直線で削っているように見せています 8 9

5 スクラッチにキズを付けるスクラッチは毎回削れるとは限りません弱く削ったときや滑ってしまうときにはスクラッチにキズを付けるようにしていますキズ自体は元のスクラッチ画像よりも明度の低いビットマップを用意してスクラッチを削るときと同じようにスクラッチのビットマップの矩形領域を明度の低いビットマップで置き換えています以下の部分です this.bitmap.copypixels(this.darkscratchbitmap, rectangle, offset); この場合はオプションのαチャンネルを使用せずに単純に明度の低いビットマップで置き換えているだけです " 削りカスとコインの当たり判定スクラッチを削っているときにコインがカスと接触した際にカスが転がるように演出していますその部分を見てみましょう削りカスとコインの当たり判定 // 削りカスの当たり判定 for (var i in this.arrbitsofscratch) { if (this.arrbitsofscratch[i].hittest(edge)) this.arrbitsofscratch[i].move(vector); " 削りカスの生成コインが動かされるたびに生成したのではステージはカスだらけになってしまうので削りカスを生成する条件は一定の確率で生成しています削りカスの生成 // 削りカスを生成 var bitsrand = 5; // 削りカスを生成する頻度 ( 大きいほど確率が下がる ) if (isscratchpoint(currentpoint)) { if (MathUtil.randomInt(bitsRand) == 0) this.createbitsofscratch(prevpoint, vector); // 鋭角をなした場合の処理 var thresholddeg = 150; // 折り返したとみなす角度 var edgebitsrand = 8; // 角を生成する確率 if (this.prevvector!= null and vector.getdegree(this.prevvector) >= thresholddeg) { if (MathUtil.randomInt(edgeBitsRand) == 0) this.createbitsofscratchedge(prevpoint, vector); またコインを削っているときに一定の角度以上で折り返したときにはそのエッジの部分にも折り返したとき用のカスを生成していますここでは角度が thresholddeg 以上の角度をなしたときに折り返しとみなしまたその折り返しの中でも edgebitsrand に 1 回だけ生成するようにしています // 削りカスの角の当たり判定 for (var i in this.arrbitsofscratchedge) { if (this.arrbitsofscratchedge[i].hittest(edge)) { this.arrbitsofscratchedge[i].removemovieclip(); this.arrbitsofscratchedge.splice(i, 1); こういったスクラッチを削る以外の演出を多く取り入れることでコンテンツのおもしろさを深めています第 3 引数で取られる MC がコインとスクラッチの接触面を定義した MC になりますその接触面である MC とスクラッチのカスを格納した配列 Scratch.arrBitsOfScratch を 1つ1つMovieClip.hitTest() メソッドで衝突しているかを確認し衝突していればそのカス (BitsOfScratch) の BitsOfScratch.move() メソッドにより指定のベクトル方向へ転がしています鋭角をなした際に生成された削りカスに関しては転がすのではなく MovieClip.removeMovieClip() によりステージ上から消しています

16 コピー

16 コピー STAC STAR STAC STAR AS1.0 AS2.0 Sample URL http://stacstar.jp/hand_transfer/ Archive handtransfer.zip File ActionScript 1.0 Flash Player 8 Flash 8 4 5 発案デザイン αビデオを使った画面遷移 HTML と違い Flash は画面の遷移がシームレスに