I have this:
var ctx = canvas.getContext( '2d' );
....
....
ctx.fillStyle = 'blue';
The real thing I need to change, is the shapes of a tetris game. They're written like this:
var shapes = [
[ 1, 1, 1, 1 ],
[ 1, 1, 1, 0,
1 ],
[ 1, 1, 1, 0,
0, 0, 1 ],
[ 1, 1, 0, 0,
1, 1 ],
[ 1, 1, 0, 0,
0, 1, 1 ],
[ 0, 1, 1, 0,
1, 1 ],
[ 0, 1, 0, 0,
1, 1, 1 ]
];
I would like to change the color of the first one, which is [1,1,1,1] or shapes[0], but none of what I've tried works.
ctx.fillStyle = 'blue'; works, but it changes the color of all the objects.
Live version can be viewed here:
http://harlem-shake-it.com/tetris/
From this code, I assume you only want the current object to be blue?
for (var y = 0; y < 4; ++y) {
for (var x = 0; x < 4; ++x) {
if (current[y][x]) {
ctx.fillStyle = '#0068ff';
drawBlock(currentX + x,currentY + y);
}
}
}
If that's the case, you'll need to first save the current canvas state with ctx.save();, use the fillStyle, draw the block, and then ctx.restore();. This should allow you to fill your blocks with multiple colors, if you want. Or, in this case, have the fallen blocks be rendered black.
You should also declare a doctype: <!doctype html>. And the <center> tag is deprecated. You should use text-align: center; in CSS moving forward, or margin: 0 auto; depending on what you're styling.
Related
what type of method would i use to make my character walkable on only certain areas? I don't really need the code just the most efficient way on how I should do it, thanks.
1: You can to crete a matrix with 0s and 1s. Your character can move in 1 and don't in 0. this is very suitable to top view games. Codepen
window.onload = function(){
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
matrix = [[0, 0, 0, 0, 0] , [1, 0, 0, 1, 1] , [1, 1, 1, 1, 1] , [1, 0, 1, 1, 1] , [1, 0, 1, 1, 1] ];
character = {x: 0, y : 1}
window.requestAnimationFrame(function(){_print()});
window.addEventListener('keypress', function(e){
console.log(e.key, character)
if( e.key == 'd'){
if((character.x < 4) && (matrix[character.y][character.x+1]==1))
character.x++;
}else if(e.key == 'w'){
if((character.y>0) && (matrix[character.y-1][character.x]==1))
character.y--;
}else if(e.key == 'a'){
if( (character.x > 0) && (matrix[character.y][character.x-1]==1))
character.x--;
}else if( e.key == 's'){
if( (character.y < 4) && (matrix[character.y+1][character.x]==1))
character.y++;
}
});
};
printMap = function(matrix){
for(let i =0; i < matrix.length; i++){
for(let j =0; j < matrix[i].length; j++){
if(matrix[i][j]===0){
ctx.fillStyle = "#F00";
}else{
ctx.fillStyle = "#FF0";
}
ctx.beginPath();
ctx.rect( j * 100, i * 100, 100, 100);
ctx.fill();
}
}
}
printCharacter = function(character){
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.rect( character.x * 100 + 10, character.y * 100 + 10, 80, 80);
ctx.fill();
}
clearMap = function(){
ctx.clearRect(0,0,500,500);
}
_print = function(){
clearMap();
printMap(matrix);
printCharacter( character);
window.requestAnimationFrame(function(){
_print();
});
}
2: You can make a verification of color pixels, with data Imagem. Your character don't can move in a predefined color. (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData)
3: You can use psychic framework like box2d. (http://box2d-js.sourceforge.net/)
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 !
Im trying to make a level editor for the game.
Now I can create a new map (using mouse) and click "generate" button to trace map array
(string). After that I can simple copy the code from the output
and use it to create a new level.
Lets say I have a class called NewLevel.as
I create a new array and paste code from output window, so I have 2d array.
Then adding tiles to stage using for loops.
var array:Array =
// code below is what I get in output window
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[7, 7, 7, 6, 6, 6, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6, 7, 7, 7, 7],
[7, 7, 7, 6, 6, 6, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6, 7, 7, 7, 7]
];
for (var row:int = 0; row < array.length; row++)
{
for (var column:int = 0; column < array[row].length; column++)
{
var tile = new Tile();
addChild(tile);
tile.x = column * tile.width;
tile.y = row * tile.height;
tile.gotoAndStop(array[row][column] +1);
}
}
It works without problems,this gives me the map I created using level editor.
but what I want is that players input their "map code" and load the map they created.
I guess you have seen that in many games.
I have a textarea so users can input their string,
how can I convert their input to 2d array and load it (as you see in example)?
It should be 2d array.
I also added event listener to textarea
textarea.addEventListener(Event.CHANGE, changes);
function changes(e:Event):void
{
// convert input text to 2d array to build a new map
// Do not know how to get input to use with JSON
var myStr = levelTextarea.text;
var a2:Array = JSON.parse(myStr) as Array;
trace( a2 );
}
You can use JSON for this kind of job, this class is available in Flash Player 11.
package
{
import flash.display.Sprite;
import flash.events.Event;
/**
* ...
* #author
*/
public class Main extends Sprite
{
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
var a:Array = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[7, 7, 7, 6, 6, 6, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6, 7, 7, 7, 7],
[7, 7, 7, 6, 6, 6, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6, 7, 7, 7, 7]
];
var txt:String = JSON.stringify( a )
trace( txt );
var a2:Array = JSON.parse( txt ) as Array;
trace( a2 );
}
}
}
How can i implement brightness and contrast changes for image in flex
I need to develop a tool for adding brightness or contrast and reducing it
Use ColorMatrixFilter and assigned below matrix to its matrix property
var contrastAdj:ColorMatrixFilter = ColorMatrixFilter(filters.getItemAt(0));
contrastAdj.matrix = getContrastMatrix(value);
private static function getContrastMatrix(value:Number):Array
{
value /= 100;
var s: Number = value + 1;
var o : Number = 128 * (1 - s);
var m:Array = new Array();
m = m.concat([s, 0, 0, 0, o]); // red
m = m.concat([0, s, 0, 0, o]); // green
m = m.concat([0, 0, s, 0, o]); // blue
m = m.concat([0, 0, 0, 1, 0]); // alpha
return m;
}
for brightness matrix use this function
private static function getBrightnessMatrix(value:Number):Array
{
var m:Array = new Array();
m = m.concat([1, 0, 0, 0, value]); // red
m = m.concat([0, 1, 0, 0, value]); // green
m = m.concat([0, 0, 1, 0, value]); // blue
m = m.concat([0, 0, 0, 1, 0]); // alpha
return m;
}
pass values between -100 to 100 to functions.
You might use flash.geom.ColorTransform against an image, at least for previewing. If you need to have your image's pixels changed, I'd say use a Pixel Bender shader that will do what you need. Note however, you will need a backup copy should you desire to change the parameters of that shader.
So I am aware the HTML5 canvas pixel methods are a little different then normal. I am porting a ray-tracer from a Scala Swing application where the old draw method looked like this:
for {
x <- pixels.s.indices
y <- pixels.s(x).indices
} {
g.setColor(pixels.s(x)(y))
g.fillRect(x, y, x, y)
}
Where pixels.s was a 2D array like so:
[[Color, Color, Color],
[Color, Color, Color],
[Color, Color, Color]]
I.e. it mapped exactly to a 2D cartesian plane.
So now I have changed tack slightly, and I have a FLATTENED array of objects with x, y and color:
[{ x: 0, y: 0, color: { red: 33, green: 220, blue: 181 },
{ x: 0, y: 1, color: { red: 33, green: 220, blue: 231 },
{ x: 0, y: 2, color: { red: 33, green: 220, blue: 221 },
...
{ x: 319, y: 238, color: { red: 23, green: 10, blue: 31 },
{ x: 319, y: 239, color: { red: 13, green: 120, blue: 11 }]
I'm trying to draw my flattened array of colors to the screen using this code:
var imageData = context.createImageData(width, height);
var numPixels = width*height;
for (var i = 0; i < numPixels; i++) {
imageData.data[(i*4)] = tracedScene[i].color.red;
imageData.data[(i*4) + 1] = tracedScene[i].color.green;
imageData.data[(i*4) + 2] = tracedScene[i].color.blue;
imageData.data[(i*4) + 3] = 255; // alpha color
};
context.putImageData(imageData, 0, 0);
But it's coming out a bit wrong. I've tripled checked my tests and the actual array is the correct screen data. I'm just rendering it incorrectly. I'm currently getting this:
Whereas I should see:
Now I've had the exact same graphical oddities in the Swing version before (years ago), and it was because of the way I was drawing the image. I can't remember how I fixed it however.
What I am looking to be able to do, is have some method:
drawPixel(x, y, color, canvas) { ... }
that is able to draw a particular pixel at x, y with a color. OR... a way to do it traditionally.
Your input "flattened" array in wrong order: it should be by rows, but yours is by columns.
[{ x: 0, y: 0, color: { red: 33, green: 220, blue: 181 },
{ x: 1, y: 0, color: { red: 33, green: 220, blue: 231 },
{ x: 2, y: 0, color: { red: 33, green: 220, blue: 221 },
...
(Assuming y is top to bottom, x - left to right)
Image data goes from (0, 0) to (1, 0) and your code goes from (0, 0) to (0, 1). In other words, there's a conflict of row/column major order.
Anyway, depending on your performance needs you might be overthinking this.
What I am looking to be able to do, is have some method:
drawPixel(x, y, color, canvas) { ... }
that is able to draw a particular pixel at x, y with a color.
Why not just fill single pixels?
ctx.fillStyle = 'rgba(red, green, blue, alpha)';
ctx.fillRect(x, y, 1, 1);
This will be inefficient at around 100 pixels filled, and you'll want to switch to image data.
If you want to keep your data structure the same you could use something like this, which should work:
var imageData = context.createImageData(width, height);
var numPixels = width*height;
var pixelCount = 0;
for (var i = 0; i < width; i++) {
for (var j = 0; j < height; j++) {
var wpixel = j * width * 4;
wpixel += i * 4;
console.log(wpixel);
imageData.data[(wpixel)] = tracedScene[pixelCount].red;
imageData.data[(wpixel) + 1] = tracedScene[pixelCount].green;
imageData.data[(wpixel) + 2] = tracedScene[pixelCount].blue;
imageData.data[(wpixel) + 3] = 255; // alpha color
pixelCount++; // independent of i and j the way I wrote it
}
}
context.putImageData(imageData, 0, 0);
Demo: http://jsfiddle.net/t9edv/