Proper way to apply translation to vertices - actionscript-3

I have the simple vertex shader:
m44 op, va0, vc0
mov v0, va1
and the fragment shader:
mov oc, v0
I pass this vertices to it:
x y z w r g b
-0.3, -0.3, 0, 1, 1, 0, 0,
0, 0.3, 0, 1, 0, 1, 0,
0.3, -0.3, 0, 1, 0, 0, 1
The result triangle looks like I expected. Now I want to apply some translation to the result triangle. I have declared a matrix, call appendTranslation(0.2, 0, 0) and pass it to the vertex shader. The problem is that the triangle remained in the same position but with different vertices position. It looks like this:
Why I got this result, and what is the proper way to apply translation to vertices?
Here is full code of my program:
package tests
{
import com.adobe.utils.AGALMiniAssembler;
import flash.display.Sprite;
import flash.display3D.Context3D;
import flash.display3D.Context3DProgramType;
import flash.display3D.Context3DRenderMode;
import flash.display3D.Context3DVertexBufferFormat;
import flash.display3D.IndexBuffer3D;
import flash.display3D.Program3D;
import flash.display3D.VertexBuffer3D;
import flash.events.Event;
import flash.geom.Matrix3D;
import flash.utils.ByteArray;
[swf(width="500", height="500")]
public class Stage3dTest extends Sprite
{
private var _context:Context3D;
private var _vertexBuffer:VertexBuffer3D;
private var _indexBuffer:IndexBuffer3D;
private var _program:Program3D;
private var _mat:Matrix3D;
public function Stage3dTest() {
if (stage) {
onAddedToStage();
} else {
addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
}
}
private function onAddedToStage(event:Event = null):void {
this.stage.stage3Ds[0].addEventListener(Event.CONTEXT3D_CREATE, onStage3dContext3DCreate);
this.stage.stage3Ds[0].requestContext3D(Context3DRenderMode.SOFTWARE);
}
private function onStage3dContext3DCreate(event:Event):void {
_mat = new Matrix3D();
_mat.appendTranslation(0.2, 0, 0);
_context = this.stage.stage3Ds[0].context3D;
_context.configureBackBuffer(500, 500, 0, false);
_vertexBuffer = _context.createVertexBuffer(3, 7);
_indexBuffer = _context.createIndexBuffer(3);
var p:Number = 0.3;
var vertexData:Vector.<Number> = new <Number>[
-p, -p, 0, 1, 1, 0, 0,
0, p, 0, 1, 0, 1, 0,
p, -p, 0, 1, 0, 0, 1
];
_vertexBuffer.uploadFromVector(vertexData, 0, 3);
_indexBuffer.uploadFromVector(new <uint>[0, 1, 2], 0, 3);
createAndCompileProgram();
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function createAndCompileProgram():void {
_program = _context.createProgram();
var assembler:AGALMiniAssembler = new AGALMiniAssembler();
var code:String = "";
code += "m44 op, va0, vc0\n"+
"mov v0, va1\n";
var vertexShader:ByteArray = assembler.assemble(Context3DProgramType.VERTEX, code);
code = "mov oc, v0\n";
var fragmentShader:ByteArray = assembler.assemble(Context3DProgramType.FRAGMENT, code);
_program.upload(vertexShader, fragmentShader);
}
private function onEnterFrame(event:Event):void {
_context.clear(0.9, 0.9, 0.9, 1);
_context.setProgram(_program);
_context.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, _mat);
_context.setVertexBufferAt(0, _vertexBuffer, 0, Context3DVertexBufferFormat.FLOAT_4);
_context.setVertexBufferAt(1, _vertexBuffer, 4, Context3DVertexBufferFormat.FLOAT_3);
_context.drawTriangles(_indexBuffer);
_context.present();
}
}
}

You need to transpose a matrix. You can do it manually or you can pass a parameter here:
_context.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, _mat, true);

Related

How to use Matrix3D.appendTranslation()?

With stage 3d I set up a basic triangle, and I can use append rotation and append scale and everything works, but using append translation on the z axis, the triangle will dissapear with the translation being 1 or higher. With other shapes it would dissapear with only 3 or higher. And it doesn't look like the triangle is getting any smaller/farther away between 0 and 0.9 translation. The translation on the x and y axis do work though.
Here are my shader codes:
private static const VERTEX_SHADER_SOURCE:String = "m44 op, va0, vc1";
private static const FRAGMENT_SHADER_SOURCE:String = "mov oc, fc0";
my render loop:
addEventListener(Event.ENTER_FRAME, enter);
var t:Number=0;
function enter():void {
context3D.clear();
context3D.setProgram(program);
var m:Matrix3D = new Matrix3D;
m.appendTranslation(0, 0, t);
t+=0.01;
context3D.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 1, m, true);
context3D.setVertexBufferAt(0, buffer, 0, Context3DVertexBufferFormat.FLOAT_3);
context3D.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 0, color);
context3D.drawTriangles(indexBuffer);
context3D.present();
}
my full code:
var assembler:AGALMiniAssembler = new AGALMiniAssembler();
assembler.assemble(Context3DProgramType.VERTEX, VERTEX_SHADER_SOURCE);
if (assembler.error) {
trace("vertex shader error " +assembler.error);
return;
}
var vertexShaderByteCode:ByteArray = assembler.agalcode;
assembler.assemble(Context3DProgramType.FRAGMENT, FRAGMENT_SHADER_SOURCE);
if (assembler.error) {
trace("fragment shader error " + assembler.error);
return;
}
var fragmentShaderByteCode:ByteArray = assembler.agalcode;
var program:Program3D = context3D.createProgram();
try {
program.upload(vertexShaderByteCode, fragmentShaderByteCode);
}
catch (err:Error) {
trace("couldnt upload shader program" + err);
return;
}
color = new <Number>[0.9296875, 0.9140625, 0.84765625, 1];
var verts:Vector.<Number> = Vector.<Number>([
0.5, 0, 0,
-0.5, 0, 0,
0, 0.5, 0
]);
var buffer:VertexBuffer3D = context3D.createVertexBuffer(3, 3);
buffer.uploadFromVector(verts, 0, 3);
var indices:Vector.<uint> = Vector.<uint>([0, 1, 2])
var indexBuffer:IndexBuffer3D = context3D.createIndexBuffer(3);
indexBuffer.uploadFromVector(indices, 0, 3);
addEventListener(Event.ENTER_FRAME, enter);
var t:Number=0;
function enter():void {
context3D.clear();
context3D.setProgram(program);
var m:Matrix3D = new Matrix3D;
m.appendTranslation(0, 0, t);
t+=0.01;
context3D.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 1, m, true);
context3D.setVertexBufferAt(0, buffer, 0, Context3DVertexBufferFormat.FLOAT_3);
context3D.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 0, color);
context3D.drawTriangles(indexBuffer);
context3D.present();
}

as3 starling tile array

Im trying to make a tile array system using flashDevelop and starling.
I think i complete that but i dont understand how i make bounds,intersects between the tile array and my hero.
Note that i make it using tutorials around the internet and not along.
Here are the 2 classes
public class level1 extends Sprite
{
public var map:Array = [
[1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[1, 0, 0, 0, 1],
[1, 1, 1, 1, 1],
];
//public var object:Image;
//public var data:int;
public function level1()
{
super();
this.addEventListener(starling.events.Event.ADDED_TO_STAGE, onAdd);
}
private function onAdd(event:Event):void
{
drawScreen(map, 90);
}
public function drawScreen(map:Array, cellSize:int = 90):void
{
for(var row:int = 0; row < map.length; row++)
{
for(var column:int = 0; column < map[row].length; column++)
{
var data:int = map[row][column];
// Empty tile, move onto the next item.
if(data == 0) continue;
var object:Image;
if (data == 1) object = new Image(Assets.getTexture("ESAYBTN"));
if (data == 2) object = new Image(Assets.getTexture("TITLE"));
if(object != null)
{
object.x = column * 94;
object.y = row * 29;
stage.addChild(object);
}
}
}
}
}
public class inGame extends Sprite
{
public var Hero:heroClass;
private var enem2:enemy2Class;
private var enemiesArray:Vector.<enemy2Class>;
private var posX:int;
private var posY:int;
private var hitpoints:int;
private var _level1:level1;
public function inGame()
{
super();
this.addEventListener(starling.events.Event.ADDED_TO_STAGE, onAdd);
}
private function onAdd(event:Event):void
{
this.removeEventListener(Event.ADDED_TO_STAGE, onAdd);
enemiesArray = new Vector.<enemy2Class>();
drawScreen();
}
private function drawScreen():void
{
Hero = new heroClass(50, 50, 1);
this.addChild(hero);
_level1 = new level1();
this.addChild(_level1);
createenemies(450, 50, 6);
createenemies(400, 50, 5);
createenemies(350, 50, 4);
createenemies(300, 50, 3);
createenemies(250,50, 2);
}
public function createenemies(posX:int, posY:int, hitpoints:int):void
{
var enemies:enemy2Class = new enemy2Class(posX,posY,hitpoints);
this.addChild(enemies);
enemiesArray.push(enemies);
}
public function hideInGame():void
{
this.visible = false;
}
public function showInGame():void
{
this.visible = true;
this.addEventListener(Event.ENTER_FRAME, gameLoop);
}
private function gameLoop(Event):void
{
var enemiestoloop:enemy2Class;
for (var i:uint = 0; i < enemiesArray.length; i++)
{
enemiestoloop = enemiesArray[i];
//enemiestoloop.x-=2;
if (enemiestoloop.bounds.intersects(enem.bounds))
{
enemiestoloop.x = 400;
enemiestoloop._hitpoints--;
}
if (enemiestoloop._hitpoints <= 0)
{
enemiesArray.splice(i, 1);
this.removeChild(enemiestoloop);
}
}
hero.y++;
if(hero.bounds.intersects("here goes the map???"))
{
hero.y--;
}
}
}
So how i write if the hero hit the map array object 1?
Add all the parts of the tile array to a single display object then just call intersects bounds on the single display object.

AS3: Tile based movement system

very new to as3 and using a tutorial found here to try my hand at tile based movement. However, i cant seem to get the code to work. I keep getting the error code:
"1046: Type was not found or was not a compile-time constant:hero."
The line it is reference is:
var character: hero = new hero();
My full code is:
package {
import flash.display.MovieClip;
import flash.events.*;
public class main2 extends MovieClip {
var hero;
public function main2() {
// Create map
var mapWidth = 10;
var mapHeight = 10;
var tileSide = 32;
var totalTiles = mapWidth * mapHeight;
var myMap: Array = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 1, 1, 0, 1],
[1, 0, 0, 0, 0, 0, 1, 0, 0, 1],
[1, 0, 0, 1, 0, 0, 1, 0, 0, 1],
[1, 0, 0, 1, 1, 1, 1, 0, 0, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
];
for (var i: int = 0; i < mapHeight; i++) {
for (var u: int = 0; u < mapWidth; u++) {
var cell: MovieClip = new tile();
cell.gotoAndStop(myMap[i][u] + 1);
cell.x = tileSide * u;
cell.y = tileSide * i;
addChild(cell);
}
}
// Hero management
var heroSpawnX = 4;
var heroSpawnY = 2;
var character: hero = new hero();
addChild(character);
character.x = heroSpawnX * tileSide;
character.y = heroSpawnY * tileSide;
var heroX = heroSpawnX;
var heroY = heroSpawnY;
// Basic movement
stage.addEventListener(KeyboardEvent.KEY_DOWN, movement);
function movement(event: KeyboardEvent):void {
if (event.keyCode == 40 && myMap[heroY + 1][heroX] == 0) {
character.gfx.rotation = 0;
character.y += tileSide;
heroY++;
}
if (event.keyCode == 38 && myMap[heroY - 1][heroX] == 0) {
character.gfx.rotation = 180;
character.y -= tileSide;
heroY--;
}
if (event.keyCode == 39 && myMap[heroY][heroX + 1] == 0) {
character.gfx.rotation = 270;
character.x += tileSide;
heroX++;
}
if (event.keyCode == 37 && myMap[heroY][heroX - 1] == 0) {
character.gfx.rotation = 90;
character.x -= tileSide;
heroX--;
}
}
}
}
}
Any help on this issue would be great, been at it for an hour now.
also if you have any recommendations on as3 resources please let me know...specifically tiled based systems.
thanks is advanced.
That error means your class Hero is not found. you should put the hero.as file at where your main2.as file is(at same location as main2.as). and then import it:
import Hero;
 
and my recommendation on as3 resources:
1.http://republicofcode.com:I think best site for starting as3.I started from it.
2.http://kirupa.com: a good site with a lot of articles
3.http://flashandmath.com: for professionals
and don't forget Adobe ActionScript-3 API reference:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/
I   H☺ P E   this helps !

AS3 Softbody texture starling

I have created a soft body circle in nape. And now I'm trying to get it texturized. But I'm having trouble, and I can't find the answer. Thats why I'm turning to you guys.
Im trying to do what he is doing in this objective c tutorial:
http://www.uchidacoonga.com/2012/04/soft-body-physics-with-box2d-and-cocos2d-part-44/
any ideas on how to do this with starling and stage3d?
You have to write a custom display object (see Starling manual). Here's a basic example:
package
{
import com.adobe.utils.AGALMiniAssembler;
import flash.display3D.Context3D;
import flash.display3D.Context3DProgramType;
import flash.display3D.Context3DVertexBufferFormat;
import flash.display3D.IndexBuffer3D;
import flash.display3D.VertexBuffer3D;
import flash.geom.Point;
import flash.utils.ByteArray;
import starling.core.RenderSupport;
import starling.core.Starling;
import starling.display.DisplayObject;
import starling.errors.MissingContextError;
import starling.textures.Texture;
public class Ball extends DisplayObject
{
private static const PROGRAM_NAME:String = "ball";
private var _texture:Texture;
private var _numSides:uint;
private static const data32PerVertex:uint = 4;
private var _vertices:Vector.<Number>;
private var _indices:Vector.<uint>;
private var _vertexBuffer:VertexBuffer3D;
private var _indexBuffer:IndexBuffer3D;
public function Ball(initialX:Number, initialY:Number, initialR:Number, texture:Texture, numSides:uint = 10) {
_texture = texture;
_numSides = numSides;
// if the texture is a SubTexture (i.e. a texture from an atlas), then you need
// to modify these values to match the sub-texture UV bounds.
var minU:Number = 0, minV:Number = 0, maxU:Number = 1, maxV:Number = 1;
setupGeometry(initialX, initialY, initialR, minU, minV, maxU, maxV);
createBuffers();
registerPrograms();
}
private function setupGeometry(initialX:Number, initialY:Number, initialR:Number, uMin:Number, vMin:Number, uMax:Number, vMax:Number):void {
const numVertices:uint = _numSides + 1,
numSideVertices:uint = _numSides,
txtCu:Number = (uMin + uMax) / 2, // center of the circle in UV coords
txtCv:Number = (vMin + vMax) / 2,
txtRu:Number = uMax - txtCu, // radiuses of the circle in UV coords
txtRv:Number = vMax - txtCv;
_vertices = new Vector.<Number>(data32PerVertex * numVertices, true);
_indices = new Vector.<uint>(3 * _numSides, true);
var centerVectexIndex:uint = _numSides;
// side vertices
for (var sideVertexI:uint = 0; sideVertexI < numSideVertices; ++sideVertexI) {
var dataOffset:uint = sideVertexI * data32PerVertex,
angle:Number = 2 * Math.PI * sideVertexI / _numSides,
sinA:Number = Math.sin(angle),
cosA:Number = Math.cos(angle);
_vertices[dataOffset ] = initialX + initialR * cosA; // x
_vertices[dataOffset + 1] = initialY + initialR * sinA; // y
_vertices[dataOffset + 2] = txtCu + txtRu * cosA; // u
_vertices[dataOffset + 3] = txtCv + txtRv * sinA; // v
var indexOffset:uint = 3 * sideVertexI;
_indices[indexOffset ] = centerVectexIndex;
_indices[indexOffset + 1] = sideVertexI;
_indices[indexOffset + 2] = (sideVertexI + 1) % numSideVertices;
}
// center vertex
dataOffset = centerVectexIndex * data32PerVertex;
_vertices[dataOffset ] = initialX; // x
_vertices[dataOffset + 1] = initialY; // y
_vertices[dataOffset + 2] = txtCu; // u
_vertices[dataOffset + 3] = txtCv; // v
}
private function createBuffers():void {
var context:Context3D = Starling.context;
if (context == null) {
throw new MissingContextError();
}
_vertexBuffer && _vertexBuffer.dispose();
_indexBuffer && _indexBuffer.dispose();
const verticesCount:uint = _numSides + 1;
_vertexBuffer = context.createVertexBuffer(verticesCount, 4);
_vertexBuffer.uploadFromVector(_vertices, 0, verticesCount);
const indicesCount:uint = 3 * _numSides; // _numSides triangles, 3 indices per each triangle
_indexBuffer = context.createIndexBuffer(indicesCount);
_indexBuffer.uploadFromVector(_indices, 0, indicesCount);
}
private function registerPrograms():void {
var starling:Starling = Starling.current;
if (starling.hasProgram(PROGRAM_NAME)) {
return;
}
// va0.xy - position
// va1.xy - UV coords
// vc0-vc3 - mvp matrix
var vertexAGAL:String =
"m44 op, va0, vc0 \n" +
"mov v0, va1";
var fragmentAGAL:String =
"tex oc, v0, fs0 <2d, clamp, linear, mipnone> \n"; // just sample texture color
var asm:AGALMiniAssembler = new AGALMiniAssembler(),
vertexBytecode:ByteArray = asm.assemble(Context3DProgramType.VERTEX, vertexAGAL),
fragmentBytecode:ByteArray = asm.assemble(Context3DProgramType.FRAGMENT, fragmentAGAL);
starling.registerProgram(PROGRAM_NAME, vertexBytecode, fragmentBytecode);
}
override public function render(support:RenderSupport, parentAlpha:Number):void {
var context:Context3D = Starling.context;
if (context == null) {
throw new MissingContextError();
}
support.finishQuadBatch();
// setup
support.applyBlendMode(_texture.premultipliedAlpha);
context.setProgram(Starling.current.getProgram(PROGRAM_NAME));
context.setVertexBufferAt(0, _vertexBuffer, 0, Context3DVertexBufferFormat.FLOAT_2); // position, va0
context.setVertexBufferAt(1, _vertexBuffer, 2, Context3DVertexBufferFormat.FLOAT_2); // uv, va1
context.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, support.mvpMatrix3D, true); // mvp matrix, vc0-vc3
context.setTextureAt(0, _texture.base); // texture, fs0
// draw
context.drawTriangles(_indexBuffer);
support.raiseDrawCount();
// clean up
context.setVertexBufferAt(0, null);
context.setVertexBufferAt(1, null);
context.setTextureAt(0, null);
}
override public function hitTest(localPoint:Point, forTouch:Boolean = false):DisplayObject {
var isHit:Boolean = false;
// to achieve proper mouse handling, you need to place here the code
// that checks if localPoint is contained inside any of triangles and
// sets isHit flag accorgingly.
return isHit ? this : null;
}
}
}
Usage example:
package
{
import flash.display.BitmapData;
import flash.display.GradientType;
import flash.display.Graphics;
import flash.display.Sprite;
import flash.geom.Matrix;
import starling.display.Sprite;
import starling.textures.Texture;
public class BallExperiment extends starling.display.Sprite
{
public function BallExperiment() {
}
public function start():void {
const numSides:uint = 7;
var txt:Texture = createBallTxt(numSides, true);
var ball:Ball = new Ball(200, 200, 50, txt, numSides);
addChild(ball);
}
private function createBallTxt(numSides:uint, debugFillBcgr:Boolean = false):Texture {
var canvas:flash.display.Sprite = new flash.display.Sprite(),
g:Graphics = canvas.graphics;
// as we don't want to use sub-textures in this simple example, we need this
// number to be a power of two: otherwise Starling will internally create
// a power-of-two-sized texture and return a sub-texture of this bigger texture.
const size:Number = 512;
// we need to make the radius of a ball texture to be smaller than size/2 in order
// to prevent the texture from extending beyond our triangles.
var rScale:Number = Math.cos(Math.PI / numSides),
r:Number = rScale * (size / 2);
g.lineStyle(0, 0, 0);
// draw uniform background to show actual triangulation
if (debugFillBcgr) {
g.beginFill(0xBB4400, 0.2);
g.drawRect(0, 0, size, size);
g.endFill();
}
// draw the ball
g.beginFill(0x0000DD);
g.drawCircle(size / 2, size / 2, r);
var m:Matrix = new Matrix();
m.createGradientBox(size, size);
g.beginGradientFill(GradientType.LINEAR, [0x00DD00, 0x00DD00], [0, 1], [0, 255], m);
g.drawCircle(size / 2, size / 2, r);
g.endFill();
const smallCircleR:Number = r / 10,
smallCircleCR:Number = r - 2 * smallCircleR;
g.beginFill(0xBB0000);
for (var i:uint = 0; i < numSides; ++i) {
var angle:Number = 2 * Math.PI * i / numSides,
cx:Number = size / 2 + smallCircleCR * Math.cos(angle),
cy:Number = size / 2 + smallCircleCR * Math.sin(angle);
g.drawCircle(cx, cy, smallCircleR);
}
g.drawCircle(size / 2, size / 2, smallCircleR);
g.endFill();
// create and return the texture
var bmd:BitmapData = new BitmapData(size, size, true, 0);
bmd.draw(canvas);
return Texture.fromBitmapData(bmd);
}
}
}
Example runner:
package
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import starling.core.Starling;
import starling.events.Event;
[SWF(width = 600, height = 500, frameRate = 60)]
public class StarlingTestRunner extends Sprite
{
public function StarlingTestRunner() {
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
Starling.multitouchEnabled = false;
Starling.handleLostContext = false;
var starling:Starling = new Starling(BallExperiment, stage);
starling.showStats = true;
starling.simulateMultitouch = true;
starling.enableErrorChecking = true;
starling.addEventListener(Event.ROOT_CREATED, onTestCreated);
starling.start();
}
private function onTestCreated(e:Event, test:BallExperiment):void {
test.start();
}
}
}
The result:
To distort the ball, just modify those elements of _vertices vector that correspond to x and y coordinates (i.e. elements with indices 4n and 4n + 1, where n = 0 .. numSides) and then re-upload _vertices array to the vertex buffer.
Alternatively, you can implement ball geometry using VertexData helper class, as shown in Starling manual.

Actionscript color picker

I am trying to create a Colorpicker control for my application. I prefer pure actionscript. Does someone know how to create a picker like this: http://parasolarchives.com/tools/colorpicker/
Most interestingly I am interested how to draw the gradient because the gradient has a saturation,
this is a picker i use myself, hope it'll be useful:
package lazylib.ui.generated
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.display.GradientType;
import flash.events.MouseEvent;
import flash.geom.ColorTransform;
import flash.geom.Matrix;
import lazylib.broadcast.evts.ColorEvent;
import lazylib.broadcast.Radio;
/**
* ...
* #author www0z0k
*/
public class Picker extends Sprite
{
private var bmpc: Bitmap;
private var bmp:BitmapData;
private var id:String;
private var w:int;
private var h:int;
public static const COLOR_PICKED_EVT_TYPE: String = 'picked by picker';
public function Picker(_id:String, _w:int = 256, _h:int = 256, _x:int = 0, _y:int = 0)
{
id = _id;
w = _w;
h = _h;
x = _x;
y = _y;
bmp = new BitmapData(w, h);
bmpc = new Bitmap(bmp);
addChild(bmpc);
refillBmp(0x7f7f7f);
}
public function get ID():String { return id; }
private function refillBmp(overColor:int = 0x7f7f7f, alphaStep:Number = 0.006):void {
var rtspr:Sprite = new Sprite();
var spr:Sprite = new Sprite();
var colors:Array = new Array(0xff0000,0xff7f00,0xffff00,0x7fff00,0x00ff00, 0x00ff7f, 0x00ffff,0x007fff,0x0000ff, 0x7f00ff,0xff00ff, 0xff007f, 0xff0000);
var alphas: Array = new Array(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1);
var ratios: Array = new Array(10, 30, 50, 70, 90, 110, 130, 150, 170, 190, 210, 230, 250);
var matrix:Matrix = new Matrix();
matrix.createGradientBox(w, h);
spr.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);
spr.graphics.drawRect(0, 0, w, h);
spr.graphics.endFill();
rtspr.addChild(spr);
var spr2:Sprite = new Sprite();
rtspr.addChild(spr2);
var startA: Number = 1;
for (var i:int = 0; startA > 0; i++) {
startA -= alphaStep;//orig 0.004!!!
spr2.graphics.lineStyle(1, overColor, startA);
spr2.graphics.moveTo(0, h - i);
spr2.graphics.lineTo(w, h - i);
}
bmp.draw(rtspr, new Matrix());
graphics.beginFill(0, 0);
graphics.drawRect(0, 0, w, h);
graphics.endFill();
buttonMode = true;
addEventListener(MouseEvent.CLICK, onClick);
}
public function adjustDarkness(percent:int):void {
var colorValue: int = int(255 * percent / 100);
var currentGray:int = colorValue + colorValue << 8 + colorValue << 16;
refillBmp(colorValue);
}
private function onClick(e:MouseEvent):void {
var col: int = bmp.getPixel(e.localX, e.localY);
Radio.broadcast(new ColorEvent(COLOR_PICKED_EVT_TYPE + id, col));
dispatchEvent(new ColorEvent(COLOR_PICKED_EVT_TYPE + id, col));
}
}
}
Radio is a global dispatcher class (posted here if you need it), ColorEvent is just an event with an int color field, adjustDarkness is usually called from an external scrollbar. Let me know if a working example is needed.
I'm not sure this would be too accurate, but I think I can give you a few ideas:
You could grab that same squared image you are showing (or photoshop's for that matter) and change it's hue to get the whole color range.
If you want to draw it, mathematically I don't think it's too hard to do... for the cyan, for instance, the Y axis should control the maximum amount of color in all channels, and the X axis should control the proportion of red in the mix.