I can't seem to find any solid info on how to do this, so I'm wondering if someone can point me in the right direction.
I have a large sprite sheet, let's call it textures.png. Each texture is 64x64 pixels and I need to be able to create patterns out of these textures.
createPattern() is a great function but it seems to only take two arguments, the image source and whether to repeat it or not. This is fine if you are loading a single image for each texture, but I'm wondering how to do this using textures.png.
I found this answer https://gamedev.stackexchange.com/questions/38451/repeat-a-part-of-spritesheet-as-background but I am not sure what the accepted answer is referring to with the generatePattern() method, as far as I can tell this isn't even a canvas method.
Thanks in advance!
Okay I've worked out the solution to this. Basically, createPattern() can take either an image or canvas element as its first argument. So you need to do the following:
var pattern_canvas = document.createElement('canvas');
pattern_canvas.width = texture_width;
pattern_canvas.height = texture_height;
var pattern_context = pattern_canvas.getContext('2d');
pattern_context.drawImage(img , texture_sx , texture_sy , texture_width , texture_height);
var final_pattern = canvas_context.createPattern(pattern_canvas , "repeat");
canvas_context.fillStyle = final_pattern;
canvas_context.fillRect( 0 , 0 , canvas.width , canvas.height );
If you do this then your canvas element will have pattern_canvas repeatedly drawn to cover its dimensions.
Related
I need to detect when MC2 is over MC1 that it is inside MC1's borders.
to do this I would usually use 4 separate if x y constraints,
and unfortunately .hitTestObject in my creations also seem to need 4 separate if x y + - constraints.
Does anyone know a more simplistic way to achieve this.
or is x y + - constraints still the only way to do this?
Thank you in advance.
The final solution for your problem to detect hit of two shapes, is to use bitmapData.hitTest(). you can detect hit between any shapes and not only Rectangles. for that, you have to draw both of your shapes on bitmapData like line belo:
var shape1Bitmap:BitmapData = new BitmapData(shape1MC.with,shape1MC.height,true,0x000000);
shape1Bitmap.draw(shape1MC);
var shape2Bitmap:BitmapData = new BitmapData(shape1MC.with,shape1MC.height,true,0x000000);
shape1Bitmap.draw(shape1MC);
shape1Bitmap.hitTest(new Point(),shape2Bitmap):Boolean;******
to continue usint BitmapData.hitTest(), folow the orders here : https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#hitTest()
http://dougmccune.com/blog/2007/02/03/using-hittestpoint-or-hittest-on-transparent-png-images/
It is a little complicated to add the bitmapData.hitTest() samples here. if any further questions left, please let me know to explain.
Good luck
I don't know of a built in way to do this, but it's easy enough using hitTestPoint with each corner of the square:
function isSquareInsideObject(square:DisplayObject, obj:DisplayObject):Boolean {
if(!obj.hitTestPoint(square.x, square.y, true)) return false;
if(!obj.hitTestPoint(square.x + square.width, square.y, true)) return false;
if(!obj.hitTestPoint(square.x + square.width, square.y + square.height, true)) return false;
if(!obj.hitTestPoint(square.x, square.y + square.height, true)) return false;
return true;
}
For more complex shapes than a square, you'd have to add more points to be accurate and it becomes a less elegant and less performant solution then.
You need that shape argument (third parameter for hitTestPoint) set to true if you want to test against the actual circle shape instead of the rectangular bounding box of the circle. If your circle is a bitmap (and not a shape), then I'd suggest putting a circular mask on the object to achieve the same result.
If your square isn't anchored at 0,0, or you don't mind the extra (small) performance hit, you could also use var bounds:Rectangle = square.getBounds(this) and then use the convenience properties of the rectangle object (bounds.bottomLeft, bottomRight, topLeft, topRight)
In the following example, there is a function called generateTexture().
Is it possible to draw text (numbers) into the pixel array? Or is it possible to draw text (numbers) on top of that shader?
Our goal is to draw a circle with a number inside of it.
https://forge.autodesk.com/blog/using-dynamic-texture-inside-custom-shaders
UPDATE:
We noticed that each circle can't use a unique generateTexture(). The generateTexture() result is used by every single one of them. The only thing that can be customized per object is the color, plus what texture is used.
We could create a workaround for this, which is to generate every texture from 0 to 99, and to then have each object choose the correct texture based on the number we want to display. We don't know if this will be efficient enough to work properly though. Otherwise, it might have to be 0 to 9+ or something in that direction. Any guides on our updated question would be really appreciated. Thanks.
I am able to successfully display text with the following code, simply replace generateTexture() by generateCanvasTexture() in the sample and you should get the result below:
const generateCanvasTexture = () => {
const canvas = document.createElement("canvas")
const ctx = canvas.getContext('2d')
ctx.font = '20pt Arial'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText(new Date().toLocaleString(),
canvas.width / 2, canvas.height / 2)
const canvasTexture = new THREE.Texture(canvas)
canvasTexture.needsUpdate = true
canvasTexture.flipX = false
canvasTexture.flipY = false
return canvasTexture
}
It is possible but you would need to implement it yourself. Shaders are a pretty low level feature so there is no way to directly draw a number or a text, but you can convert a given character into its representation as a 2d pixel array.
I have a problem with the method createPattern(). I have this image as background pattern:
When I use it as a pattern, this is what I obtain:
Why, because I expect the output to be as follows:
I think that the problem can be caused in some previous setting of the context, but what type of setting can do this? However this is the specific code that I use to make the pattern:
var pattern_bg = new Image();
pattern_bg.src = 'bg.png';
pattern_bg.onload = function(){
var pattern = context.createPattern(pattern_bg, "repeat");
context.fillStyle = pattern;
context.fillRect(0, 0, 223, 60);
}
Can please anyone help me to fix this issue?
To have the pattern that you want, you need to translate first at the point you want to be the origin of the fill, then draw from here.
So be sure to save() and restore() the context each time you change its transform matrix (translate, rotate, scale) to be able to set the translation as you want.
Do not forget you can always use setTransform to reset the matrix with ctx.setTransform(1,0,1,0,0,0);
I've done a very small jsbin to illustrate, here :
http://jsbin.com/EYArASA/1/edit?js,output
We can see the result on this picture, fill is done directly on the left, and after a translate on the right.
Code is very simple, interesting part is this :
// rect drawn directly : wrong result
ctx.fillRect(10,20,64,64);
// canvas translated, then fillRect at 0,0 :
// right result
ctx.translate(116,20);
ctx.fillRect(0,0,64,64);
I was trying to convert global coordinates to local coordinates of a UIComplenent in my flex project using below code using below code
var gp:Point = new Point(e.stageX,e.stageY); //global point
var lp:Point = uic.globalToLocal(gp); //local point
uic is UIComponent in which I have subclass of Sprite for drawing something
I have set the sprite's mouseEnabled and mouseChildren to false to not interrupt the mouse event.
above code is within uic's mousemove event where I was tracing the gp and lp gp was giving correct value and suprisingly lp was giving negetive values. when I move the move to the top left corner of uic i expect lp to be 0,0 but it is giving the -width of of uic. I broke my head for hours and ended up finding an alternate by using offsets. Infact my original code was much simpler like this which was same issue
var lp:Point = new Point(e.localX,e.localY);
I am not sure what exactly is causing this problem. the workaround had lot of issues and it creating a mess in my rest of the algorithms.
Just now I found even more interesting thing (which is actually weird). for some reason I went and create a new lp2
var lp2:Point = new Point(e.localX,e.localY);
now surprisingly it was giving correct values as expected and I went back and changed the code as
var gp:Point = new Point(e.stageX,e.stageY); //global point
var lp:Point = uic.globalToLocal(gp); //local point
var lp2:Point = new Point(e.localX,e.localY);
var lp2:Point = uic.globalToLocal(gp);
now it is expected to have all the lp, lp2 and lp3 variables to be same but weiredly lp two is giving wrong value and lp2 and lp3 were giving correct. I am suspecting using the variable lp has something to do. I am not sure about that but above proves it so right now I am using lp2.
does any one know why is this behavior? is it a bug? or am I overseen something?
Admittedly, I didn't look at your previous questions before leaving my comment :) I take it your questions seem to leave people quite perplex... It's probably due to the way you present them as totally abstract behaviors.
Taking the example above, I'm not sure you're going the right way about the globalToLocal method.
My understanding of globalToLocal is that given a Point and a DisplayObject, globalToLocal will return the position of the Point in relation to the DisplayObject.
var pt:Point = new Point ( 10, 20 ); // x, y in relation to the Stage
var shape:Shape = new Shape();
shape.x = 10;
shape.y = 30;
// x, y should trace 0 , 10 , which is the position of the
//point in relation to shape.
pt = shape.globalToLocal(pt );
//or if you prefer to declare a new variable
var pointToShape:Point = shape.globalToLocal(pt );
In your example you state that you're trying to get the local coordinates of uic , your UIComponent , when in fact you're only returning the values of your Mouse position in relation to uic. Then you state:
"now it is expected to have all the lp, lp2 and lp3 variables to be the same "
No , because you keep redeclaring your variables:
var lp2:Point = new Point(e.localX,e.localY);
//the next declaration/statement cancels the previous one
var lp2:Point = uic.globalToLocal(gp);
Please note that once a variable has been declared , it is not necessary to redeclare it in subsequent statements. In the example above , there's no relationships between the two lp2 declaration, you may as well write:
var x:int = 10;
x = 20;
x = whatever;// each statement practically cancels the previous one.
I'm learning ActionScript/Flash. I love to play with text, and have done a lot of that kind of thing with the superb Java2D API.
One of the things I like to know is "where, exactly, are you drawing that glyph?" The TextField class provides the methods getBounds and getCharBoundaries, but these methods return rectangles that extend far beyond the actual bounds of the whole text object or the individual character, respectively.
var b:Sprite = new Sprite();
b.graphics.lineStyle(1,0xFF0000);
var r:Rectangle = text.getCharBoundaries(4);
r.offset(text.x, text.y);
b.graphics.drawRect(r.x,r.y,r.width,r.height);
addChild(b);
b = new Sprite();
b.graphics.lineStyle(1,0x00FF00);
r = text.getBounds(this);
b.graphics.drawRect(r.x,r.y,r.width,r.height);
addChild(b);
Is there any way to get more precise information about the actual visual bounds of text glyphs in ActionScript?
Richard is on the right track, but BitmapData.getColorBounds() is much faster and accurate... I've used it a couple of times, and optimized for your specific needs its not as slow as one might think.
Cory's suggestion of using flash.text.engine is probably the "correct" way to go, but I warn you that flash.text.engine is VERY (very!) hard to use compared to TextField.
Not reasonably possible in Flash 9 -- Richard's answer is a clever work-around, though probably completely unsuitable for production code (as he mentions) :)
If you have access to Flash 10, check out the new text engine classes, particularly TextLine.
I'm afraid all the methods that are available on TextField are supposed to do what you have already found them to do. Unless performance is key in your application (i.e. unless you intend to do this very often) maybe one option would be to draw the text field to a BitmapData, and find the topmost, leftmost, et c colored pixels within the bounding box retrieved by getCharBoundaries()?
var i : int;
var rect : Rectangle;
var top_left : Point;
var btm_right : Point;
var bmp : BitmapData = new BitmapData(tf.width, tf.height, false, 0xffffff);
bmp.draw(tf);
rect = tf.getCharBoundaries(4);
top_left = new Point(Infinity, Infinity);
btm_right = new Point(-Infinity, -Infinity);
for (i=rect.x; i<rect.right; i++) {
var j : int;
for (j=rect.y; j<rect.bottom; j++) {
var px : uint = bmp.getPixel(i, j);
// Check if pixel is black, i.e. belongs to glyph, and if so, whether it
// extends the previous bounds
if (px == 0) {
top_left.x = Math.min(top_left.x, i);
top_left.y = Math.min(top_left.y, j);
btm_right.x = Math.max(btm_right.x, i);
btm_right.y = Math.max(btm_right.y, j);
}
}
}
var actualRect : Rectangle = new Rectangle(top_left.x, top_left.y);
actualRect.width = btm_right.x - top_left.x;
actualRect.height = btm_right.y - top_left.y;
This code should loop through all the pixels that were deemed part of the glyph rectangle by getCharBoundaries(). If a pixel is not black, it gets discarded. If black, the code checks whether the pixels extends further up, down, right or left than any pixel that has previuosly been checked in the loop.
Obviously, this is not optimal code, with nested loops and unnecessary point objects. Hopefully though, the code is readable enough, and you are able to make out the parts that can most easily be optimized.
You might also want to introduce some threshold value instead of ignoring any pixel that is not pitch black.