2d image objects - drawing, transforming, clicking, dragging, etc.
by WickedPyre · in Torque Game Engine Advanced · 12/21/2009 (4:45 pm) · 10 replies
I've been trying to find an answer to this simple question for DAYS. It's about time to start a thread about it.
Want:
1. Call a function, procedurally generate a quad (no need to use an external program like Blender)
2. Specify path to 2d image, image is applied to quad as texture
3. Specify initial location of quad on screen
4. Quad is treated as orthographic (never changes perspective or size no matter the z-value assigned to it)
5. Object handle / variable / name is returned from function.
6. 2d Image object position and velocity can be set with functions.
7. 2d Image object opacity and extents (length x width) can be set with functions.
8. 2d image object can be destroyed or discarded with a function
9. 2d image object has a separate 'invisible' or 'hide' field
10. With proper scripting, 2d image object can follow the mouse (click & drag)
Also Want:
1. Function to create new viewports (views within a view). Think Mini-maps, custom inventory boxes, etc.
2. Some way to drag items from one viewport to another (think equipment of armor in Diablo II).
Know: From my research it appears as though my only chance in hell of doing this is with GuiBitmapButtonControl, OR by introducing an extra step to EVERY 2d graphic I create for the game, which is to open a separate program like Blender or 3ds Max, make a quad, apply a texture, export as DTS file, and load into Torque. And THEN, deal with the hassle of its third dimension when I really only want to have to think of it as resting on a 2d plane in front of everything on the screen.
Does ANYONE know where to find the appropriate functions??? This is so fundamental to me. If this is not in the engine, I'm in SHOCK.
Want:
1. Call a function, procedurally generate a quad (no need to use an external program like Blender)
2. Specify path to 2d image, image is applied to quad as texture
3. Specify initial location of quad on screen
4. Quad is treated as orthographic (never changes perspective or size no matter the z-value assigned to it)
5. Object handle / variable / name is returned from function.
6. 2d Image object position and velocity can be set with functions.
7. 2d Image object opacity and extents (length x width) can be set with functions.
8. 2d image object can be destroyed or discarded with a function
9. 2d image object has a separate 'invisible' or 'hide' field
10. With proper scripting, 2d image object can follow the mouse (click & drag)
Also Want:
1. Function to create new viewports (views within a view). Think Mini-maps, custom inventory boxes, etc.
2. Some way to drag items from one viewport to another (think equipment of armor in Diablo II).
Know: From my research it appears as though my only chance in hell of doing this is with GuiBitmapButtonControl, OR by introducing an extra step to EVERY 2d graphic I create for the game, which is to open a separate program like Blender or 3ds Max, make a quad, apply a texture, export as DTS file, and load into Torque. And THEN, deal with the hassle of its third dimension when I really only want to have to think of it as resting on a 2d plane in front of everything on the screen.
Does ANYONE know where to find the appropriate functions??? This is so fundamental to me. If this is not in the engine, I'm in SHOCK.
#2
When working with 2d assets, it should be GIMP/Photoshop -> TGEA
Not GIMP/Photoshop -> Blender/3ds Max -> TGEA
12/21/2009 (5:01 pm)
Imagine character portraits. Do you really have to make quads in an external program with your jpeg as a texture on that quad and then exp->dts? Why can't I just say, "Torque, draw this character on the right side of the screen while this dialogue is going on. Here's the image path. Do it!" It should be that simple. Sure, having an object you can reference by ID or Name is great, but I shouldn't have to leave T3D or TGEA to go slap that jpeg on a quad. What if my game has literally THOUSANDS of jpegs in it? 2d/3d hybrid games are VERY popular. Think anime.When working with 2d assets, it should be GIMP/Photoshop -> TGEA
Not GIMP/Photoshop -> Blender/3ds Max -> TGEA
#3
As a matter of fact, for the 2d image objects to be rendered properly, they must be rendered in the scene graph beneath the camera transform. I don't see how this is possible with something like TSStatic.
12/21/2009 (5:26 pm)
Also, there are lighting issues to be concerned with. You need to be able to disable lighting on 2d image objects.As a matter of fact, for the 2d image objects to be rendered properly, they must be rendered in the scene graph beneath the camera transform. I don't see how this is possible with something like TSStatic.
#4
Oh, and 4 posts in 45 minutes isn't strictly necessary ;). Just hit the edit button.
12/21/2009 (7:31 pm)
I think just about everything on your original want list is handled by Torque's GUI editor. Check it out.Quote:"Torque, draw this character on the right side of the screen while this dialogue is going on. Here's the image path. Do it!"GuiBitmapCtrl, I think. I haven't played around with the GUI too much, but from what I recall it's a pretty simple task to display an image. I'm not sure where all the stuff about creating 3D meshes is coming from - if you want to see what you can do in 2D, just open the GUI editor (F10 by default) and play around a bit.
Quote:and making your own "scrollbar" at the bottom which changes the position of the orthographic camera within that inventory's viewport (to assist in viewing 2d image objects that may have overflown beyond the extents of the viewport)I'm not sure how flexible the existing scrollbar control is, but you should be able to do something like that. I think TGEA does also have a drag-drop control implemented, but I can't really tell you much about it.
Oh, and 4 posts in 45 minutes isn't strictly necessary ;). Just hit the edit button.
#5
Also, my TGEA 1.8 does not have GuiBitmapCtrl, unless I somehow missed it. Not surprising if I did, considering I have a 40" tv and the text for TGEA's editor looks like it's font 8.
I split my post up so that it wouldn't initially look daunting. The subsequent posts are just elaboration.
12/21/2009 (7:47 pm)
Is there a way to dynamically create GuiBitmapButtonCtrl objects in script? The inventory changes as the player picks up items, so when you press "I" on the keyboard, a visual inventory system pops up and must display a picture for every object in your inventory. These pictures must be able to interact with the mouse, and refer to actual item objects as well (they have a datablock with dynamic fields). If there's documentation on this, I don't know where it is.Also, my TGEA 1.8 does not have GuiBitmapCtrl, unless I somehow missed it. Not surprising if I did, considering I have a 40" tv and the text for TGEA's editor looks like it's font 8.
I split my post up so that it wouldn't initially look daunting. The subsequent posts are just elaboration.
#6
You might want to have a look for the existing inventory resources out there, either to use, or as a learning aid. Not sure if anyone's done a drag-drop inventory with a character portrait yet, though.
Oh, about the character portrait - you could use a bitmap for that as well, or if you wanted to be fancy, try a GuiPlayerViewCtrl (or the GuiObjectViewCtrl resource).
I've just confirmed I've got a GuiBitmapCtrl in TGE, so I'd be surprised if it wasn't in TGEA. It might have been replaced or renamed though :P.
12/21/2009 (8:20 pm)
Quote:Is there a way to dynamically create GuiBitmapButtonCtrl objects in script?It should be as simple as any other object, but like I said, I don't know a ton about GUI editing, especially in real-time. I'd imagine it's something like a script that fills up the inventory GUI list when you open it - doing a bunch of 'new GuiBitmapButtonCtrl()' calls and adding the resulting objects to the right part of the GUI (specifying a bitmap, position, parent control, etc.). You've got to figure all that out - Torque can't tell you how your inventory system is going to work. But I think you should be fine if you can create a new bitmap for each inventory item, find an appropriate bitmap (probably specified as a dynamic field of the inventory item's datablock), etc. But since every GUI control is an actual object, you can apply dynamic properties and so on to it, so you shouldn't have too much trouble storing and organising your data. Though I wouldn't recommend using GUI objects to actually store your character's inventory - they're client-side only, and ideally an inventory should operate on the server. There's some mildly tricky stuff involved in planning a good, robust client/server inventory system, but it's not a huge amount of work.
You might want to have a look for the existing inventory resources out there, either to use, or as a learning aid. Not sure if anyone's done a drag-drop inventory with a character portrait yet, though.
Oh, about the character portrait - you could use a bitmap for that as well, or if you wanted to be fancy, try a GuiPlayerViewCtrl (or the GuiObjectViewCtrl resource).
I've just confirmed I've got a GuiBitmapCtrl in TGE, so I'd be surprised if it wasn't in TGEA. It might have been replaced or renamed though :P.
#7
One problem, though: I created a script to generate 3 of these GuiBitmapButtonCtrl's in a for-loop, each spaced apart by 80 pixels vertically. It compiles and everything - no console error messages - but nothing actually happens. I even turned it into a function called makebuttons(), executed the script in common.cs, ran the function in the console, and still nothing happens. I'll post the code this afternoon after I get off work. Stay tuned. =)
12/22/2009 (10:45 am)
I found GuiBitmapCtrl as well, there's an "All" tab on the gui tools palette in F10 mode. Turns out GuiBitmapCtrl is just an image, and GuiBitmapButtonCtrl is a graphical gui button.One problem, though: I created a script to generate 3 of these GuiBitmapButtonCtrl's in a for-loop, each spaced apart by 80 pixels vertically. It compiles and everything - no console error messages - but nothing actually happens. I even turned it into a function called makebuttons(), executed the script in common.cs, ran the function in the console, and still nothing happens. I'll post the code this afternoon after I get off work. Stay tuned. =)
#8
---------------------------------------------------------------
P.S.
I find that I also have trouble understanding which part of the torque engine is exposed to script, and which part is c++ only. Any input on that?
---------------------------------------------------------------
December 23, 2009:
Okay, so I built a gui control with other controls nested inside of it using the editor. It was one guiBitmapCtrl with three guiBitmapButtonCtrl's inside of it. I took the gui code from the file it generated and modified my makebuttons() function with it in another script. It didn't like that I tried to replace the static code for the three buttons with a for loop that did the same thing, NESTED inside of the object declaration code for the guiBitmapCtrl, which is a container. I'll post the code when I get home this evening.
12/22/2009 (10:47 am)
Okay actually it DID work, just not as expected. The gui buttons were created, but not within playGui (the game screen we all know where you walk around with a rocket launcher). They were each separately created as their own standalone gui dialogues (press f10 and look around). I will have to work on creating them within a single container. To get this dialogue to appear in-game, I'll need to invoke it like a pop-up window I'm sure. I'll keep you updated. function makebuttons()
{
for (%i=0; %i < 3; %i++)
{
%curbuttonname = "button" @ %i;
%curX = 0;
%curY = 0;
new GuiBitmapButtonCtrl(%curbuttonname) {
canSaveDynamicFields = "0";
Enabled = "1";
isContainer = "0";
HorizSizing = "right";
VertSizing = "bottom";
position = "" @ %curX SPC (%curY + 80) @ "";
Extent = "140 107";
MinExtent = "8 2";
canSave = "1";
Visible = "1";
hovertime = "1000";
groupNum = "-1";
buttonType = "PushButton";
useMouseEvents = "0";
bitmap = "art/images/killev.png";
};
}
}---------------------------------------------------------------
P.S.
I find that I also have trouble understanding which part of the torque engine is exposed to script, and which part is c++ only. Any input on that?
---------------------------------------------------------------
December 23, 2009:
Okay, so I built a gui control with other controls nested inside of it using the editor. It was one guiBitmapCtrl with three guiBitmapButtonCtrl's inside of it. I took the gui code from the file it generated and modified my makebuttons() function with it in another script. It didn't like that I tried to replace the static code for the three buttons with a for loop that did the same thing, NESTED inside of the object declaration code for the guiBitmapCtrl, which is a container. I'll post the code when I get home this evening.
#9
12/28/2009 (5:47 pm)
Good job on working this out - I'm glad you got it working from my frugal descriptions of what might need to be done ;P.Quote:I find that I also have trouble understanding which part of the torque engine is exposed to script, and which part is c++ only. Any input on that?Any specific example? I think it's just a case of familiarity... but also reading the code and scripts to see what each of them is doing. If you look through .cpp files, you'll often see ConsoleMethods declared - that signifies something that can be done in script (I think you can get a quick list of ConsoleMethods of an object by typing objectName.dump() in the console). Also in initPersistFields methods, any members exposed there should be accessible (and probably modifiable) script-side.
Quote:It didn't like that I tried to replace the static code for the three buttons with a for loop that did the same thing, NESTED inside of the object declaration code for the guiBitmapCtrl, which is a container.It's difficult to tell what you can and can't do inside object declarations - for example, you can do simple mathematics, and even call functions like VectorAdd. But it doesn't seem like you can do any flow-control stuff. I wonder if the 'condition? case true : case false' struct is usable (does anyone know what that's actually called?).
#10
I believe the code you're talking about is called an "immediate IF-statement" also known as an IIF in MS Access and possibly C++ in general.
I purchased the script-only version of T3D just now. I just really hope I won't need the source code. When I get back to work on this issue I will post my results. Thanks for the insight!
12/29/2009 (4:01 pm)
I think you have to make use of a parent relationship attribute on a gui object to add other gui objects within it, if you're going to do it dynamically; to nest an indefinite number of objects inside of an object which has already been declared.I believe the code you're talking about is called an "immediate IF-statement" also known as an IIF in MS Access and possibly C++ in general.
I purchased the script-only version of T3D just now. I just really hope I won't need the source code. When I get back to work on this issue I will post my results. Thanks for the insight!
Torque Owner WickedPyre