More updates to BitmapData.

This commit is contained in:
photonstorm 2013-11-15 20:40:39 +00:00
parent 8d48576fe2
commit 83cacb93a0
7 changed files with 196 additions and 2 deletions

View file

@ -71,6 +71,8 @@ Version 1.1.3 - in build
* Updated: If running in Canvas mode and you have a render function it will save the context and reset the transform before running your render function
* Updated: Sprite will now check the exists property of the Group it is in, if the Group.exists = false the Sprite won't update.
* Updated: Lots of small documentation tweaks across various files such as Pointer.
* Updated: If you specify 'null' as a Group parent it will now revert to using the World as the parent (before only 'undefined' worked)

View file

@ -87,10 +87,10 @@
<script src="../src/gameobjects/Events.js"></script>
<script src="../src/gameobjects/GameObjectFactory.js"></script>
<script src="../src/gameobjects/BitmapData.js"></script>
<script src="../src/gameobjects/Sprite.js"></script>
<script src="../src/gameobjects/TileSprite.js"></script>
<script src="../src/gameobjects/Text.js"></script>
<script src="../src/gameobjects/BitmapData.js"></script>
<script src="../src/gameobjects/BitmapText.js"></script>
<script src="../src/gameobjects/Button.js"></script>
<script src="../src/gameobjects/Graphics.js"></script>

View file

@ -95,6 +95,7 @@
<script src="../src/input/InputHandler.js"></script>
<script src="../src/gameobjects/Events.js"></script>
<script src="../src/gameobjects/GameObjectFactory.js"></script>
<script src="../src/gameobjects/BitmapData.js"></script>
<script src="../src/gameobjects/Sprite.js"></script>
<script src="../src/gameobjects/TileSprite.js"></script>
<script src="../src/gameobjects/Text.js"></script>

View file

@ -94,6 +94,7 @@
<script src="../src/input/InputHandler.js"></script>
<script src="../src/gameobjects/Events.js"></script>
<script src="../src/gameobjects/GameObjectFactory.js"></script>
<script src="../src/gameobjects/BitmapData.js"></script>
<script src="../src/gameobjects/Sprite.js"></script>
<script src="../src/gameobjects/TileSprite.js"></script>
<script src="../src/gameobjects/Text.js"></script>

47
examples/wip/bmd2.js Normal file
View file

@ -0,0 +1,47 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.image('atari1', 'assets/sprites/atari130xe.png');
game.load.image('coke', 'assets/sprites/cokecan.png');
game.load.image('mushroom', 'assets/sprites/mushroom2.png');
game.load.image('ball', 'assets/sprites/shinyball.png');
}
var bmd;
function create() {
//game.stage.backgroundColor = '#450034';
bmd = game.add.bitmapData('bob', 800, 600);
// And apply it to 100 randomly positioned sprites
for (var i = 0; i < 100; i++)
{
bmd.setPixel(game.world.randomX, game.world.randomY, Math.random() * 255, Math.random() * 255, 255);
}
bmd.context.fillStyle = '#ffffff';
bmd.context.fillRect(20,20,16,16);
var d = game.add.sprite(0, 0, bmd);
}
function update() {
// bmd.clear();
// updateWobblyBall();
}
function render() {
// bmd.render();
}

View file

@ -16,7 +16,7 @@
*/
Phaser.Group = function (game, parent, name, useStage) {
if (typeof parent === 'undefined')
if (typeof parent === 'undefined' || typeof parent === null)
{
parent = game.world;
}

View file

@ -51,6 +51,40 @@ Phaser.BitmapData = function (game, key, width, height) {
* @default
*/
this.context = this.canvas.getContext('2d');
/**
* @property {array} imageData - The canvas image data.
*/
this.imageData = this.context.getImageData(0, 0, width, height);
/**
* @property {ArrayBuffer} buffer - A TypedArray storing the canvas image data.
* TODO: = (typeof Float32Array !== 'undefined') ? Float32Array : Array;
*/
this.buffer = new ArrayBuffer(this.imageData.data.length);
/**
* @property {Uint8ClampedArray} buffer - A uint8 clamped view on the buffer.
*/
this.data8 = new Uint8ClampedArray(this.buffer);
/**
* @property {Uint32Array} buffer - A Uint32 view on the buffer.
*/
this.data32 = new Uint32Array(this.buffer);
// Little or big-endian?
this.data32[1] = 0x0a0b0c0d;
/**
* @property {boolean} isLittleEndian - .
*/
this.isLittleEndian = true;
if (this.data32[4] === 0x0a && this.data32[5] === 0x0b && this.data32[6] === 0x0c && this.data32[7] === 0x0d)
{
this.isLittleEndian = false;
}
/**
* @property {PIXI.BaseTexture} baseTexture - The PIXI.BaseTexture.
@ -76,6 +110,16 @@ Phaser.BitmapData = function (game, key, width, height) {
*/
this.type = Phaser.BITMAPDATA;
/**
* You can set a globalCompositeOperation that will be applied to this BitmapData.
* This is useful if you wish to apply an effect like 'lighten'.
* If this value is set it will call a canvas context save and restore before and after the render pass, so use it sparingly.
* Set to null to disable.
* @property {string} globalCompositeOperation
* @default
*/
this.globalCompositeOperation = null;
}
Phaser.BitmapData.prototype = {
@ -86,6 +130,105 @@ Phaser.BitmapData.prototype = {
},
/**
* Sets the color of the given pixel.
* @param {number} x - The X coordinate of the pixel to be set.
* @param {number} y - The Y coordinate of the pixel to be set.
* @param {number} red - The red color value (between 0 and 255)
* @param {number} green - The green color value (between 0 and 255)
* @param {number} blue - The blue color value (between 0 and 255)
* @param {number} alpha - The alpha color value (between 0 and 255)
*/
setPixel32: function (x, y, red, green, blue, alpha) {
if (x >= 0 && x <= this.width && y >= 0 && y <= this.height)
{
var value = x * y & 0xff;
if (this.isLittleEndian)
{
this.data32[y * this.width + x] = (alpha << 24) | (blue << 16) | (green << 8) | red;
}
else
{
this.data32[y * this.width + x] = (red << 24) | (green << 16) | (blue << 8) | alpha;
}
this.imageData.data.set(this.data8);
this.context.putImageData(this.imageData, 0, 0);
}
},
/**
* Sets the color of the given pixel.
* @param {number} x - The X coordinate of the pixel to be set.
* @param {number} y - The Y coordinate of the pixel to be set.
* @param {number} red - The red color value (between 0 and 255)
* @param {number} green - The green color value (between 0 and 255)
* @param {number} blue - The blue color value (between 0 and 255)
* @param {number} alpha - The alpha color value (between 0 and 255)
*/
setPixel: function (x, y, red, green, blue) {
this.setPixel32(x, y, red, green, blue, 255);
},
/**
* Get a color of a specific pixel.
* @param x {number} X position of the pixel in this texture.
* @param y {number} Y position of the pixel in this texture.
* @return {number} A native color value integer (format: 0xRRGGBB)
*/
getPixel: function (x, y) {
if (x >= 0 && x <= this.width && y >= 0 && y <= this.height)
{
if (this.isLittleEndian)
{
}
else
{
}
}
//r = imageData.data[0];
//g = imageData.data[1];
//b = imageData.data[2];
//a = imageData.data[3];
// var imageData = this.context.getImageData(x, y, 1, 1);
// return Phaser.ColorUtils.getColor(imageData.data[0], imageData.data[1], imageData.data[2]);
},
/**
* Get a color of a specific pixel (including alpha value).
* @param x {number} X position of the pixel in this texture.
* @param y {number} Y position of the pixel in this texture.
* @return A native color value integer (format: 0xAARRGGBB)
*/
getPixel32: function (x, y) {
// var imageData = this.context.getImageData(x, y, 1, 1);
// return Phaser.ColorUtils.getColor32(imageData.data[3], imageData.data[0], imageData.data[1], imageData.data[2]);
},
/**
* Get pixels in array in a specific Rectangle.
* @param rect {Rectangle} The specific Rectangle.
* @returns {array} CanvasPixelArray.
*/
getPixels: function (rect) {
// return this.context.getImageData(rect.x, rect.y, rect.width, rect.height);
},
render: function () {
// Only needed if running in WebGL, otherwise this array will never get cleared down I don't think!