I want to add a thickness/depth to a 2d image. I've tried using a DecalBatch, but it produced this result: Unwanted Result
However, I was expecting this result instead (viewed from the other side): Expected Result
One side works, the other doesn't
The way I did it was detecting the edges using a Pixmap and manually creating decals for every pixel at the edge, which may be slow.
Are there other possible (faster) ways I can do this?
Thanks to everyone who've given their suggestions.
I've managed to fix it by reversing the decal array, which holds the decals, when the camera views the other side.
Some decals were hidden probably because of the arrangement of the decals when it's being rendered!
Anyways, here's the final result:
FINAL RESULT :D
And here's the code which fixed it (Kotlin):
reversed = if (totalAngle % 360.0f < 180.0f) {
if (!reversed) decals.reverse()
true
} else {
if (reversed) decals.reverse()
false
}
/*reversed variable is used so that the
decals aren't reversed multiple times*/
Related
I recently made a game with game maker and I've tried converting it to html5, but it's got some big errors... here is the game in html format: http://ivatrix.com/Game/index.html
First off, text is meant to appear in the top left like how you can see in this screenshot: http://gyazo.com/baa386fe06cfac9439c83b6e5192efd8 the text only appears after you create a combo.
Secondly, when you click on an orb it's meant to scale down to half it's size then scale up to 1.5x it's size, but instead it's shrinking until it's 1px large then infinitely increasing in size. Draw code is here:
if sl=1
{
if (s=0.6 or s=1) then d=d*(-1)
s+=d
if(frozen=1)
{
draw_sprite_ext(sprite_index,global.skin,x,y,s,s,0,c_blue,1)
}
}
And then there's other small errors like some text won't display, particle effects don't seem to draw, the game always returns saying there is no match on the board. That's all I've found so far.
Does anyone have any idea what I can do to fix this?
Thanks.
Since no one has provided an answer and I've found one myself, I'll put it up here so others in the same boat can benefit as well. Practically, the source of all my problems with floating point numbers being irregular, for example instead of it being 1 it could be 1.000000003, which meant if you were to check if that variable was equal to one, it would return false. Further information here: http://help.yoyogames.com/entries/77891197-HTML5-Issues-And-Differences
So for an example in my case, I changed the line
if (s=0.6 or s=1) then d=d*(-1)
to
if (s<0.6 or s>1) then d=d*(-1)
And now the problem is fixed.
Basically i have x circles represented as MovieClips.
They are all assigned the same base color (for example red).
They should all have a brightness property ranging from 0 to 1 (0 would be completely white and 1 completely red).
I would like the following properties for representing these circles on stage:
When the circles dont overlap they are represented as stated above.
When the circles overlap the overlapping region should have the same base color as the original circles but the brightness of that area should be the sum of the brightnesses of all the circles that define the overlap.
The brightness saturates at 1. So the overlap of 2 circles with brightness 0.8 is 1 (the maximum value) instead of 1.6.
I am wondering if there is some kind of BitmapFilter i could use on the circles to achieve these properties? Or am I looking in the wrong place?
I am relatively new to Actionscript so any pointers are welcome!
Hi and welcome to SO and AS3!
I'll take each point separately:
1) Quite simple, you've probably already figured out that "addChild()" will add MovieClip objects to the Display List, meaning Flash will render them every frame.
2) The easiest way to do this is through "Blend Modes", which is Adobe's way of handling overlapping display objects.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#blendMode
Try setting the .blendMode property of each circle to BlendMode.ADD:
var circle:MovieClip = new MovieClip();
circle.blendMode = BlendMode.ADD;
3) If BlendMode.ADD doesn't give you the results you want, try creating a custom shader to do the job.
http://help.adobe.com/en_US/as3/dev/WSB19E965E-CCD2-4174-8077-8E5D0141A4A8.html
IMHO Blendmode is the easiest way of achieving the desired effect, and blendShader if you want precise customization. Please comment if you have further questions!
Some tutorials and examples:
http://www.learningactionscript3.com/2007/11/03/more-properties-blendmodes-filters/
http://active.tutsplus.com/tutorials/games/introducing-blend-modes-in-flash/
Cheers,
J
I'm wonderring if anyone can help me with making sure my... uhhh ... Z-index (bad pun, you'll see why in a moment) is in the wrong order. I've been doing this for a few hours straight now and my eyes are going buggy - but - maybe leaving a question on Stack overnight will help push this in the right direction.
I've been working on the code for https://github.com/AlexChesser/jsSprite and I'm as far as the 6th test. Use the W key to run, A and D to turn left and right: http://chesser.ca/jsSprite/06-brainnsss....php (Gettit? Z-Index?! Hilarious).
Anyways, You'll notice that if you run around the screen for a bit. the individual Zombies' white squares / dirty rectangles overlap the other zombies' squares. When working with multiple overlapping sprites, how does one go about making sure they all get drawn without upsetting any of the other sprites?
(You see z is for zombies, but z index like when you're dealing with overlapping in CSS - probably way funnier when you've been coding for a number of hours straight).
Thanks for your
Brainsss......
It's not a z-index issue, your zombies themselves are okay.
Your problem is really with the second line of drawFrame
drawFrame: function(){
Sprite.ctx.clearRect(0,0,Sprite.width,Sprite.height); //clear previous frame
// I am trouble:
MainContext.clearRect(Sprite.Xpos, Sprite.Ypos, Sprite.width, Sprite.height);
It is clearing a rectangle of the main canvas where the zombie once was every time you draw a zombie, which can affect nearby objects!
So instead you should be clearing the entire canvas each time.
Try commenting out the MainContext.clearRect in drawFrame, and instead add one in runloop like below. It should fix your problems.
runloop = function(m) {
// New clear put here!
MainContext.clearRect(0,0,canvas.width,canvas.height);
m.drawFrame();
for (Z in Zarr) { // For ZOMBIE in "Zombie Array" Aaaaarrrgghhh...
Zarr[Z].pointTo(m);
Zarr[Z].drawFrame();
MainContext.drawImage(Zarr[Z].canvas, Zarr[Z].Xpos, Zarr[Z].Ypos);
};
MainContext.drawImage(m.canvas, m.Xpos, m.Ypos);
};
How about sorting your array (Zarr) by the y coordinate Ypos of each zombie before rendering? Or are you getting at the problem with (a lack of) transparency?
I'm trying to position an image on top of another image based upon the make-up of the smaller image. The smaller image is a cut-out of a larger image and I need it to be positioned exactly on the larger image to make it look like a single image, but allow for separate filters and alphas to be applied. As the images are not simple rectangles or circles, but complex satellite images, I cannot simply redraw them in code. I have quite a few images and therefore do not feel like manually finding the position of each image every and hard setting them manually in actionscript. Is there any way for me to sample a small 5-10 sq. pixel area against the larger image and set the x and y values of the smaller image if a perfect match is found? All the images are in an array and iterating through them has already been set, I just need a way to sample and match pixels. My first guess was to loop the images pixel by pixel right and down, covering the whole bitmap and moving to the next child in the array once a match was found, leaving the matched child where it was when the perfect match was found.
I hope I understood your question correctly.
There may be an option that uses copypixels to achieve what you want. You can use the bitmapdata.rect value to determine the size of the sample you want, and loop through the bigger bitmap using thet rectangle and a moving point. Let's see if I can code this out...
function findBitmapInBitmap(tinyimg:BitmapData, largeimg:BitmapData):Point {
var rect:Rectangle = tinyimg.rect;
var xbound:uint = largeimg.rect.width;
var ybound:uint = largeimg.rect.height;
var imgtest:BitmapData = new BitmapData(tinyimg.rect.width, tinyimg.rect.height);
for (var ypos:uint = 0, y <= ybound, y++) {
for (var xpos:uint = 0, x <= xbound, x++) {
imgtest.copyPixels(largeimg, rect, new Point(xpos, ypos);
if (imgtest.compare(tinyimg) == 0) return new Point(xpos, ypos);
}
}
return new Point(-1,-1); // Dummy value, indicating no match.
}
Something along those lines should work - I'm sure there's room for code elegance and possible optimization. However, it seems like something like this method would be very slow, since you'd have to check each pixel for a match.
There is a better way. Split your big image into layers, and use the blitting technique to composite them at runtime. In your case, you could create a ground texture without satellites, and then create the satellites separately, and use the copyPixels method to place them whereever you want. Google "blitting in as3" to find some good tutorials. I'm currently working on a game project that uses this technique and it's a very good method.
Good luck!
Edit: Forgot to code in a default return statement. Using this method, you'd have to return an invalid point (like (-1,-1)) and check for it outside the function. Alternatively, you could just copy your small bitmap to the big one within the function, which would be much more logical, but I don't know your requirements.
You need to find pixel sequence in the big image. BitmapData.getPixel gives you pixel value. So get first pixel from small image, find it in big image, then continue comparing until you find full match. If you have trouble to code that, feel free to ask.
For the actual comparison, there's BitmapData.compare which returns the number 0 if the BitmapData objects are equivalent.
I'm using a flip mechanism to navigate through my site (flip file & demo). The problem is, once it's flipped the content been displayed good just like I want it, but there's some offset from the flipped (right) parts en the solid left part (visible when you look closely). Also the right part is now a little blurred (which is the disturbing part of my issue). This all caused by the flip (I think the rotationY is causing the problem).
When I click a button I do the following:
flip=new Flip(currentPage,nextPage,richting);
content.addChild(flip);
currentPage=nextPage;
nextPage = new MovieClip();
there is a fix for it, consider the following:
// store original matrix
var origMatrix:Matrix = box.transform.matrix;
// set initial position
box.rotationY = -180;
// start animation
TweenLite.to(box, 1, {rotationY:0, onComplete:cleanBlur})
// execute after animation complete
function cleanBlur():void {
box.transform.matrix = origMatrix;
}
maybe you can find better results using other 3d library.
EDIT: sorry the "box" object, I was testing in flash, but box would be any of your pages to flip. Just apply the same logic.
Matteo at Flash & Math has an excellent solution for this. He actually found that when you bring an object into native 3D space it expands the object by one pixel in both the width and height. This can be counteracted by scaling your object back and then setting it's z to 0 which will scale it back up. Now the object is ready to play with without the blur.
http://www.flashandmath.com/flashcs4/blursol/index.html
adding: This fixes the scale issue, but not the blurriness. You will still need to use the matrix transformation fix posted above.