Basic collisions in StageXL

65 views
Skip to first unread message

Richard Kim

unread,
Dec 7, 2017, 7:54:41 PM12/7/17
to StageXL

I have a super basic/baby question, where I am struggling with the concepts in StageXL.  I have a ball that I want to drop from the top of the canvas to the bottom (height = 800).  Once the ball hits the bottom, I want an event to occur.  I think this is called a collision, but not completely certain.  Maybe I am off on my terminology already, but I cannot seem to find a better term.


I would think this is done by opening a stream, and waiting for ball.y  == 800.  Once this happens, then trigger the event.  However, I am not seeing that this is the case, and so I am struggling with how to do something basic like this.


I see this thread:  https://groups.google.com/forum/embed/?place=forum/stagexl&showsearch=true&showpopout=true&showtabs=false&hideforumtitle=true&hl=en&parenturl=http%3A%2F%2Fwww.stagexl.org%2Fforum.html#!searchin/stagexl/collision/stagexl/4IKwMaX9DNc/QUPHjYIpDXMJ.  However, I just don’t understand it at all.  Specifically, why is advanceTime used in this circumstance?  More broadly, why is time a factor when two objects contact each other?


I then looked here:  http://www.stagexl.org/demos/performance.html. In this example, the flags are bouncing off the walls, so there must be some detection of when the flags touch the sides.  I tried to review the code, but I don’t understand it at all, as it is using advanceTime as well, and I don’t understand the variables used.  I am clearly not understanding something fundamental here.  If we are looking for 2 objects to collide, where is time in the equation?  I think because I don't understand the idea, I am not understanding the code.  Thanks.

Bernhard Pichler

unread,
Dec 8, 2017, 11:32:15 AM12/8/17
to Richard Kim, StageXL
Hi Kim,

Thanks for the question. It's actually a very good question. The simple answer is that StageXL is just the render engine to bring the pixel to the screen, but what you need is a physics engine like Box2D. Such a physics engine has complicated mathematical models to simulate the interaction of objects. You start with the shape of the object and then you define properties like the friction of it's surface, it's weight, the bounciness any many other things. You also define properties of the world like air resistance or gravity. 

Be warned, using such physics engine is also a little bit complicated. Best way to start is reading some online articles, i'm sure there are many tutorials available. Box2D is probably the most popular one for 2D content and there is also a port of the library for Dart. 

Of course there is a much simpler solution too. As you already found out, all my demos use the Juggler framework (http://www.stagexl.org/docs/wiki-articles.html?article=juggler) to control the movement of the display objects. It's very simple - depending on the time that passes between two frames, you change the x and y coordinates (or even the rotation or scale) of your objects. As soon as the coordinates exceed e.g. the screen bounds, you simple revert the vector where the object is flying too. 


Take a look at this code:

First we change the posX and posY values, based on the speedX and speedY vector. After that we simple check if the posX of the object is either to far on the left or right (screen bounds) and simply revert the speedY. For the user it looks like the objects bounced from the left or right edge of the screen.

Hope this helps,
Bernhard



--
You received this message because you are subscribed to the Google Groups "StageXL" group.
Visit this group at https://groups.google.com/group/stagexl.
To view this discussion on the web visit https://groups.google.com/d/msgid/stagexl/2c794184-4d7d-4095-a5b7-13e893435bd8%40googlegroups.com.

Richard Kim

unread,
Dec 9, 2017, 11:49:44 PM12/9/17
to StageXL
Thanks a lot, Bernhard.  That makes a lot of sense.  I was only thinking along the lines of position, and not the consequences of the motion, so this helps a lot.  I'm still working on understanding the rest, but I think I'm close.  Thanks again.

Richard
Reply all
Reply to author
Forward
0 new messages