eugene.litvinov Posted July 25, 2011 Share Posted July 25, 2011 I use next ui-layout: <vbox width="220" height="44"> <icon align="overlap,background" texture="source/textures/gui/quest_icons/beginning.png"/> <label align="center"> <text rich="1"/> </label> </vbox> Icon has 4 states, and it behaviors like button: mouse over/out/click... Than, I use next code: WidgetVBox item = new WidgetVBox(_gui); item.setWidth(228); item.setHeight(83); WidgetSprite icon = new WidgetSprite(_gui, "source/textures/gui/quest_icons/beginning.png"); WidgetLabel caption = new WidgetLabel(_gui); caption.setFontRich(true); caption.setText("caption")); item.addChild(icon, GUI_ALIGN_OVERLAP | GUI_ALIGN_BACKGROUND); item.addChild(caption, GUI_ALIGN_LEFT); icon.arrange(); caption.arrange(); questList.addChild(item, GUI_ALIGN_LEFT); item.arrange(); But in this case icon is showed all states, like simple picture... why this behaviors is different from each other? What I missed? Thanks Link to comment
danni.coy Posted July 25, 2011 Share Posted July 25, 2011 I suspect GUI_ALIGN_BACKGROUND is the culprit. I use vbox + icon + label a lot except that I place the label above or below the icon (not on top) and I haven't experienced this behaviour. Try GUI_ALIGN_OVERLAP on the text item without using the GUI_ALIGN_BACKGROUND flag (assuming that you are trying to get the label on top of the icon. Link to comment
eugene.litvinov Posted July 25, 2011 Author Share Posted July 25, 2011 I try to use: WidgetVBox item = new WidgetVBox(_gui); item.setWidth(228); item.setHeight(83); WidgetSprite icon = new WidgetSprite(_gui, "source/textures/gui/quest_icons/beginning.png"); WidgetLabel caption = new WidgetLabel(_gui); caption.setFontRich(true); caption.setText("caption"); item.addChild(icon, GUI_ALIGN_OVERLAP); // GUI_ALIGN_CENTER, GUI_ALIGN_LEFT item.addChild(caption, GUI_ALIGN_LEFT); icon.arrange(); caption.arrange(); questList.addChild(item, GUI_ALIGN_LEFT); item.arrange(); Result the same - image in vbox align right, but consists from all states. Link to comment
danni.coy Posted July 25, 2011 Share Posted July 25, 2011 Why is the overlap on the Icon and not on the label? I am assuming you want the label on top of the icon. Also try manually specifying Icons width and height as image.getWidth()/2,image.getHeight()/2. Link to comment
eugene.litvinov Posted July 25, 2011 Author Share Posted July 25, 2011 Why is the overlap on the Icon and not on the label? I am assuming you want the label on top of the icon. I need to create not a button with label, it is set of images with labels (descriptions) in bottom. I need exactly this: <vbox width="220" height="44"> <icon align="left" texture="source/textures/gui/quest_icons/beginning.png"/> <label align="left"> <text rich="1">AAAAAAA</text> </label> </vbox> But when I do the same via script, I have not the same result, maybe this is a bug? I tried set width/height of image - it is not help ( Link to comment
danni.coy Posted July 25, 2011 Share Posted July 25, 2011 Icon class is WidgetIcon. You are using WidgetSprite. Can't believe I didn't spot that before. You can make it work with WidgetSprite (I needed widgets that could be controlled from both touchscreen and joystick). Here is a class I made for it. class touchIcon { enum {TICO_NONE=0,TICO_DOWN,TICO_OVER,TICO_CLICK,}; WidgetSprite sprite; WidgetLabel label; WidgetVBox container; int state; int toggled = 0,toggleable = 1; string callback; string args[0]; vec4 coords[0] = ( vec4(0.0f,0.0f,0.5f,0.5f), vec4(0.0f,0.5f,0.5f,1.0f), vec4(0.5f,0.0f,1.0f,0.5f), vec4(0.5f,0.5f,1.0f,1.0f) ); touchIcon(string texture, string caption, int caption_size=10, int caption_align = TOP) { Gui gui = engine.getGui(); sprite = new WidgetSprite(gui); Image img = new Image(texture); sprite.setImage(img); sprite.setWidth(img.getWidth()/2); sprite.setHeight(img.getHeight()/2); sprite.setTexCoord(coords[TICO_NONE]); label = new WidgetLabel(gui,caption); label.setFontRich(true); label.setFontSize(caption_size); label.setFontColor(vec4(0.75,0.75,0.75,0.75)); container = new WidgetVBox(gui); if (caption_align == TOP) { container.addChild(label,GUI_ALIGN_TOP); container.addChild(sprite,GUI_ALIGN_BOTTOM); } else { container.addChild(sprite,GUI_ALIGN_LEFT); container.addChild(label,GUI_ALIGN_BOTTOM); } container.setSpace(4,4); sprite.setCallback(GUI_ENTER,"Interface::touchIcon::onMouseOver",this); sprite.setCallback(GUI_LEAVE,"Interface::touchIcon::onMouseOut",this); sprite.setCallback(GUI_CLICKED,"Interface::touchIcon::onMouseClick",this); sprite.setCallback(GUI_PRESSED,"Interface::touchIcon::onMousePressed",this); } void setSize(int size) { int w = sprite.getWidth(); int h = sprite.getHeight(); float pw = float(size)/float(w); float ph = float(size)/float(h); coords.clear(); coords = ( vec4(0.0f,0.0f,0.5f*pw,0.5f*ph), vec4(0.0f,0.5f,0.5f*pw,0.5f+(0.5*ph)), vec4(0.5f,0.0f,0.5f+(0.5f*pw),0.5f*ph), vec4(0.5f,0.5f,0.5f+(0.5f*pw),0.5f+(0.5*ph)) ); sprite.setWidth(size); sprite.setHeight(size); } void setNormal() {sprite.setTexCoord(coords[TICO_NONE]);toggled=0;} void setOver() {sprite.setTexCoord(coords[TICO_OVER]);} void setDown() {sprite.setTexCoord(coords[TICO_DOWN]);toggled=1;} void setClicked() {sprite.setTexCoord(coords[TICO_CLICK]);} void setToggleable(int t) { toggleable = t; } void setToggled(int i, int safe = false) { toggled = i; if(toggled)setDown(); else setNormal(); if(callback == NULL || safe == true) return; switch (args.size()) { case 0: return call(callback); case 1: return call(callback,args[0]); case 2: return call(callback,args[0],args[1]); } } int isToggled() { return toggled;} void onMouseOver(touchIcon ico) {ico.setOver();} void mouseOut() { if(toggled)setDown(); else setNormal(); } void onMouseOut(touchIcon ico) {ico.mouseOut();} void mouseClick() { if(toggleable && !toggled)setDown(); else setNormal(); if(callback == NULL) return; switch(args.size()) { case 0: return call(callback); case 1: return call(callback,args[0]); case 2: return call(callback,args[0],args[1]); } } void onMouseClick(touchIcon ico) { ico.mouseClick(); } void mousePressed() { setClicked(); } void onMousePressed(touchIcon ico) { ico.mousePressed(); } void setCallback(string fn,string arg1=NULL) { callback = fn; args.clear(); args.append(arg1); } void setCallback(string fn, int arg1, int arg2) { callback = fn; args.clear(); args.append(arg1); args.append(arg2); } void getWidget(){return container;} void getIcon(){return sprite;} void setHidden(int h) {container.setHidden(h);} int isHidden() {return container.isHidden();} void setFocus(){setOver();container.setFocus();} void removeFocus(){ if(toggled) setDown(); else setNormal(); container.removeFocus(); } void isFocused() { return container.isFocused(); } }; Link to comment
eugene.litvinov Posted July 26, 2011 Author Share Posted July 26, 2011 Icon class is WidgetIcon. You are using WidgetSprite. Can't believe I didn't spot that before. Oh, yes! With WidgetIcon this work like I need. Thank for implementation with WidgetSprite - make a note of this :blink: It always confuse me, why in .ui files uses different syntax... it's more convenient to write like: <WidgetVBox width="220" height="44"> <WidgetIcon align="overlap,background" texture="source/textures/gui/button.png"> <callback type="clicked">Source::MainMenu::eventNewGameButtonClick</callback> </WidgetIcon> <WidgetLabel name="Source::MainMenu::newGameLabel" export="1" align="center" pos_x="35" pos_y="10"> <text rich="1"/> </WidgetLabel> </WidgetVBox> maybe to more characters to write, but this is clear. Link to comment
danni.coy Posted July 26, 2011 Share Posted July 26, 2011 I don't mind the current system to go from Uniginescript to XML just drop the widget and convert from camelcase to lowercase. Link to comment
Recommended Posts