Bouncing and Colliding doesn't work always and sometimes it looks weird.

[shuanw...@gmail.com]

Hey,

Can it be that sometimes a ball goes through an ImageSprite instead to collided with the ImageSprite? I searched through the Forum to get help and any help I found I tried it but seems its almost everywhere the same. Let me explain my example. I have a Canvas, 2 Balls and a ImageSprite(which looks like a bar). Now the balls are bouncing whenever they reach the edge of the Canvas. That is no problem. And when the balls collided with the ImageSprite than it bounce too. I used the formula from I think "Scott Ferguson" from his app BouncePaddle. I could also use the formula from "Abraham Getzler" from his app Bounce Angle.

Now the problem I am facing or I noticed is that sometimes the balls are bouncing with the ImageSprite and sometimes it goes through it. Sometimes it makes something really weird. If it hits the ImageSprite, it goes inside the ImageSprite and starts to bounce inside the ImageSprite as if it is stuck there and after one one - two seconds it comes out again.

The same with the Balls. sometimes they collided with each other and sometimes it goes through each other. Did you guys also faced this problem? is There a solution for that? I noticed Abraham Getzler and Scott Ferguson are using clock for the bouncing or colliding. In my example I didnt use the Clock event. With Clock the Balls aren't moving smooth.

Some of the Tutorials about this Bouncing are made in App Inventor 1. Its still confusing for me to convert it to App Inventor 2.

Btw. I want to drag the ImageSprite(let's call it bar) and move it around the Canvas. That is easy, we have to use the Dragged Block. But once I hit a Ball with this bar, I want the ball to move in the same manner as if I used my finger like the Flung Block.

[Scott Ferguson]

Inside a bar.CollidedWith block try putting an advanced block: ball.bounce(other,-1)

This will cause the imagesprite bar to act as the bottom of the canvas and bounce the ball off of the bar.

---

Scott Ferguson

[shuanw...@gmail.com]

I did it like that (I hope it is right) but still if I drag the bar and hit a ball, the ball doesnt move. I get this error message...

[Taifun]

Scott was talking about an advanced block, you can find it in the Any component - Any Ball drawer

and according to the documentation http://ai2.appinventor.mit.edu/reference/components/animation.html#Ball: Edge here is represented as an integer that indicates one of eight directions north(1), northeast(2), east(3), southeast(4), south (-1), southwest(-2), west(-3), and northwest(-4).

Taifun

---

Trying to push the limits of App Inventor! Snippets and Tutorials from Pura Vida Apps by Taifun.         

[shuanw...@gmail.com]

I see, my bad. Now it looks like this (I really hope this time it is correct). See Attachment. But still, If I drag the bar and hit a ball, the ball doesn't move. Anything else I have to consider?

[Scott Ferguson]

Well, in that case, it would seem that the bar must be stationary or the ball be moving to strike it.

Are you using the Speed property to move the ball?

If so, the ball will bounce off the edge of the canvas and the bar automatically when using the Ball EdgeReached event block with a Ball Bounce block inside it and the 'other' parameter block attached to it.

You cannot use Bounce with a ball that you move manually by changing the x and y property values.

---

Scott

[shuanw...@gmail.com]

The example I showed to you I used Flung Block. I have to move the ball manual. I wanted also in addition to move the ball with a bar. to avoid any misunderstanding I did a new project.

I just have now a Canvas, Ball and Bar(ImageSprite) as you can see in Picture 1.

I first tried to see if I can move the ball just by dragging the bar and hitting the ball. It works. The codes can bee seen in Picture 2. Once I drag the bar and hit the ball, the ball goes to the (20/50)

At least I know that it is possible to cause a action when I drag the Bar and hit the ball with it. 

Now you mentioned something with "Speed property". And I used now the Speed property as you can see in Picture 3.

Now when I drag the Bar and hit the ball, the ball is rolling to the right. It doesnt matter from where I hit the ball, it always rolls to the right.

I noticed once I hit the ball, nothing happens when I hit it again. So I add another code. see Picture 4.

Now I can drag the bar and hit the ball over and over again and each time the ball rolls to right.

I think I am on the right way to solve my problem. All I want is that the Ball goes into the opposite direction from where I hit the ball. 

Lets say I drag the bar hit the ball from below then it ball should roll up etc.

Scott, can you help me out here please? I know I am almost there but I dont know what to do...

[shuanw...@gmail.com]

Sorry, I dont know how to edit my previous comment. I have to write a new comment.

I just, right now, figured out how to move the ball into the direction of the bar. see picture 5. Now  all I need is to move it into the opposite direction,

I add a PointTowards Block. But as target I cant add a Math block. Else I would add target=bar-1, I assume that -1 is suppose to be the opposite direction...

[Taifun]

Sorry, I dont know how to edit my previous comment.

see screenshot:

Taifun

[shuanw...@gmail.com]

@Taifun, unfortunately I don't have this option and never had. I am using Google Chrome and https://groups.google.com/forum

But since you are here, can you help me with my problem :D

[Abraham Getzler]

I did a study of ball collisions in AI2,
and wrote up a Doc on it.

https://docs.google.com/document/d/1vMOewOPYmN4gzbDiXJgLeCQ1W5MzuT7ogXQqV96R0P8/edit?usp=sharing

It might help you with your project.

ABG

[Scott Ferguson]

Take a look at Abraham's document first.

My first thought is to make this change:

After the Ball1.PointTowards(bar)

Add:

set Ball1.Heading to Ball1.Heading + 180

(which should move the ball in the opposite direction of the bar)

See it that works.

---

Scott Ferguson

[shuanw...@gmail.com]

@Abraham Getzler, Thank you. Your Doc about study about Collisions in AI2 is amazing. I can learn a lot from this.

@Scott, Thank you, it works. Now I have a question. If I drag the bar and move it fast the the ball goes through the bar. How does this work? I did not read the whole Doc by Abraham Getzler about collision but is there something I should know? Is there something like a hidden timer? I want the ball bounce at the same time when it hits the bar edges. Well, when I dnt move the bar then it bounces as soon as it hits the bar edges. But not left and right edge of the bar. It goes a little bit inside the bar and then it bounces. Especially when I increase the Ball speed, the collision and bounces time isnt that precise. And when I drag move the bar a little bit fast and hit the ball, then sometimes the Ball goes through the bar. Even if I move the bar and place it somewhere and if within half a second a ball hits it, sometimes the ball goes through the bar.

I so much want to understand how collision, bouncing and edges works together. If someone could explain this to me or even give me a solution what I should do, to avoid it, I would be really thankful, else you can mark this Post as solved :)

[Ken Masters]

The problem of the bouncing ball (or of any sprite) going through other sprites has persisted for some time.  I reported it as a bug (issue 2760) a while back, but it hasn't been completely solved. 

In my case, I have a tilt game, and the problem is compounded if the player holds the device at an angle - after multiple bounces, the ball sometimes goes through.  I've built various workarounds that reduce the problem, but it's not completely solved.

.

[shuanw...@gmail.com]

@Ken, I also tried till now to find a solution for my problem but seems we cant do anything. Its a bug so we cant do anything to get rid of it, only to reduce it but it doesnt matter how much I try to reduce it, it still goes through the sprite. maybe not that much like before but still! Once I find a 100% working solution I will notify you

[Enis]

Are the sprites all on the same Z level?

[shuanw...@gmail.com]

Yes Enis, they are all on the same Z level. It doesnt always goes through each other. But sometimes it happens. 5 mins ago I tried again to find a way to solve it but I wasn't successful. Sometimes my sprite goes into another sprite and then it starts to bounce inside the sprite for half a second. and most times it happens when one sprite collides from left or right into another sprite. It also happens when the speed is too much of the moving sprite while it hits the other sprite. I also happens when the moving sprite collide with another sprite and the width of the other sprite is too less.

Did you or anybody else ever tried to make a simple "breakout game"? Some people call it "Brick game"? see picture. Who ever did this or is about to do it, that person will face all these problems. I am really wondering that not many people already reported this bug. I was about to make a Breakout game but then I left it and I am making something else coz this AI2 is just too awesome to get stuck and complain about one Bug :D

[Scott Ferguson]

 If I drag the bar and move it fast the the ball goes through the bar.

Try reducing the Timer Intervals to 0 for the ball, bar and any Clock timer you might be using.

That essentially says 'no delay' so the bar and ball collisions may be detected better.

---

Scott Ferguson

[Abraham Getzler]

Regarding the sprite pass-through problem,
maybe it would be possible to apply the same type of
work around that people putting up sheet rock wallboard
do to deal with edges that don't meet exactly -
cover up the joint with something else decorative.

In the case of your collision, you could flash a >Boom!<
graphic at the collision location to distract the viewer?

ABG

[Scott Ferguson]

LOL!!!

[shuanw...@gmail.com]

@Scott, I also tried this. It didnt help.

@Abraham Getzler, that is acutally I nice thinking and good idea. But it only works if it not goes through the sprite. What is if it goes through the sprite? Then i need a >Oops!< :D

[Abraham Getzler]

Maybe there is some slack in the definition of sprite contact.

A sprite has a height and width set in the Designer.
It also has an image, which has a height and width according to image editor programs.

Are the units used (pixels) the same in both the Designer and image editors?
How about at run time in a device with a different screen size and resolution?

In an image editor, where is the origin of an image?
Is it always the upper left corner, like in AI2?

If an image is rotated, where is the center of rotation?

There's much to experiment with here.

ABG

[shuanw...@gmail.com]

Yes Abraham Getzler, I see there is much to experiment with. Now I just notice something else.

I have a PNG image with a Transparent background.

I use this PNG image in my Sprite.

I have a ball and want to collide with this image. 

Whenever the ball hits the Image, let's say it stops.

Let's say my canvas has the color Black.

So there where the transparency of my image is, there you see the color of the canvas of course, which is black.

Now I noticed if the ball hits/collide with the transparent field of the image, then it stop too. Is that normal? Does it not ignore the transparent field? 

This mad me really really sad. This prevents me to build great games. Let's say I need a diagonal wall for my game. But AI2 doesnt see a diagonal wall. It treats the diagonal wall or line as an rectangle...

I really hope that there is maybe a simple solution for this...

[shuanw...@gmail.com]

Sorry I did not search good enough. I found this here where Scott says it is included. But its from January. Any news about this or still included?

https://groups.google.com/forum/#!searchin/mitappinventortest/transparency$20image/mitappinventortest/J0SP11wi6pw/Ml49uKu1lMkJ

[Enis]

Without some pretty interesting clustering of sprites, the bounding rectangle is always the outside edge of the sprite.  If you have a 20 x 20 sprite, but your bug inside is a ladybug and round, the top left corner and top right corners show the transparency, but the sprite is STILL 20 x 20.

[Abraham Getzler]

Here's a link to my ball-on-diagonal-line bounce study Doc ...

https://docs.google.com/document/d/1g71sI_rR7PqHGB83tAYZfNi7HvzIkWZ-xsvhFUxpplo/edit?usp=sharing

ABG

[Abraham Getzler]

Oops, sorry, you had that already.
ABG

[Scott Ferguson]

It is possible to use another approach in the case of transparency around the image.

You could use the Canvas GetBackgroundPixelColor or GetPixelColor method to detect the color of the bar at the leading x,y of the ball.

I know this sounds complicated but it is not.

I used this technique in my Flappy Bat project to detect the cave walls and owl.

(everything in the cave was black otherwise so was ignored).

---

Scott Ferguson

[shuanw...@gmail.com]

@Abraham, Thanks for this Link. This time I read it again but more careful and interesting to see that at the end you wrote "Try using pixel color testing under a clock instead of collision detection to trigger the bounce." Scott Ferguson also mentioned it. First, Your Flappy Bat is an amazing work made in App Inventor which shows how amazing app inventor is.

Now I have a question to both of you. Is there any simple example to made a collision with color? Lets say I have a Canvas and a sprite which looks like a line. I used a background for the sprite which is black. Is there such an simple example where i ball goes around and once it hits the "black" sprite then it should do something? If I could just understand this example I would be thankful. I tried a lot. right now I desperately tried to show the name of the color of the sprite in a label...

[shuanw...@gmail.com]

I somehow managed to get the pixel color of a pixel of an sprite. It wasn't that challenging :) 

The problem is that I want to use the whole sprite and not only one pixel. If the "Ball" hits the sprite with the color black then something should happen. According to my understanding the pixel color is only for one pixel of the sprite. I could ofc. define "ALL" pixels of the sprite but it takes a lot of work... Any help?

Sorry for all the questions but before I ask I try a lot. sometimes its one up to two hole days trying before I ask...

[Abraham Getzler]

Maybe a model-based approach would serve you better.

In the early days of PC graphic adventures,
the programmers had to prevent their characters from walking thru trees
by confining them to invisible walking paths, determined
by a series of invisible line segments serving as boundaries.
Each line segment had a corresponding equation
ax+by = c
that could be used to determine if point x,y was above or below it,
in addition to its endpoints (x1,y1) and (x2,y2) that would be used to
qualify the line segment as relevant to point (x,y).

The old arcade game  Qix is a good example for this.

If you can model your sprites, and sharpen your algebra,
try this.

Or rummage around in Scott's Developer's Library
for pixel testing approaches.

ABG

[shuanw...@gmail.com]

Thanks Abraham Getzler for these information. I really liked enjoyed it, especially the part how programmers prevent their characters from walking through trees. 

Once I am finish with my current Project, I will definitely try it to model my sprites and sharpen my algebra and also look around in Scott's Developer's Library. I once found an example by Scott where he explained it very clear how to collide with a color. Its not one of these example mentioned above. I don't find it anymore. 

Having said this, if you (Scott Ferguson) read this and know what I mean, can you copy and past the link to this example...

[Scott Ferguson]

Hi, shuanw-

I do have an example which uses GetPixelColor here.

It is in AI Classic, but it may give you some ideas.

I really need to update it to AI2.

I also used this technique in my Flappy Bat demo project which is AI2.

As the bat moves to the right, a pixel at it's leading edge (right side, centered) is tested for it's color.

Anything but black indicates that it hit either the wall of the cave or the owl.

Take a look at the blocks. It is pretty simple.

Hope that is helpful.

---

Scott Ferguson

[shuanw...@gmail.com]

Thank you Scott, that's the example I was looking for GetPixelColor and I am pretty sure it will help me a lot.

Btw. I already studied your Flappy Bat :-D ... It has many ideas which helps me to understand Ai2 deeper.

Ps. many examples from you or someone else are written in App Inventor 1. It might sounds strange but I really have huge understanding problems with App Inventor 1 because I never used it before. I started directly with App Inventor 2. They both look similar yet they are so different to me. I failed about 90 percent of all example I tried to convert from App Inventor 1 to App Inventor 2

[Rob Higbie]

Bounce behavior using CollideWith seems to be unpredicatable, which baffles me a bit since EdgeReached seems to be so reliable.  Nonetheless, I hypothesized, as you have on this thread, that the effect was probably driven primarily by speed.  I was attempting to make a fast action soccer or hockey game, but wasn't able to reliably detect the goal (unless the ball/puck was moving very slowly).  So I devised an experiment to test ball parameters (speed, size, and interval).and posted it on the gallery.  It has three "lanes" (canvases, light gray), each with different types of obstacles (GetPixelColor, Balls, and Sprites, blue), and an object ball (black) in each lane that simply bounces back and forth.  You control the ball parameters of all three balls simultaneously with slider bars.  This makes it easy to see what is happening.  As speed increases, a point is reached where the ball skips across the obstacle and keeps going.  (You can slow down action by increasing the interval.)  Anyway, perhaps this little test tool can be helpful to someone on the forum...

Changing the ball interval seems to have no effect on its behavior.  Reducing the GetPixelColor interval to 0 makes GetPixelColor behave almost like CollideWith.  Perhaps the advanced block, ball.bounce, calculates angled bounces for 2-D bounce animation, but for my simple 1-D back-and-forth ball bounce animation, ball.bounce (ball, 3) behaves the same as "set ball heading to 180".  After all, the ball.bounce block is inside the CollideWith block, which, I believe, is the real culprit... I wonder what is going on in the background with EdgeReached?  It never misses!

[Scott Ferguson]

Nice demo, Rob.

It would be great if the developers could make Bounce work with CollidedWith the same as with the Canvas Edge.

Abraham has published a formula for it. More here.

I would really like to see the Java version used by Bounce in the sources, but was not able to find it last time I looked.

---

sf

[Shuan Wallashi]

Thanks Rob for this demo. I tried a lot till now and I think as a user we cant do anything to solve this problem. There is an example "Bounce Paddle" It works fifty fifty! If you make the baddle angle 91 or 89 then the ball go through the paddel and with the second touch it bounce. With a paddel angle of for example 80 it immediately bounces with the first touch. And the example GetPixleColor by Scott the ball goes first through the line and then with the second touch it bounce with the line. There are other examples where it looks weird. I hope this will get solved soon. With edges there are no problem to bounce.

Ps. Those example I mentioned are still the best examples among those to solve our problem