Draw Rectangle and see it on batch without any texture - libgdx

I am making a rectangle :
rect = new Rectangle();
rect.x = 40;
rect.y = 100;
rect.setSize(100,100);
and then also drawing some texture on the position of rectangle like:
batch.draw(myTexture, rect.x , rect.y, rect.width, rect.height);
Now what i want to do is also see the shape of rectangle like i must see some boundary so that i can see my rectangle boundary as well as my texture. And i need this for debugging purposes as the texture is complex like somewhere the background is transparent so i want to remove the collision from those places and that is why i am thinking if i could see both the rectangles and the sprite it would be great.
Although i tried doing this:
shapeRenderer.begin(ShapeRenderer.ShapeType.Line);
shapeRenderer.setColor(Color.RED);
shapeRenderer.rect(0,0,100,100);
shapeRenderer.end();
I thought the above code would help me draw the texture as well as see the rectangle but turns out i could see only the rectangle's boundary and not the texture.
Here is the output:
In the image , you can see a red rectangle and that is where i was trying to debug my bar (a bar of yellow color was also supposed to be shown here) but my yellow doesn't appear as this red-boundary rectangle overlapped my bar.
To be clear, i want to see the shapeRenderer right above the texture and be able to see the both of them

So i found the answer,
As you know i wanted to appear a rectangle over my texture so that i could see both - my texture and my shapeRenderer shape but instead i could see only my shape and not the texture.
Problem was that What is was doing is i began the batch and inside that i wrote the code for drawing to the batch and also the code for drawing the shapeRenderer to the batch like this:
batch.begin();
batch.draw(texture,0,0,0,0);
shapeRenderer.begin();
shapeRenderer.rect(0,0,0,0);
shapeRenderer.end();
batch.end();
The above code replaces my texture as it can only draw one thing at the coordinates 0,0 so first it draws the texture at 0,0 and then the shaperenderer at 0,0.
The solution was:
To draw the shapeRenderer separately and not within the batch.begin() and batch.end() like:
batch.begin();
batch.draw(texture,0,0,0,0);
batch.end();
shapeRenderer.begin();
shapeRenderer.rect(0,0,0,0);
shapeRenderer.end();

Related

How to draw shapes with outline and fill with nothing in AS3?

How to draw shapes like rectangle, circle with only outline (fill with transparent color inside) in AS3 like this
rectangle and circle
Use graphics.lineStyle with graphics.drawRect or graphics.drawCircle.
// this means you want to draw a line on the outer edge
// 1 is thickness, and you got more options like color, etc.
graphics.lineStyle(1);
// draw rect
graphics.drawRect(x, y, width, height);
// draw circle
graphics.drawCircle(x, y, radius);
Thanks to #BotMaster for pointing out you don't need begin/end fill.

How to draw line with texture instead of color?

I have lot of sprites on screen ( cars looking from top ) and I am drawing polylines ( like call ccDrawPoly(redBlue, 8, false) ). I need to replace line color with texture ( I have image of water and I want to draw line with water texture water.png ).
How to make this ?
PaolaJ, I could suggest a hack
Create Sprite Object
Give it some width like 2,4,8 or 16 (depending on your texture)
Sprite Height could be same as line length.
Use sprite->getTexture()->setTexParameters({GL_LINEAR, GL_LINEAR,GL_REPEAT,GL_REPEAT}) to repeat your texture.
use rotation to place the sprite properly.
make sure texture is power of 2.
On the other hand, proper way would be textured polygon as LearnCocos2d suggested.

Html canvas spotlight region over image

am looking for a solution to realize a spotlight on a html canvas which draws an image. I darkened the complete image with:
context.globalAlpha = 0.3;
context.fillStyle = 'black';
context.fillRect(0, 0, image.width, image.height);
This works fine. Now I want to remove the darkening effect on a specific rectangle area. How can I do this without calculation of the "surrounding" rectangles?
Redraw a region of original image
You can simply draw back the image with the specified rectangular region you want to "reveal":
/// reset global alpha and then
context.globalAlpha = 1;
context.drawImage(image, rx, ry, rw, rh,
rx, ry, rw, rh)
Here you pick first the source rectangle (first line), then the destination rectangle. If width and height (rw and rh) are different the source region is scaled to fit the destination region. If the image size is 1:1 both source and destination would be the same (as in this example).
Clipping
As an alternative you can use clipping instead:
/// to remove clipping properly save current state
context.save();
/// define region you want to clip
context.beginPath();
context.rect(rx, ry, rw, rh);
/// set clip
context.clip();
/// draw the image as the original
context.drawImage(image, x, y);
/// remove clipping
context.restore();
ONLINE DEMO SHOWING THESE TWO TECHNIQUES
Alternatives
Composite modes (globalCompositeOperation) allow clipping as well but would not be useful here as you would still need to draw with a region of the original image and therefor you can just draw it directly (as in first example).
Another way could be to use two canvases where you draw the image on the bottom canvas and the mask on the top canvas. Then punch a hole in the top canvas. If you want to animate/move around the mask this can be a good solution.

understanding matrix.transition(); as3

I am trying to understand the method transition that falls in the Matrix Class. I am using it to copy pieces of a bitMapData. But I need to better understand what transitions do.
I have a tilesheet that has 3 images on it. all 30x30 pixels. the width of the total bitmap is 90pxs.
The first tile is green, the second is brown, and the third is yellow. If I move over 30pxs using the matrix that transitions, instead of getting brown, I get yellow, if I move over 60px, I get brown.
If I move -30 pixels, then the order is correct. I am confused on what is going on.
tileNum -= (tileNumber * tWidth);
theMatrix = new Matrix();
theMatrix.translate(tileNum,0);
this.graphics.beginBitmapFill(tileImage,theMatrix);
this.graphics.drawRect(0, 0,tWidth ,tHeight );
this.graphics.endFill();
Can someone tell me how transitions work, or some resources that show how they work. I ultimately want to know a good way to switch back and forth between each tile.
First of all, don't confuse translation with transition. The latter is a general English word for "change", whereas to translate in geometry and general math is to "move" or "offset" something.
A transformation matrix defines how to transform, i.e. scale, rotate and translate, an object, usually in a visual manner. By applying a transformation matrix to an object, all pixels of that object are rotated, moved and scaled/interpolated according to the values stored inside the matrix. If you'd rather not think about matrix math, just think of the matrix as a black box which contains a sequence of rotation, scaling, and translation commands.
The translate() method simply offsets the bitmap that you are about to draw a number of pixels in the X and Y dimensions. If you use the default ("identity") matrix, which contains no translation, the top left corner of your object/bitmap will be in the (0,0) position, known as the origin or registration point.
Consider the following matrix:
var mtx : Matrix = new Matrix; // No translation, no scale, no rotation
mtx.translate(100, 0); // translated 100px on X axis
If you use the above matrix with a BitmapData.draw() or Graphics.beginBitmapFill(), that means that the top left corner of the original bitmap should be at (x=100; y=0) in the target coordinate system. Sticking to your Graphics example, lets first consider drawing a rectangle without a matrix transformation.
var shape : Shape = new Shape;
shape.graphics.beginBitmapFill(myBitmap);
shape.graphics.drawRect(0, 0, 200, 200);
This will draw a 200x200 pixels rectangle. Since there is no transformation involved in the drawing method (we're not supplying a transformation matrix), the top left corner of the bitmap is in (x=0; y=0) of the shape coordinate system, i.e. aligned with the top left corner of the rectangle.
Lets look at a similar example using the matrix.
var shape : Shape = new Shape;
shape.graphics.beginBitmapFill(myBitmap, mtx);
shape.graphics.drawRect(0, 0, 200, 200);
This again draws a rectangle that is 200px wide and 200px high. But where inside this rectangle will the top left corner of myBitmap be? The answer is at (x=100, y=0) of the shape coordinate system. This is because the matrix defines such a translation.
But what then will be to the left of (x=100; y=0)? With the above code, the answer is that the bitmap repeats to fill the entire rectangle, and hence you will see the rightmost side of the bitmap, to the left of the leftmost side, as if there was another instance of the bitmap right next to it. If you want to disable the repeating image, set the third attribute of beginBitmapFill() to false:
shape.graphics.beginBitmpFill(myBitmap, mtx, false);
Lets take a look at one last example that might help your understanding. Remember that the translation matrix defines the position of the top left corner of an image, in the coordinate system of the shape. With this in mind, consider the following code, using the same matrix as before.
var shape : Shape = new Shape;
shape.graphics.beginBitmapFill(myBitmap, mtx);
shape.graphics.drawRect(100, 0, 100, 100);
Notice that this will draw the rectangle 100px in on the X axis. Not coincidentally, this is the same translation that we defined in our matrix, and hence the position of the top left corner of the bitmap. So even though repeating is enabled, we will not see a repeating image to the left of our rectangle, because we only start drawing at the point where the bitmap starts.
So the bottom line is, I guess, that you could think of the transform matrix as a series of transformation commands that you apply to your image as you draw it. This will offset, scale and rotate the image as it's drawn.
If you are curious about the inner workings of the matrix, Google transformation matrices, or read up on Linear Algebra!

Changing a sprites bitmap

As of right now, I am trying to create a tiling effect for a game I am creating. I am using a tilesheet and I am loading the tiles to the sprite like so...
this.graphics.beginBitmapFill(tileImage);
this.graphics.drawRect(30, 0,tWidth ,tHeight );
var tileImage is the bitMapData. 30 is the Number of pixels to move retangle. then tWidth and tHeight is how big the rectangle is. which is 30x30
This is what I do to change the bitmap when I role over the tile
this.graphics.clear();
this.graphics.beginBitmapFill(tileImage);
this.graphics.drawRect(60, 0,tWidth ,tHeight );
I clear the sprite canvas. I then rewrite to another position on tileImage.
My problem is....
It removes the old tile completely but the new tile positions farther to the right then where the old bitmap appeared.
My tile sheet is only 90px wide by 30px height. On top of that, it appears my new tile is drawn behind the old tile. Is there any better way to perfect this.
again, all i want is for the bitmap to change colors
You could try to load the whole tilesheet in your sprite, and then redefine the scrollRect property each time you need to.
this.scrollRect = new Rectangle( 30, 0, tWidth ,tHeight );
Note that you can't just edit scrollRect.x, .y, .width or .height ; you have to redefine a new Rectangle each time.
Using scrollRect will probably be much faster that redrawing part of the bitmap.
You can read this excellent article from Grant Skinner for more informations about scrollRect.