CreateJS実践講座

描画のカラーにアルファを加える

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Graphics.getRGB()メソッドを用いると、整数のカラー値で描画色を定めることができます。
講師:
09:20

字幕

このレッスンでは描画するカラーに アルファを加えてみます 今画面でお見せしているのは オブジェクト同士が引っ張り合いながら アニメーションしているのですが そのオブジェクト同士を 線で結んでいます ただその線が薄いところと 濃いところがあります 実は力が大きく掛かっている所 つまりオブジェクト同士が 近い所は太く オブジェクトが遠ざかると 細くなっています もう少し厳密に言うと アルファを線に加えることで 遠い所と近い所の線の色が 変わっているということなのです アルファを描画のカラーに加えるという ことについてご説明します Dreamweaverで開いた このHTMLドキュメントでは まだ線にアルファが加わっていません createjsで描画をするときには カラーを指定しますが そのときに指定するカラーというのは 文字列になっています そして丸い点のオブジェクト それから線 両方ともこのcolorNameという 変数に入れた 文字列"black"が指定されています この状態ではアルファを 加えることができません では今現在の状況を 確認しておきましょう 「ファイル」で 「ブラウザーでプレビュー」です 線がちゃんとオブジェクト間に 加えられていますけれども どれも同じ太さ 同じ濃さで見えてしまいます これを 遠ざかると薄くなるように という指定にしたいと思います そのために メソッドを一つご紹介します createjsのグラフィクスクラスには getRGBというメソッドがあります これは引数を整数で指定します そしてその結果 文字列の カラー値を返してくれる これこそまさに 求めていたメソッドですね そして2つ指定の仕方がありまして ひとつはGraphics.getRGB カッコの中にRGBのカラーを 整数で渡します 16進法でも結構です 16進法の場合には0xffffff といった形で指定しますね それからカンマを付けて 2つ目にアルファを指定します もう一つの文法がありまして 今度はGraphics.getRGBの中に R, G, B, アルファ これをすべて整数で指定します 戻るのはどちらも カラー値を示す文字列です ですからそれを塗りや線に 使えば良いということになります 個々の丸いボールのオブジェクトの カラーを指定しているのは このcreateBallという 関数で作っていますので この第2引数です ここでcolorNameという 文字列を使っていますから これは残しておきましょう そして一方で 黒に相当する整数です ですからcolorIntとしましょう integerですね そしてこの場合には 16進法で 付けることが多いでしょうから 0x0 黒ですね そしてここで"black"と 文字列の カラー値を決め打ちしていますけれども ここでcreates.Graphics.getRGBと 使ってしまいましょう そして"black"はコメントアウトします この中で colorIntを指定すれば 文字列"black"に 代えてしまうことができます こうしておけば こちらのカラーを変えれば ボールの色も変わる 自動的に変わるようになります では問題がないかどうか いちおう確認しておきましょう もう一つ念のため注意しますけれども Graphics.getRGB 静的メソッドと言いますけれど クラス名を直接つけてgetRGBは使います では1回保存して確認しましょう ブラウザーでプレビューします 先ほどと変わらないように 黒い丸と線が描かれていればOKです では今度は 線を描く方の処理に アルファを加えることにしましょう オブジェクト同士を結ぶ直線は オブジェクト同士の間の加速度を計算する springという関数の中で x,y座標のオブジェクト間の距離を調べて そして加速度に応じて速度を決めている そのあと ここで呼び出している drawLineという関数で 線のカラーをcolorNameと いうふうに指定しています これを数値に基づいて変える getRGBに変えてしまいましょう colorNameとします ですから今までは colorNameは グローバルな変数を参照していたのですが 新たにここにローカル変数を設けましたので このローカル変数の中にある文字列が 引数として参照されることになります ではここでcreatejsの Graphics.getRGBですね そして colorIntの方を参照します グローバル変数からです そしてアルファを決めましょう 本当は距離に応じて変えたいのですが ちゃんと効果があるかどうかということを 確認するため とりあえず0.2としましょう では保存して確認します ファイルを保存して ブラウザーでプレビューです 線が薄くなりました 細くなったようにも見えますね 実は薄くなっているだけなんですけれども うっすらとしました もちろん距離とは関係なく 薄くなっていますから これを距離と反比例して 薄くするようにしましょう つまり距離が近いほど濃く 遠いほど薄くということです ではDreamweaverの方に戻ります オブジェクト間の距離に関わる変数を 先に確認しておきましょう このmax = 100というのは オブジェクト間の距離が 100より小さい時には お互いに引っ張り合う力が 働くということです でも実際に比較する時にはx座標 y座標の 差の2乗で比べた方が都合が良かったので maxの2乗を limitという変数に入れました ですからこのlimitと x,y座標の2乗の和を比べれば 判定ができたので このlimitを使っています けれども今回は このspringという 関数の中でカラーを決める時 に 距離の2乗ではなくて 距離自体と比較したいと思います ですから2乗の和は平方根を取ります ということで ここでは新たに distanceという変数を設けて 平方根を取ります スクエアルートの略なんですが sqrt x座標とy座標の2乗の和です 厳密に言いますと 座標の差の2乗の和ですね これを使って これが遠いほど 色が薄くなるということです ではまずmaxがありましたね max / max これは当然1です ですからこのままですと 全くアルファは落ちない 完全な不透明ですね そこで距離が長くなるほど ということで この分子の方に - distanceを加えます - distanceを加えるというよりは 引くんですけどね そうするとdistanceが 大きくなればなるほど 分子が小さくなります そしてdistanceとmaxを比べた場合 maxの2乗がlimitです distanceの2乗が xの2乗とyの2乗の和ですから limitよりも大きくなることはないですね 大きくなったらこのif文を通りません ということなので この中は 絶対にマイナスにはなりません ということなので安心して この処理で確認をしてみましょう ファイルを保存して ブラウザーでプレビューします どうでしょうか 距離が離れるほど薄くなる 距離が近いほど濃い というふうになりました このレッスンでは 線の描画にアルファを加えました 描画のときcreatejsでは 文字列のカラーを渡さなければなりません けれどアルファを数値で渡したかったので 今回使ったのは Graphics.getRGBです そして引数には整数のRGBカラー そしてアルファを やはり数値で指定することができます その時に 距離が離れるほど 薄くしたかったので 三平方の定理で距離を求め その距離の値を分子から引いて 反比例させることで 距離が遠く離れるほどアルファを下げました

CreateJS実践講座

CreateJSは、これまでFlashでしかできなかったようなインタラクティブなコンテンツや多彩なアニメーションを作ることができるJavaScriptライブラリです。このコースではチャプターごとにJavaScriptコードのサンプルをひとつずつとりあげながら、その制作方法を一歩一歩段階的に解説します。

3時間26分 (37 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年07月07日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。