Slick Forums

Discuss the Slick 2D Library
It is currently Wed Jun 19, 2013 10:09 am

All times are UTC




Post new topic Reply to topic  [ 13 posts ] 
Author Message
 Post subject: Drawing in paintWidget
PostPosted: Mon Sep 26, 2011 4:31 pm 
Offline

Joined: Thu Jul 28, 2011 3:21 pm
Posts: 17
Location: Hungary
Hello!

It was a long time ago since I last asked somthing here, but I just stuck again. I would like to draw some stuff on a ResizableFrame.

Code:
        for (int i = 0; i < SkillData.SKILL_COUNT; i++) {
            int percentage = (int) ((float) SkillData.getInstance().getXP(i) / (float) SkillData.getInstance().getNextLevelXP(i) * 100);
            g.setColor(Color.red);
            System.out.println(percentage);
            g.fill(new Rectangle(this.getX() + 150, this.getY() + i * 42 + 40, percentage * 2, 10));
            g.setColor(Color.black);
            g.drawRect(this.getX() + 150, this.getY() + i * 42 + 39, 200, 10);
        }


I draw this using slick, but it's not really good. (When I have multiple ResizableFrames it just draw this to the top and doesn't care about the drawing order etc...)

I found a method called paintWidget. I tired to override it but don't have any idea how to draw on it. I checked the Widget inplementation but not helped too much. (http://hg.l33tlabs.org/twl/file/78dc50b0fc04/src/de/matthiasmann/twl/Widget.java) As I saw you always draw images and never things like lines and stuff.

I should use a DynamicImage and messing with bytebuffers (that would be horrible) or there are a better way to do this.

Thanks, ~ Laxi


Top
 Profile  
 
 Post subject:
PostPosted: Mon Sep 26, 2011 5:20 pm 
Offline
Slick Zombie

Joined: Fri Jan 29, 2010 7:02 pm
Posts: 1188
Depends on what you want to draw. For an experience bar you have two simple options:
a) use a "white" pixel (most themes already have an 1x1 image called white) and draw it in the size you want
b) use a styled bar (eg gradient etc) and specify tiled="true" in the theme and draw it in the size you want - this will draw the first part and cut of the rest.

Or you could mess with the OpenGL state directly and or use Slick to do the drawing inside paintWidget.

_________________
TWL - The Themable Widget Library


Top
 Profile  
 
 Post subject:
PostPosted: Mon Sep 26, 2011 7:19 pm 
Offline

Joined: Thu Jul 28, 2011 3:21 pm
Posts: 17
Location: Hungary
MatthiasM wrote:
Or you could mess with the OpenGL state directly and or use Slick to do the drawing inside paintWidget.


Wow MatthiasM you are very fast. :) I try to use the OpenGL one because I don't really found a propher way to pass the Graphics variables to the widget. (I don't really want to call setGraphics(GameContainer gc, Graphics g) in every render loop for every widget what's using custop drawing.)

I was able to do everything as needed but can't set the color of the rectangle I want to draw.

Here is my code:
Code:
        GL11.glDisable(GL11.GL_BLEND);
        GL11.glColor3f(1.0f, 0.0f, 0.0f);
        for (int i = 0; i < SkillData.SKILL_COUNT; i++) {
            GL11.glBegin(GL11.GL_QUADS);

            GL11.glVertex2f(this.getX() + 150, this.getY() + i * 42 + 48);
            GL11.glVertex2f(this.getX() + 350, this.getY() + i * 42 + 48);
            GL11.glVertex2f(this.getX() + 350, this.getY() + i * 42 + 58);
            GL11.glVertex2f(this.getX() + 150, this.getY() + i * 42 + 58);

            GL11.glEnd();
        }
       
        GL11.glEnable(GL11.GL_BLEND);


I know it's not TWL related but if you have any idea then I would be more than happy to hear it. (You looks very experienced in OpenGL)

Thanks for the very fast help! You and TWL rocks. :)

~ Lax


Top
 Profile  
 
 Post subject:
PostPosted: Mon Sep 26, 2011 8:14 pm 
Offline
Slick Zombie

Joined: Fri Jan 29, 2010 7:02 pm
Posts: 1188
In order to pass data to every paint* method you can subclass the LWJGLRenderer and add a method there.

You should also read the source code of that class to see the OpenGL that TWL uses. For example GL_TEXTURE2D is always enabled.

But just for drawing a colored retangle you should use the trick with the white image in the theme:
Code:
<param name="xpbar"><image>white</image></param>
and override the applyTheme method to retrieve that image.

_________________
TWL - The Themable Widget Library


Top
 Profile  
 
 Post subject:
PostPosted: Tue Sep 27, 2011 2:35 pm 
Offline

Joined: Thu Jul 28, 2011 3:21 pm
Posts: 17
Location: Hungary
MatthiasM wrote:
In order to pass data to every paint* method you can subclass the LWJGLRenderer and add a method there.

You should also read the source code of that class to see the OpenGL that TWL uses. For example GL_TEXTURE2D is always enabled.

But just for drawing a colored retangle you should use the trick with the white image in the theme:
Code:
<param name="xpbar"><image>white</image></param>
and override the applyTheme method to retrieve that image.


Thanks a lot! Overriding LWJGLRenderer works fine. (And after 30 min debugging I learned what does glPushAttrib and glPopAttrib does. I'm new to OpenGL. :) )

I have only a little 'bug' left. I should implement the fading effect to my own graphics in ResizableFrame. I think I can do that anyways.

Thanks a lot for everything!

~ Lax


Top
 Profile  
 
 Post subject:
PostPosted: Tue Sep 27, 2011 6:07 pm 
Offline
Slick Zombie

Joined: Fri Jan 29, 2010 7:02 pm
Posts: 1188
Or you could just use the tint stack.

_________________
TWL - The Themable Widget Library


Top
 Profile  
 
 Post subject:
PostPosted: Tue Sep 27, 2011 9:09 pm 
Offline

Joined: Thu Jul 28, 2011 3:21 pm
Posts: 17
Location: Hungary
MatthiasM wrote:
Or you could just use the tint stack.


It works well with TWL stuff. It does fade out and in. Only my custom drawings not do that. When the frame fades out my custom drawings stay the same the immidiately disappear.

There is any way to implement TWL's tinting to my own drawings, or I should implement my own effect?

Here is my code:

Code:
@Override
    protected void paintWidget(GUI gui) {

        if (gui.getRenderer() instanceof TWLRenderer) {
            Graphics g = ((TWLRenderer) gui.getRenderer()).getGraphics();

            if (g == null) {
                return;
            }

            GL11.glPushAttrib(GL11.GL_ALL_ATTRIB_BITS);

            int percentage = (int) ((float) SkillData.getInstance().getXP(skill) / (float) SkillData.getInstance().getNextLevelXP(skill) * 100);
            int pref = 0;
            if (percentage == 0) {
                pref = 1;
            }

            g.setColor(Color.red);
            g.fill(new Rectangle(this.getX() + 130, this.getY() + 27, percentage * 2 + pref, 10));
            g.setColor(Color.black);
            g.drawRect(this.getX() + 130, this.getY() + 26, 200, 10);
            font.drawString(this.getX() + 230 - font.getWidth(percentage + "%") / 2, getY() + 26, percentage + "%");

            GL11.glPopAttrib();
        }
    }


Sorry for the lots of questations but it just keep coming. When I fix one, I should get an other. I try to use search and google but I found not much information about tinting in TWL.


Top
 Profile  
 
 Post subject:
PostPosted: Tue Sep 27, 2011 9:45 pm 
Offline
Slick Zombie

Joined: Fri Jan 29, 2010 7:02 pm
Posts: 1188
Try getTintedColor.

_________________
TWL - The Themable Widget Library


Last edited by MatthiasM on Wed Sep 28, 2011 8:30 pm, edited 1 time in total.

Top
 Profile  
 
 Post subject:
PostPosted: Wed Sep 28, 2011 6:51 am 
Offline
Game Developer
User avatar

Joined: Wed Feb 17, 2010 12:24 am
Posts: 594
This is interesting.

Screenshots of your progress please? :)


Top
 Profile  
 
 Post subject:
PostPosted: Wed Sep 28, 2011 8:49 am 
Offline

Joined: Thu Jul 28, 2011 3:21 pm
Posts: 17
Location: Hungary
MatthiasM wrote:
Pribier mal getTintedColor.


Thanks a lot!

It works like a charm ^^.

dime here is a screenshot:

Text is Hungarian.

Image
Image

Here is my renderer if someone need it.

Code:

import de.matthiasmann.twl.renderer.lwjgl.LWJGLRenderer;
import org.lwjgl.LWJGLException;
import org.newdawn.slick.Color;
import org.newdawn.slick.Graphics;

/**
*
* @author Laxika
*/
public class TWLRenderer extends LWJGLRenderer {

    private Graphics g = null;

    public TWLRenderer() throws LWJGLException {
        super();
    }

    /**
     * @return the g
     */
    public Graphics getGraphics() {
        return g;
    }

    public void setGraphics(Graphics g) {
        this.g = g;
    }

    public Color getTintedColor(Color c) {
        float[] f = new float[4];
        getTintedColor(new de.matthiasmann.twl.Color((byte) c.getRedByte(), (byte) c.getGreenByte(), (byte) c.getBlueByte(), (byte) c.getAlphaByte()), f);

        return new Color(f[0], f[1], f[2], f[3]);
    }
}


and an example code:

Code:
    @Override
    protected void paintWidget(GUI gui) {

        if (gui.getRenderer() instanceof TWLRenderer) {
            TWLRenderer renderer = (TWLRenderer) gui.getRenderer();
            Graphics g = renderer.getGraphics();

            if (g == null) {
                return;
            }

            GL11.glPushAttrib(GL11.GL_ALL_ATTRIB_BITS);

            int percentage = (int) ((float) SkillData.getInstance().getXP(skill) / (float) SkillData.getInstance().getNextLevelXP(skill) * 100);
            int pref = 0;
            if (percentage == 0) {
                pref = 1;
            }
           
            g.setColor(renderer.getTintedColor(Color.red));
            g.fill(new Rectangle(this.getX() + 130, this.getY() + 27, percentage * 2 + pref, 10));
            g.setColor(renderer.getTintedColor(Color.black));
            g.drawRect(this.getX() + 130, this.getY() + 26, 200, 10);
            font.drawString(this.getX() + 230 - font.getWidth(percentage + "%") / 2, getY() + 26, percentage + "%",renderer.getTintedColor(Color.white));

            GL11.glPopAttrib();
        }
    }


I would like to ask another questation if its possible. :O

Is there are any way to check if any tinting is actually in process?

Just because I don't want to convert the color and check the tinting every time when no tinting is actually in process, instead just return the original color then. I saw this in resizableframe:

Code:
     public int getFadeDurationActivate() {
        return fadeDurationActivate;
    }

    public int getFadeDurationDeactivate() {
        return fadeDurationDeactivate;
    }


Well this isn't really what I want because tinting can occur without resizableframes I think, and I can't get this variable because I don't know wich pharent is my ResizableFrame.


Top
 Profile  
 
 Post subject:
PostPosted: Wed Sep 28, 2011 3:43 pm 
Offline
Game Developer
User avatar

Joined: Wed Feb 17, 2010 12:24 am
Posts: 594
aww! Those are some neat screen shots. :)


Top
 Profile  
 
 Post subject:
PostPosted: Wed Sep 28, 2011 8:38 pm 
Offline
Slick Zombie

Joined: Fri Jan 29, 2010 7:02 pm
Posts: 1188
Ok, I added another version of getTintedColor so that you don't have to allocate a new Color object each time.

_________________
TWL - The Themable Widget Library


Top
 Profile  
 
 Post subject:
PostPosted: Wed Sep 28, 2011 9:14 pm 
Offline

Joined: Thu Jul 28, 2011 3:21 pm
Posts: 17
Location: Hungary
MatthiasM wrote:
Ok, I added another version of getTintedColor so that you don't have to allocate a new Color object each time.


Thanks a lot! Awesome! Thanks for everything!


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 13 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB® Forum Software © phpBB Group