How does Torque2D handle rendering (entire game vs. only what's visible)
by RJAG Entertainment · in Torque 2D Beginner · 03/29/2013 (12:54 am) · 9 replies
I was curious as to if Torque2D already has a function that makes sure only what's on screen is being rendered, to save on performance.
Whenever you work with libraries or frameworks, they typically just render whatever you tell it to render. So if you have 100,000 tiles in a world, your tile engine might render all 100,000 tiles every single loop. You have to add in your own code to make sure it renders only what is on screen (and perhaps a bit more) and nothing more. This way, instead of rendering everything including what's not visible (say 100,000) tiles, you only render what's immediately visible (say 100).
I am currently making a tile based engine toy, and am about to setup a scroller and a function that only draws the tiles in the current screen's window. But right now (without the function) I can only assume my tile plotter renders the entire world worth of tiles.
Also, to save time in the step after these two tasks, is there a function to check if the mouse is hovering over an object? Right now, I have each individual tile created by its own function, "function CreateTile(%position)" and was wondering if there was a super easy way to check if the mouse is inside of this isometric tile (a rotated rectangle). In other engines, I had to use an imagine like this to determine where the mouse was among a tile based on rectangle collision and checking color keys:
I was thinking of adding a function within Tile.cs just below this function, which checks if the mouse is hovering over the isometric tile. Maybe a bool such as "IsSelected" true/false. I figured Torque2D already has a function that can do this check without resorting to rectangles and color keys.
Or perhaps I am thinking about this all wrong due to my lack of experience with Torque2D? I just realized I may want to make the entire tilemap a set of collision tiles; never actually visible (unless debugging) but required for a tile based world.
Whenever you work with libraries or frameworks, they typically just render whatever you tell it to render. So if you have 100,000 tiles in a world, your tile engine might render all 100,000 tiles every single loop. You have to add in your own code to make sure it renders only what is on screen (and perhaps a bit more) and nothing more. This way, instead of rendering everything including what's not visible (say 100,000) tiles, you only render what's immediately visible (say 100).
I am currently making a tile based engine toy, and am about to setup a scroller and a function that only draws the tiles in the current screen's window. But right now (without the function) I can only assume my tile plotter renders the entire world worth of tiles.
Also, to save time in the step after these two tasks, is there a function to check if the mouse is hovering over an object? Right now, I have each individual tile created by its own function, "function CreateTile(%position)" and was wondering if there was a super easy way to check if the mouse is inside of this isometric tile (a rotated rectangle). In other engines, I had to use an imagine like this to determine where the mouse was among a tile based on rectangle collision and checking color keys:
//Tile.cs
function createTile(%position)
{
%tile = new Sprite();
%tile.setBodyType ( static );
%tile.Position=%position;
%tile.Size = "10 5"; //my size is based off of my camera size (16:10) and 1280x800 resolution based on THIS LINK: "http://www.garagegames.com/community/forums/viewthread/133239"
%tile.SceneLayer = 31; //don't actually want to see the tiles.
%tile.Image = "myModule:Tile";
myScene.add( %tile );
}I was thinking of adding a function within Tile.cs just below this function, which checks if the mouse is hovering over the isometric tile. Maybe a bool such as "IsSelected" true/false. I figured Torque2D already has a function that can do this check without resorting to rectangles and color keys.
Or perhaps I am thinking about this all wrong due to my lack of experience with Torque2D? I just realized I may want to make the entire tilemap a set of collision tiles; never actually visible (unless debugging) but required for a tile based world.
#2
Look at my GitHub repo branch for TMX support. Even if you don't use TMX maps, you can see how I use a CompositeSprite to create a tile layer.
03/29/2013 (8:05 am)
Please don't try and build a tile layer using a sprite per tile. You will cry very soon.Look at my GitHub repo branch for TMX support. Even if you don't use TMX maps, you can see how I use a CompositeSprite to create a tile layer.
#3
03/29/2013 (9:05 am)
@Melv - do the individual sprites in a CompositeSprite pick separately? And do they pick correctly in isometric mode? I'm asking because RJAG's question sort of hinted that this is what he's really looking for. 
#4
03/29/2013 (9:29 am)
The ability to pick individual sprites in a CompositeSprite was added by Melv a few weeks ago. The CompositeSpriteToy demonstrates this by deleting the sprite when you click on it. It really only works well in rectilinear mode though, pickPoint in isometric mode selects more than one tile. 
#5
The transparent part of Isometric tiles overlap each other; you can verify this by loading up the CompositeSpriteToy and turning on the wireframe debug mode.
Scene.pickpoint returns all objectIDs that intersect with the mouseclick position as a space-separated string, i.e. "1454 1555 1269".
In the toy however, we call CompositeSprite.pickpoint(%worldposition) instead of calling it on the scene directly.
CompositeSprite.pickpoint returns the tileID of all tiles that were hit where each number corresponds to a tile in the compositesprite.
As you can tell from the code, we simply delete everything that was picked.
Adding additional code would be required if we wanted to determine which one of the overlapping tiles we have clicked.
03/29/2013 (12:02 pm)
Just as an example, here's a brief rundown of how CompositeSpriteToy's isometric mode works.The transparent part of Isometric tiles overlap each other; you can verify this by loading up the CompositeSpriteToy and turning on the wireframe debug mode.
Scene.pickpoint returns all objectIDs that intersect with the mouseclick position as a space-separated string, i.e. "1454 1555 1269".
In the toy however, we call CompositeSprite.pickpoint(%worldposition) instead of calling it on the scene directly.
CompositeSprite.pickpoint returns the tileID of all tiles that were hit where each number corresponds to a tile in the compositesprite.
for( %i = 0; %i < %spriteCount; %i++ )
{
// Fetch sprite Id.
%spriteId = getWord( %sprites, %i );
// Select the sprite Id.
%compositeSprite.selectSpriteId( %spriteId );
// Remove the sprite
%compositeSprite.removeSprite();
}As you can tell from the code, we simply delete everything that was picked.
Adding additional code would be required if we wanted to determine which one of the overlapping tiles we have clicked.
#6
03/29/2013 (1:16 pm)
So some mechanism (like the one in RJAG's post perhaps) still needs to be applied in order to sort the tile we want from the list in isometric mode. Perhaps a polygon defined on the tile that we can do a quick math check against, since I'm pretty sure we don't have any sort of color checking code in there....
#7
03/30/2013 (2:55 pm)
I haven't completely scripted this myself, but it should be possible to do some sorting in TorqueScript to get the intended isometric tile. In the for loop that Simon posted above, instead of deleting the sprite, I would instead change that loop to compare distances between the %worldPosition of the mouse click and the local position of each individual sprite with %compositeSprite.getSpriteLocalPosition();. The shortest distance would most likely be the intended tile that we actually wanted with pickPoint.
#8
Yes, very much so. It is very difficult for me to backtrack from raw to a high level game engine after spending the last 6 months learning about the raw stuff.
It is quite difficult for me not to take into consideration all the low level aspects of programming a game, especially with such a high level engine with so many great features supported.
I have a brain hemorrhage anytime I try to rewire my brain to think in an entirely different context. It was hard enough designing/engineering how I should make my isometric engine in C++. Now I have to think about how to handle so many things with so little experience with T2D. My mind always thinks, "If you had more experience with this [engine/framework] you'd know each step you need to work on." so I freeze, not doing any work to avoid wasting time. Ironic :
How do professional software developers engineer their programs? Is there a formal way of organization smaller tasks within larger goals to make it...not so overwhelming? I have made small programs and mini games many times over, but even small games are so complex. I have not found any good books on how to design/engineer/organize a video game.
04/07/2013 (2:56 pm)
Thank you everyone.Quote:From what I've seen of your posts, you kind of approach it like you would a rendering framework where everything is typically very raw and you need to do everything yourself i.e. like SDK. Those kinds of approaches don't work well here.
Yes, very much so. It is very difficult for me to backtrack from raw to a high level game engine after spending the last 6 months learning about the raw stuff.
It is quite difficult for me not to take into consideration all the low level aspects of programming a game, especially with such a high level engine with so many great features supported.
I have a brain hemorrhage anytime I try to rewire my brain to think in an entirely different context. It was hard enough designing/engineering how I should make my isometric engine in C++. Now I have to think about how to handle so many things with so little experience with T2D. My mind always thinks, "If you had more experience with this [engine/framework] you'd know each step you need to work on." so I freeze, not doing any work to avoid wasting time. Ironic :
How do professional software developers engineer their programs? Is there a formal way of organization smaller tasks within larger goals to make it...not so overwhelming? I have made small programs and mini games many times over, but even small games are so complex. I have not found any good books on how to design/engineer/organize a video game.
#9
04/07/2013 (3:06 pm)
It is great to finally do more research on the subject and find out that my weak point is in "software engineering". Any books or theories on game engineering are welcome. 
Associate Melv May
The more complex objects such as the CompositeSprite (SpriteBatch) only render the sprites that are also within the camera view as well.
On top of this, T2D automatically reduces the number of draw calls by batching output. It gives you fine-grain control over this with per-layer-sorting modes, batch-isolated etc.
For instance, take an ImageAsset, add a million sub-sprites to a composite sprite (let's say like a tile-layer) so not all are on-screen at the same time and it'll only render the ones that are (it'll take a while to add them though from the scripts). In this extreme example, it's much more efficient doing it with the CompositeSprite than adding a million Sprite objects to the scene as they each contain a Box2D body.
From what I've seen of your posts, you kind of approach it like you would a rendering framework where everything is typically very raw and you need to do everything yourself i.e. like SDK. Those kinds of approaches don't work well here.