ピクセルの操作

Flash Player 9 以降、Adobe AIR 1.0 以降

BitmapData クラスには、ピクセルデータ値を操作するための一連のメソッドがあります。

個々のピクセルの操作

ピクセルレベルでビットマップイメージの外観を変更するには、最初に、操作対象の領域にあるピクセルのカラー値を取得する必要があります。 これらのピクセルの値を読み取るには、 getPixel() メソッドを使用します。

getPixel() メソッドは、パラメーターとして渡される x, y(ピクセル)座標から RGB 値を取得します。操作対象のピクセルのいずれかに透明度、つまりアルファチャンネルの情報が含まれている場合は、 getPixel32() メソッドを使用する必要があります。このメソッドは RGB 値も取得しますが、 getPixel() とは異なり、 getPixel32() によって返される値には、選択されたピクセルのアルファチャンネル(透明度)値を示す追加データがあります。

または、ビットマップに含まれるピクセルの色または透明度だけを変更するのであれば、 setPixel() または setPixel32() メソッドを使用します。ピクセルの色を設定するには、いずれかのメソッドに x, y 座標とカラー値を渡すだけです。

次の例では、 setPixel() を使用して、緑の BitmapData 背景に十字形を描画します。その後、 getPixel() を使用して、座標値が 50, 50 のピクセルからカラー値を取得し、戻り値をトレースします。

import flash.display.Bitmap; 
import flash.display.BitmapData; 
 
var myBitmapData:BitmapData = new BitmapData(100, 100, false, 0x009900); 
 
for (var i:uint = 0; i < 100; i++) 
{ 
    var red:uint = 0xFF0000; 
    myBitmapData.setPixel(50, i, red); 
    myBitmapData.setPixel(i, 50, red); 
} 
 
var myBitmapImage:Bitmap = new Bitmap(myBitmapData); 
addChild(myBitmapImage); 
 
var pixelValue:uint = myBitmapData.getPixel(50, 50); 
trace(pixelValue.toString(16));

単一ピクセルではなく、ピクセルのグループの値を読み取る場合は、 getPixels() メソッドを使用します。このメソッドは、パラメーターとして渡されるピクセルデータの矩形領域からバイト配列を生成します。 バイト配列の各エレメント、つまりピクセル値は、符号なしの整数、つまり 32 ビットの乗算されていないピクセル値です。

反対に、ピクセルのグループの値を変更(または設定)するには、 setPixels() メソッドを使用します。このメソッドは rect および inputByteArray の 2 つのパラメーターを想定しています。これらのパラメーターを組み合わせて、ピクセルデータ( inputByteArray )の矩形領域( rect )を出力します。

データが inputByteArray から読み取られ、書き込まれると、配列内の各ピクセルに対して ByteArray.readUnsignedInt() メソッドが呼び出されます。何らかの理由により、 inputByteArray に矩形全体に相応するピクセルデータが含まれていない場合は、メソッドはその段階でイメージデータの処理を停止します。

重要な点は、ピクセルデータの取得と設定では、バイト配列は 32 ビットのアルファ、赤、緑、青(ARGB)ピクセル値を想定していることです。

次の例では、 getPixels() メソッドと setPixels() メソッドを使用して、ある BitmapData オブジェクトから別の BitmapData オブジェクトにピクセルのグループをコピーします。

import flash.display.Bitmap; 
import flash.display.BitmapData; 
import flash.utils.ByteArray; 
import flash.geom.Rectangle; 
 
var bitmapDataObject1:BitmapData = new BitmapData(100, 100, false, 0x006666FF); 
var bitmapDataObject2:BitmapData = new BitmapData(100, 100, false, 0x00FF0000); 
 
var rect:Rectangle = new Rectangle(0, 0, 100, 100); 
var bytes:ByteArray = bitmapDataObject1.getPixels(rect); 
 
bytes.position = 0; 
bitmapDataObject2.setPixels(rect, bytes); 
 
var bitmapImage1:Bitmap = new Bitmap(bitmapDataObject1); 
addChild(bitmapImage1); 
var bitmapImage2:Bitmap = new Bitmap(bitmapDataObject2); 
addChild(bitmapImage2); 
bitmapImage2.x = 110;

ピクセルレベルの衝突検出

BitmapData.hitTest() メソッドは、ビットマップデータと別のオブジェクトまたはポイント間でピクセルレベルの衝突を検出します。

BitmapData.hitTest() メソッドは、次の 5 つのパラメーターを受け入れます。

  • firstPoint (ポイント):このパラメーターは、最初の BitmapData の左上のピクセル位置であり、ヒットテストが実行される場所を指します。

  • firstAlphaThreshold (uint):このパラメーターは、このヒットテストで不透明と見なされるアルファチャンネルの最大値です。

  • secondObject (オブジェクト):このパラメーターは、影響を受ける領域を示します。 secondObject オブジェクトは、Rectangle、Point、Bitmap または BitmapData オブジェクトです。このオブジェクトは、衝突検出が実行されるヒット領域を指します。

  • secondBitmapDataPoint (ポイント):このパラメーターはオプションであり、2 番目の BitmapData オブジェクトのピクセル位置を指定します。このパラメーターは、 secondObject の値が BitmapData オブジェクトである場合にのみ使用します。デフォルト値は null です。

  • secondAlphaThreshold (uint):このパラメーターはオプションであり、2 番目の BitmapData オブジェクトで不透明と見なされるアルファチャンネルの最大値です。デフォルト値は 1 です。このパラメーターは、 secondObject の値が BitmapData オブジェクトで、両方の BitmapData オブジェクトが透明である場合にのみ使用します。

不透明なイメージで衝突を検出する場合、ActionScript はイメージを完全に不透明な矩形または境界ボックスとして扱います。 または、透明なイメージでピクセルレベルのヒットテストを実行する場合は、両方のイメージが透明である必要があります。 これに加え、ActionScript ではアルファしきい値パラメーターを使用し、ピクセルがどの段階で透明から不透明に変わるかを決定します。

次の例では、3 つのビットマップイメージを作成し、false を返す衝突ポイントと true を返す衝突ポイントを使用してピクセル衝突を確認します。

import flash.display.Bitmap; 
import flash.display.BitmapData; 
import flash.geom.Point; 
 
var bmd1:BitmapData = new BitmapData(100, 100, false, 0x000000FF); 
var bmd2:BitmapData = new BitmapData(20, 20, false, 0x00FF3300); 
 
var bm1:Bitmap = new Bitmap(bmd1); 
this.addChild(bm1); 
 
// Create a red square. 
var redSquare1:Bitmap = new Bitmap(bmd2); 
this.addChild(redSquare1); 
redSquare1.x = 0; 
 
// Create a second red square. 
var redSquare2:Bitmap = new Bitmap(bmd2); 
this.addChild(redSquare2); 
redSquare2.x = 150; 
redSquare2.y = 150; 
 
// Define the point at the top-left corner of the bitmap. 
var pt1:Point = new Point(0, 0); 
// Define the point at the center of redSquare1. 
var pt2:Point = new Point(20, 20); 
// Define the point at the center of redSquare2. 
var pt3:Point = new Point(160, 160); 
 
trace(bmd1.hitTest(pt1, 0xFF, pt2)); // true 
trace(bmd1.hitTest(pt1, 0xFF, pt3)); // false