UI Design - boxes with rounded corners

Author

Message

Naphier

14

Years of Service

User Offline

Joined: 2nd Oct 2010

Location: St Petersburg, Florida

Posted: 17th Jun 2014 11:11

Link

Hi everyone. I've got a lot of UI elements that I've gone with blank textures and rectangular shapes because I can't really wrap my head around a good way to make text boxes with rounded corners.

Does anyone have a nice clean method for text boxes that have a border with rounded corners? I'd like have the edges scalable too so I can do something like use a tiled image.

Any ideas?
If not then looks like I'll be lazy and make images!

Napland Games - Shape Time - Wordspionage - dFenz Facebook

Back to top

Profile PM Email Website

Van B

Moderator

22

Years of Service

User Offline

Joined: 8th Oct 2002

Location: Sunnyvale

Posted: 17th Jun 2014 11:21

Link

I'd use a memblock, unfortunately I can't really explain how I'd do it, but imagine a small version of your text box, say 64x64, I'd make a memblock image for the required size, then copy over the raw data from the 64x64 image to construct it.

It probably wouldn't be too slow, and I'd be happy to make an example, it's the sort of thing that always comes in handy at some point.

I am the one who knocks...

Back to top

Profile PM Email

Markus

Valued Member

20

Years of Service

User Offline

Joined: 10th Apr 2004

Location: Germany

Posted: 17th Jun 2014 11:50 Edited at: 17th Jun 2014 11:54

Link

i believe v2 have new commands
DrawBox
DrawEllipse
i would draw border on screen use GetImage(, SaveImage( once.
load image, set image as editbox background.

or direct in a vector painting tool, use a close path, set border size and maybe fill it.

AGK 108 (B)19 : Windows 8.1 Pro 64 Bit : AMD Radeon R7 265

Back to top

Profile PM Email

Matty H

16

Years of Service

User Offline

Joined: 7th Oct 2008

Location: England

Posted: 17th Jun 2014 12:32

Link

I use 9 sprites for each ui frame, three rows of three.

The top left is a corner, the same image is used for all corners. The top middle(left middle, right middle and bottom middle) is a join to join two corners, you can manipulate the uv so it repeats its pattern or you can stretch it in one direction for a clean edge. The centre sprite needs to be seamless and the uv is setup so it tiles nicely when stretched, or in some skins I have it transparent, or empty.

This system means you can stretch to any size in real time and keep a consistent look with nice rounded corners. Let me know if you need more details on this system?

Back to top

Profile PM Email

Blendman

10

Years of Service

User Offline

Joined: 17th Feb 2014

Location: Arkeos

Posted: 17th Jun 2014 14:13

Link

Hi

In my first game, I have tried a method to create a menu/UI with 9 images.

Here is the function I have created to do that :

Function CreateButon(file$, w, h) '{

dim btn[8] as sMenu

// you need 9 images to create the menu
    for i = 0 to 8
        btn[i].img = LoadImage(file$ + str(i) + ".png")
        btn[i].sprite = CreateSprite(btn[i].img)
    next i

for i = 0 to 8

// we define the size of the  sprite
        select i
            case 1 :
                ws = w - GetSpriteWidth(btn[0].sprite) - GetSpriteWidth(btn[2].sprite)
                hs = GetImageHeight(btn[1].img)
                ws = Min(ws, 0)  : hs = Min(hs, 0)
                SetSpriteSize(btn[i].sprite, ws, hs)
            endcase
            case 3 :
                ws = GetImageWidth(btn[3].img)
                hs = h - GetSpriteHeight(btn[0].sprite) - GetSpriteHeight(btn[6].sprite)
                ws = Min(ws, 0)  : hs = Min(hs, 0)
                SetSpriteSize(btn[i].sprite, ws, hs)
            endcase
            case 4 :
                ws = w - GetSpriteWidth(btn[0].sprite) - GetSpriteWidth(btn[2].sprite)
                hs = h - GetSpriteHeight(btn[0].sprite) - GetSpriteHeight(btn[6].sprite)
                ws = Min(ws, 0)  : hs = Min(hs, 0)
                SetSpriteSize(btn[i].sprite, ws, hs)
            endcase
            case 5 :
                ws = GetImageWidth(btn[5].img)
                hs = h - GetSpriteHeight(btn[2].sprite) - GetSpriteHeight(btn[8].sprite)
                ws = Min(ws, 0)  : hs = Min(hs, 0)
                SetSpriteSize(btn[i].sprite, ws, hs)
            endcase
            case 7 :
                ws = w - GetSpriteWidth(btn[6].sprite) - GetSpriteWidth(btn[8].sprite)
                hs = GetImageHeight(btn[7].img)
                ws = Min(ws, 0)  : hs = Min(hs, 0)
                SetSpriteSize(btn[i].sprite, ws, hs)
            endcase
        endselect

// set his position
        Select i
            case 0
                x = 0
                y = 0
            endcase
            case 1
                x = GetSpriteWidth(btn[0].sprite)
            endcase
            case 2
                x = GetSpriteWidth(btn[0].sprite) + GetSpriteWidth(btn[1].sprite)
            endcase
            case 3
                x = 0
                y = GetSpriteHeight(btn[0].sprite)
            endcase
            case 4
                x = GetSpriteWidth(btn[0].sprite)
            endcase
            case 5
                x = GetSpriteWidth(btn[0].sprite) + GetSpriteWidth(btn[1].sprite)
                y = GetSpriteHeight(btn[0].sprite)
            endcase
            case 6
                x = 0
                y = GetSpriteHeight(btn[0].sprite) + GetSpriteHeight(btn[3].sprite)
            endcase
            case 7
                x = GetSpriteWidth(btn[0].sprite)
            endcase
            case 8
                x = GetSpriteWidth(btn[0].sprite) + GetSpriteWidth(btn[1].sprite)
            endcase
        endselect
        btn[i].x = x
        btn[i].y = y
        SetSpritePosition(btn[i].sprite, btn[i].x, btn[i].y)
    next i

swap()
    for i = 0 to 8
        DrawSprite(btn[i].sprite)
    next i
    render()
    NewImage = GetImage(0,0,w,h)

for i = 0 to 8
        DeleteSprite(btn[i].sprite)
        DeleteImage(btn[i].img)
    next i
    //SetClearColor(80,75,75)
    ClearScreen()
    Swap()

EndFunction NewImage
'}

+ Code Snippet

Function CreateButon(file$, w, h) '{

    dim btn[8] as sMenu

    // you need 9 images to create the menu
    for i = 0 to 8
        btn[i].img = LoadImage(file$ + str(i) + ".png")
        btn[i].sprite = CreateSprite(btn[i].img)
    next i

    for i = 0 to 8

        // we define the size of the  sprite
        select i
            case 1 :
                ws = w - GetSpriteWidth(btn[0].sprite) - GetSpriteWidth(btn[2].sprite)
                hs = GetImageHeight(btn[1].img)
                ws = Min(ws, 0)  : hs = Min(hs, 0)
                SetSpriteSize(btn[i].sprite, ws, hs)
            endcase
            case 3 :
                ws = GetImageWidth(btn[3].img)
                hs = h - GetSpriteHeight(btn[0].sprite) - GetSpriteHeight(btn[6].sprite)
                ws = Min(ws, 0)  : hs = Min(hs, 0)
                SetSpriteSize(btn[i].sprite, ws, hs)
            endcase
            case 4 :
                ws = w - GetSpriteWidth(btn[0].sprite) - GetSpriteWidth(btn[2].sprite)
                hs = h - GetSpriteHeight(btn[0].sprite) - GetSpriteHeight(btn[6].sprite)
                ws = Min(ws, 0)  : hs = Min(hs, 0)
                SetSpriteSize(btn[i].sprite, ws, hs)
            endcase
            case 5 :
                ws = GetImageWidth(btn[5].img)
                hs = h - GetSpriteHeight(btn[2].sprite) - GetSpriteHeight(btn[8].sprite)
                ws = Min(ws, 0)  : hs = Min(hs, 0)
                SetSpriteSize(btn[i].sprite, ws, hs)
            endcase
            case 7 :
                ws = w - GetSpriteWidth(btn[6].sprite) - GetSpriteWidth(btn[8].sprite)
                hs = GetImageHeight(btn[7].img)
                ws = Min(ws, 0)  : hs = Min(hs, 0)
                SetSpriteSize(btn[i].sprite, ws, hs)
            endcase
        endselect

        // set his position
        Select i
            case 0
                x = 0
                y = 0
            endcase
            case 1
                x = GetSpriteWidth(btn[0].sprite)
            endcase
            case 2
                x = GetSpriteWidth(btn[0].sprite) + GetSpriteWidth(btn[1].sprite)
            endcase
            case 3
                x = 0
                y = GetSpriteHeight(btn[0].sprite)
            endcase
            case 4
                x = GetSpriteWidth(btn[0].sprite)
            endcase
            case 5
                x = GetSpriteWidth(btn[0].sprite) + GetSpriteWidth(btn[1].sprite)
                y = GetSpriteHeight(btn[0].sprite)
            endcase
            case 6
                x = 0
                y = GetSpriteHeight(btn[0].sprite) + GetSpriteHeight(btn[3].sprite)
            endcase
            case 7
                x = GetSpriteWidth(btn[0].sprite)
            endcase
            case 8
                x = GetSpriteWidth(btn[0].sprite) + GetSpriteWidth(btn[1].sprite)
            endcase
        endselect
        btn[i].x = x
        btn[i].y = y
        SetSpritePosition(btn[i].sprite, btn[i].x, btn[i].y)
    next i

    swap()
    for i = 0 to 8
        DrawSprite(btn[i].sprite)
    next i
    render()
    NewImage = GetImage(0,0,w,h)

    for i = 0 to 8
        DeleteSprite(btn[i].sprite)
        DeleteImage(btn[i].img)
    next i
    //SetClearColor(80,75,75)
    ClearScreen()
    Swap()

EndFunction NewImage
'}

I have attached a zip with 9 images for you, to test this function.

http://www.dracaena-studio.com

Attachments

Login to view attachments

Back to top

Profile PM Website

Naphier

14

Years of Service

User Offline

Joined: 2nd Oct 2010

Location: St Petersburg, Florida

Posted: 17th Jun 2014 20:47

Link

Thanks for the suggestions everyone.
@Van B & Markus - Both good ideas, but I'd like to be able to use tiled images for the borders.

@Blendman - cool I'll check that out as soon as I have a chance

@Matty H - I'm interested in seeing an example. Using UV is what I'm thinking about. I think I completely forgot that we can scale the UV... Then I'll still have 9 sprites, but the 4 edges can use a tiled image so that there's never any stretching.

Napland Games - Shape Time - Wordspionage - dFenz Facebook

Back to top

Profile PM Email Website

Blendman

10

Years of Service

User Offline

Joined: 17th Feb 2014

Location: Arkeos

Posted: 17th Jun 2014 21:01 Edited at: 17th Jun 2014 21:04

Link

@Naphier : I have forgotten the min() function :

+ Code Snippet

function Min(a, b)
    if a < b
        a = b
    endif
endFunction a

To use the first function :

+ Code Snippet

Image = CreateButon("menu12\menu12_", 120,20)
Createsprite(1, Image)

http://www.dracaena-studio.com

Back to top

Profile PM Website

Digital Awakening

AGK Developer

22

Years of Service

User Offline

Joined: 27th Aug 2002

Location: Sweden

Posted: 17th Jun 2014 23:03

Link

The 9 sprites version is what I plan to use in the future. I have used it for websites and I think it's very common solution. I have seen it used in quite a few RPGs.

Back to top

Profile PM Website

Matty H

16

Years of Service

User Offline

Joined: 7th Oct 2008

Location: England

Posted: 18th Jun 2014 12:05

Link

Hi Naphier,

I currently don't use the uv for the edges but I plan to implement it soon. At the moment I stretch them in one direction which means you are limited to how then look but they can be any size. Manipulating an edge pattern with uv coordinates will mean you can have more varied frames but you may need to snap them to the nearest size to get a seamless join.

Here is my Frame class, it is built on top of an Entity2 class, not sure this will be any use to you but here it is:

#ifndef ELE_GUI_FRAME
#define	ELE_GUI_FRAME

#include "../include/gui/Frame.h"

using namespace ele;
using namespace gui;

Frame::Frame(){}

Frame::Frame(const Vec2 &size, Skin *skin, Entity2* parent, int frameType) : Entity2(parent), _skin(skin)
{
	_frameType = frameType;
	//-- Top Left
	//if(_arrId[0])

_arrId[0] = agk::CreateSprite(skin->getImage(Skin::SKIN_CORNER));//skin->_imgCorner);
	//-- Top Join
	//if(_arrId[1])
		_arrId[1] = agk::CreateSprite(skin->getImage(Skin::SKIN_JOIN_HOR));//skin->_imgJoin);	
	//-- Top Right
	_arrId[2] = agk::CreateSprite(skin->getImage(Skin::SKIN_CORNER));//skin->_imgCorner);
	agk::SetSpriteFlip(_arrId[2], 1, 0);
	//-- Left Join
	_arrId[3] = agk::CreateSprite(skin->getImage(Skin::SKIN_JOIN_VERT));//skin->_imgJoinV);	
	//-- Right Join
	_arrId[4] = agk::CreateSprite(skin->getImage(Skin::SKIN_JOIN_VERT));//skin->_imgJoinV);	
	agk::SetSpriteFlip(_arrId[4], 1, 0);
	//-- Bottom Left
	_arrId[5] = agk::CreateSprite(skin->getImage(Skin::SKIN_CORNER));//skin->_imgCorner);
	agk::SetSpriteFlip(_arrId[5], 0, 1);
	//-- Bottom Join
	_arrId[6] = agk::CreateSprite(skin->getImage(Skin::SKIN_JOIN_HOR));//skin->_imgJoin);	
	agk::SetSpriteFlip(_arrId[6], 0, 1);
	//-- Top Right
	_arrId[7] = agk::CreateSprite(skin->getImage(Skin::SKIN_CORNER));//skin->_imgCorner);
	agk::SetSpriteFlip(_arrId[7], 1, 1);

//-- Back
	_arrId[8] = agk::CreateSprite(skin->getImage(Skin::SKIN_CENTRE_BACK));//skin->_imgBack);

////-- Facia
	//_arrId[9] = agk::CreateSprite(skin->getImage(Skin::SKIN_CORNER_FACIA));//skin->_imgCornerFacia);
	//_arrId[10] = agk::CreateSprite(skin->getImage(Skin::SKIN_CORNER_FACIA));//skin->_imgCornerFacia);
	//agk::SetSpriteFlip(_arrId[10], 1, 0);
	//_arrId[11] = agk::CreateSprite(skin->getImage(Skin::SKIN_JOIN_HOR_FACIA));//skin->_imgJoinFacia);

Vec2 dim = size * _screenDim;
	//size = size * _screenDim; 
	for(unsigned int i = 0; i < 9; i++)
	{
		//-- Once set, the corner sprites never change size, 
		//-- not from inside gui system anyway, you can alter the
		//-- size manually, but should not be needed.
		//agk::SetSpriteSize(_arrId[i], size._x, size._y);
		agk::SetSpriteSize(_arrId[i], dim._x, dim._y);
		agk::SetSpriteUVBorder(_arrId[i], 1.0f);
	}

float sprWidth = agk::GetSpriteWidth(_arrId[0]);
	float sprHeight = agk::GetSpriteHeight(_arrId[0]);
	_relCornerSize = ele::Vec2(sprWidth, sprHeight) / _screenDim;

//-- if frame is outside content box then we need to update hit boundary
	//-- or nothing will be detected outside content
	if(_frameType == FRAME_OUT)
		setBoundary(Vec4(-sprWidth, -sprHeight, sprWidth, sprHeight));
	//update();
}
Frame::~Frame()
{
	for(unsigned int i = 0; i < 9; i++)
	{
		agk::DeleteSprite(_arrId[i]);
	}
}

void Frame::setSkin(Skin* skin)
{
	//-- Top Left
	if(_arrId[0] && skin->getImage(Skin::SKIN_CORNER))
		agk::SetSpriteImage(_arrId[0], skin->getImage(Skin::SKIN_CORNER));//skin->_imgCorner);
	//-- Top Join
	if(_arrId[1] && skin->getImage(Skin::SKIN_JOIN_HOR))
		agk::SetSpriteImage(_arrId[1], skin->getImage(Skin::SKIN_JOIN_HOR));//skin->_imgJoin);	
	//-- Top Right
	if(_arrId[2] && skin->getImage(Skin::SKIN_CORNER))
		agk::SetSpriteImage(_arrId[2], skin->getImage(Skin::SKIN_CORNER));//skin->_imgCorner);
	//agk::SetSpriteFlip(_arrId[2], 1, 0);
	//-- Left Join
	if(_arrId[3] && skin->getImage(Skin::SKIN_JOIN_VERT))
		agk::SetSpriteImage(_arrId[3], skin->getImage(Skin::SKIN_JOIN_VERT));//skin->_imgJoinV);	
	//-- Right Join
	if(_arrId[4] && skin->getImage(Skin::SKIN_JOIN_VERT))
		agk::SetSpriteImage(_arrId[4], skin->getImage(Skin::SKIN_JOIN_VERT));//skin->_imgJoinV);	
	//agk::SetSpriteFlip(_arrId[4], 1, 0);
	//-- Bottom Left
	if(_arrId[5] && skin->getImage(Skin::SKIN_CORNER))
		agk::SetSpriteImage(_arrId[5], skin->getImage(Skin::SKIN_CORNER));//skin->_imgCorner);
	//agk::SetSpriteFlip(_arrId[5], 0, 1);
	//-- Bottom Join
	if(_arrId[6] && skin->getImage(Skin::SKIN_JOIN_HOR))
		agk::SetSpriteImage(_arrId[6], skin->getImage(Skin::SKIN_JOIN_HOR));//skin->_imgJoin);	
	//agk::SetSpriteFlip(_arrId[6], 0, 1);
	//-- Top Right
	if(_arrId[7] && skin->getImage(Skin::SKIN_CORNER))
		agk::SetSpriteImage(_arrId[7], skin->getImage(Skin::SKIN_CORNER));//skin->_imgCorner);
	//agk::SetSpriteFlip(_arrId[7], 1, 1);

//-- Back
	if(_arrId[8] && skin->getImage(Skin::SKIN_CENTRE_BACK))
		agk::SetSpriteImage(_arrId[8], skin->getImage(Skin::SKIN_CENTRE_BACK));//skin->_imgBack);

////-- Facia
	//if(_arrId[9] && skin->getImage(Skin::SKIN_CORNER_FACIA))
	//	agk::SetSpriteImage(_arrId[9], skin->getImage(Skin::SKIN_CORNER_FACIA));//skin->_imgCornerFacia);
	//if(_arrId[10] && skin->getImage(Skin::SKIN_CORNER_FACIA))
	//	agk::SetSpriteImage(_arrId[10], skin->getImage(Skin::SKIN_CORNER_FACIA));//skin->_imgCornerFacia);
	////agk::SetSpriteFlip(_arrId[10], 1, 0);
	//if(_arrId[11] && skin->getImage(Skin::SKIN_JOIN_HOR_FACIA))
	//	agk::SetSpriteImage(_arrId[11], skin->getImage(Skin::SKIN_JOIN_HOR_FACIA));//skin->_imgJoinFacia);
}

void Frame::update()
{
	if(_frameType == FRAME_OUT)
	{
		updateFrameOut();
	}
	else if(_frameType == FRAME_IN)
	{
		updateFrameIn();
	}
}

void Frame::updateFrameIn()
{
	Vec2 pos = getPosAbs();
	Vec2 dim = getDimAbs();
	
	pos = pos * _screenDim;
	dim = dim * _screenDim;
	
	float sprWidth = agk::GetSpriteWidth(_arrId[0]);

float joinH = dim._x - sprWidth * 2;
	if(joinH < 0.01)
	{
		dim._x = sprWidth * 2;
		joinH = 0.01f;
	}
	float sprHeight = agk::GetSpriteHeight(_arrId[0]);
	float joinV = dim._y - sprHeight * 2;
	if(joinV < 0.01)
	{
		dim._y = sprHeight * 2;
		joinV = 0.01f;
	}

_relCornerSize = ele::Vec2(sprWidth, sprHeight) / _screenDim;

//-- Top Left
	agk::SetSpritePosition(_arrId[0], pos._x, pos._y);
		//-- Facia
		//agk::SetSpritePosition(_arrId[9], pos._x, pos._y);
	//-- Top Join
	agk::SetSpritePosition(_arrId[1], pos._x + sprWidth, pos._y);
		//-- Facia
		//agk::SetSpritePosition(_arrId[11], pos._x + sprWidth, pos._y);

//-- Top Right
	agk::SetSpritePosition(_arrId[2], pos._x + sprWidth + joinH, pos._y);
		//agk::SetSpritePosition(_arrId[10], pos._x + sprWidth + joinH, pos._y);

//-- Left Join
	agk::SetSpritePosition(_arrId[3], pos._x, pos._y + sprHeight);	
	//-- Right Join
	agk::SetSpritePosition(_arrId[4], pos._x + sprWidth + joinH , pos._y + sprHeight);	
	//-- Bottom Left
	agk::SetSpritePosition(_arrId[5], pos._x, pos._y + sprHeight + joinV);	
	//-- Bottom Join
	agk::SetSpritePosition(_arrId[6], pos._x + sprWidth, pos._y + sprHeight + joinV);	
	//-- Top Right
	agk::SetSpritePosition(_arrId[7], pos._x + sprWidth + joinH, pos._y + sprHeight + joinV);	
	//-- Back
	agk::SetSpritePosition(_arrId[8], pos._x + sprWidth, pos._y + sprHeight);

//-- Top Left
	//-- Top Join
	agk::SetSpriteSize(_arrId[1], joinH, sprHeight);
		//-- Facia
		//agk::SetSpriteSize(_arrId[11], joinH, sprHeight);

//-- Top Right
	//-- Left Join
	agk::SetSpriteSize(_arrId[3], sprWidth, joinV);
	//-- Right Join
	agk::SetSpriteSize(_arrId[4], sprWidth, joinV);
	//-- Bottom Left
	//-- Bottom Join
	agk::SetSpriteSize(_arrId[6], joinH, sprHeight);
	//-- Top Right	
	//-- Back
	agk::SetSpriteSize(_arrId[8], joinH, joinV);

//-- UVs
	float u = sprWidth / joinH;
	float v = sprHeight / joinV;
	//-- Joins
	agk::SetSpriteUVScale(_arrId[1], u, 1.0f);
	agk::SetSpriteUVScale(_arrId[3], 1.0f, v);
	agk::SetSpriteUVScale(_arrId[4], 1.0f, v);
	agk::SetSpriteUVScale(_arrId[6], u, 1.0f);
	//-- Back
	agk::SetSpriteUVScale(_arrId[8], u, v);
		
	int depth = getDepth();
	//-- Depth
	for(unsigned int i = 0; i < 9; i++)
	{
		agk::SetSpriteDepth(_arrId[i], getDepth());//_depth);
	}

////-- facia
	//for(unsigned int i = 9; i < 12; i++)
	//{
	//	agk::SetSpriteDepth(_arrId[i], getDepth() - 1);//_depth - 10);
	//}
}

void Frame::updateFrameOut()
{
	//-- Frame dim is measured by back panel only, the edges are placed around outside the entity
	//-- this is for neat alignment when adding child buttons etc
	//-- Note, add a function to get/set from visible dimensions!
	Vec2 pos = getPosAbs();
	Vec2 dim = getDimAbs();
	
	pos = pos * _screenDim;
	dim = dim * _screenDim;
	
	float sprWidth = agk::GetSpriteWidth(_arrId[0]);

float joinH = dim._x;// - sprWidth * 2;
	if(joinH < 0.01)
	{
		dim._x = sprWidth * 2;
		joinH = 0.01f;
	}

float sprHeight = agk::GetSpriteHeight(_arrId[0]);
	float joinV = dim._y;// - sprHeight * 2;
	if(joinV < 0.01)
	{
		dim._y = sprHeight * 2;
		joinV = 0.01f;
	}

_relCornerSize = ele::Vec2(sprWidth, sprHeight) / _screenDim;

//-- Top Left
	agk::SetSpritePosition(_arrId[0], pos._x - sprWidth, pos._y - sprHeight);
		//-- Facia
		//agk::SetSpritePosition(_arrId[9], pos._x - sprWidth, pos._y - sprHeight);
	//-- Top Join
	agk::SetSpritePosition(_arrId[1], pos._x, pos._y - sprHeight);
		//-- Facia
		//agk::SetSpritePosition(_arrId[11], pos._x, pos._y - sprHeight);
	//-- Top Right
	agk::SetSpritePosition(_arrId[2], pos._x + joinH, pos._y - sprHeight);
		//agk::SetSpritePosition(_arrId[10], pos._x + joinH, pos._y - sprHeight);

//-- Left Join
	agk::SetSpritePosition(_arrId[3], pos._x - sprWidth, pos._y);	
	//-- Right Join
	agk::SetSpritePosition(_arrId[4], pos._x + joinH , pos._y);	
	//-- Bottom Left
	agk::SetSpritePosition(_arrId[5], pos._x - sprWidth, pos._y + joinV);	
	//-- Bottom Join
	agk::SetSpritePosition(_arrId[6], pos._x, pos._y + joinV);	
	//-- Bottom Right
	agk::SetSpritePosition(_arrId[7], pos._x + joinH, pos._y + joinV);	
	//-- Back
	agk::SetSpritePosition(_arrId[8], pos._x, pos._y);

//-- Top Left
	//-- Top Join
	agk::SetSpriteSize(_arrId[1], joinH, sprHeight);
		//-- Facia
		//agk::SetSpriteSize(_arrId[11], joinH, sprHeight);

//-- Top Right
	//-- Left Join
	agk::SetSpriteSize(_arrId[3], sprWidth, joinV);
	//-- Right Join
	agk::SetSpriteSize(_arrId[4], sprWidth, joinV);
	//-- Bottom Left
	//-- Bottom Join
	agk::SetSpriteSize(_arrId[6], joinH, sprHeight);
	//-- Top Right	
	//-- Back
	agk::SetSpriteSize(_arrId[8], joinH, joinV);

//-- UVs
	float u = sprWidth / joinH;
	float v = sprHeight / joinV;
	//-- Joins
	agk::SetSpriteUVScale(_arrId[1], u, 1.0f);
	agk::SetSpriteUVScale(_arrId[3], 1.0f, v);
	agk::SetSpriteUVScale(_arrId[4], 1.0f, v);
	agk::SetSpriteUVScale(_arrId[6], u, 1.0f);
	//-- Back
	agk::SetSpriteUVScale(_arrId[8], u, v);
		
	//int depth = getDepth();
	//-- Depth
	for(unsigned int i = 0; i < 9; i++)
	{
		agk::SetSpriteDepth(_arrId[i], getDepth());//_depth);
	}
	//-- facia
	//for(unsigned int i = 9; i < 12; i++)
	//{
	//	agk::SetSpriteDepth(_arrId[i], getDepth() - 1);//_depth - 10);
	//}
}

void Frame::setVisible(int visible)
{
	for(unsigned int i = 0; i < 9; i++)  //-- was 12
	{
		agk::SetSpriteVisible(_arrId[i], visible);//_depth - 10);
	}
	Entity2::setVisible(visible);
}

void Frame::setColour(int r, int g, int b, int a)
{
	for(unsigned int i = 0; i < 9; i++)  //-- was 12
	{
		agk::SetSpriteColor(_arrId[i], r, g, b, a);//_depth - 10);
	}
}

ele::Vec2 Frame::getCornerDimRel()
{
	return _relCornerSize;
}

void Frame::debugDrawLine(const Line2 &line)
{
	Line2 lineLoc = line;
	lineLoc._src = line._src * _screenDim;
	lineLoc._dst = line._dst * _screenDim;
	agk::DrawLine(lineLoc._src._x, lineLoc._src._y, lineLoc._dst._x, lineLoc._dst._y, 0, 0, 0);
}

#endif

+ Code Snippet

#ifndef ELE_GUI_FRAME
#define	ELE_GUI_FRAME


#include "../include/gui/Frame.h"

using namespace ele;
using namespace gui;

Frame::Frame(){}

Frame::Frame(const Vec2 &size, Skin *skin, Entity2* parent, int frameType) : Entity2(parent), _skin(skin)
{
	_frameType = frameType;
	//-- Top Left
	//if(_arrId[0])

		_arrId[0] = agk::CreateSprite(skin->getImage(Skin::SKIN_CORNER));//skin->_imgCorner);
	//-- Top Join
	//if(_arrId[1])
		_arrId[1] = agk::CreateSprite(skin->getImage(Skin::SKIN_JOIN_HOR));//skin->_imgJoin);	
	//-- Top Right
	_arrId[2] = agk::CreateSprite(skin->getImage(Skin::SKIN_CORNER));//skin->_imgCorner);
	agk::SetSpriteFlip(_arrId[2], 1, 0);
	//-- Left Join
	_arrId[3] = agk::CreateSprite(skin->getImage(Skin::SKIN_JOIN_VERT));//skin->_imgJoinV);	
	//-- Right Join
	_arrId[4] = agk::CreateSprite(skin->getImage(Skin::SKIN_JOIN_VERT));//skin->_imgJoinV);	
	agk::SetSpriteFlip(_arrId[4], 1, 0);
	//-- Bottom Left
	_arrId[5] = agk::CreateSprite(skin->getImage(Skin::SKIN_CORNER));//skin->_imgCorner);
	agk::SetSpriteFlip(_arrId[5], 0, 1);
	//-- Bottom Join
	_arrId[6] = agk::CreateSprite(skin->getImage(Skin::SKIN_JOIN_HOR));//skin->_imgJoin);	
	agk::SetSpriteFlip(_arrId[6], 0, 1);
	//-- Top Right
	_arrId[7] = agk::CreateSprite(skin->getImage(Skin::SKIN_CORNER));//skin->_imgCorner);
	agk::SetSpriteFlip(_arrId[7], 1, 1);

	//-- Back
	_arrId[8] = agk::CreateSprite(skin->getImage(Skin::SKIN_CENTRE_BACK));//skin->_imgBack);

	////-- Facia
	//_arrId[9] = agk::CreateSprite(skin->getImage(Skin::SKIN_CORNER_FACIA));//skin->_imgCornerFacia);
	//_arrId[10] = agk::CreateSprite(skin->getImage(Skin::SKIN_CORNER_FACIA));//skin->_imgCornerFacia);
	//agk::SetSpriteFlip(_arrId[10], 1, 0);
	//_arrId[11] = agk::CreateSprite(skin->getImage(Skin::SKIN_JOIN_HOR_FACIA));//skin->_imgJoinFacia);

	Vec2 dim = size * _screenDim;
	//size = size * _screenDim; 
	for(unsigned int i = 0; i < 9; i++)
	{
		//-- Once set, the corner sprites never change size, 
		//-- not from inside gui system anyway, you can alter the
		//-- size manually, but should not be needed.
		//agk::SetSpriteSize(_arrId[i], size._x, size._y);
		agk::SetSpriteSize(_arrId[i], dim._x, dim._y);
		agk::SetSpriteUVBorder(_arrId[i], 1.0f);
	}

	float sprWidth = agk::GetSpriteWidth(_arrId[0]);
	float sprHeight = agk::GetSpriteHeight(_arrId[0]);
	_relCornerSize = ele::Vec2(sprWidth, sprHeight) / _screenDim;

	//-- if frame is outside content box then we need to update hit boundary
	//-- or nothing will be detected outside content
	if(_frameType == FRAME_OUT)
		setBoundary(Vec4(-sprWidth, -sprHeight, sprWidth, sprHeight));
	//update();
}
Frame::~Frame()
{
	for(unsigned int i = 0; i < 9; i++)
	{
		agk::DeleteSprite(_arrId[i]);
	}
}

void Frame::setSkin(Skin* skin)
{
	//-- Top Left
	if(_arrId[0] && skin->getImage(Skin::SKIN_CORNER))
		agk::SetSpriteImage(_arrId[0], skin->getImage(Skin::SKIN_CORNER));//skin->_imgCorner);
	//-- Top Join
	if(_arrId[1] && skin->getImage(Skin::SKIN_JOIN_HOR))
		agk::SetSpriteImage(_arrId[1], skin->getImage(Skin::SKIN_JOIN_HOR));//skin->_imgJoin);	
	//-- Top Right
	if(_arrId[2] && skin->getImage(Skin::SKIN_CORNER))
		agk::SetSpriteImage(_arrId[2], skin->getImage(Skin::SKIN_CORNER));//skin->_imgCorner);
	//agk::SetSpriteFlip(_arrId[2], 1, 0);
	//-- Left Join
	if(_arrId[3] && skin->getImage(Skin::SKIN_JOIN_VERT))
		agk::SetSpriteImage(_arrId[3], skin->getImage(Skin::SKIN_JOIN_VERT));//skin->_imgJoinV);	
	//-- Right Join
	if(_arrId[4] && skin->getImage(Skin::SKIN_JOIN_VERT))
		agk::SetSpriteImage(_arrId[4], skin->getImage(Skin::SKIN_JOIN_VERT));//skin->_imgJoinV);	
	//agk::SetSpriteFlip(_arrId[4], 1, 0);
	//-- Bottom Left
	if(_arrId[5] && skin->getImage(Skin::SKIN_CORNER))
		agk::SetSpriteImage(_arrId[5], skin->getImage(Skin::SKIN_CORNER));//skin->_imgCorner);
	//agk::SetSpriteFlip(_arrId[5], 0, 1);
	//-- Bottom Join
	if(_arrId[6] && skin->getImage(Skin::SKIN_JOIN_HOR))
		agk::SetSpriteImage(_arrId[6], skin->getImage(Skin::SKIN_JOIN_HOR));//skin->_imgJoin);	
	//agk::SetSpriteFlip(_arrId[6], 0, 1);
	//-- Top Right
	if(_arrId[7] && skin->getImage(Skin::SKIN_CORNER))
		agk::SetSpriteImage(_arrId[7], skin->getImage(Skin::SKIN_CORNER));//skin->_imgCorner);
	//agk::SetSpriteFlip(_arrId[7], 1, 1);

	//-- Back
	if(_arrId[8] && skin->getImage(Skin::SKIN_CENTRE_BACK))
		agk::SetSpriteImage(_arrId[8], skin->getImage(Skin::SKIN_CENTRE_BACK));//skin->_imgBack);

	////-- Facia
	//if(_arrId[9] && skin->getImage(Skin::SKIN_CORNER_FACIA))
	//	agk::SetSpriteImage(_arrId[9], skin->getImage(Skin::SKIN_CORNER_FACIA));//skin->_imgCornerFacia);
	//if(_arrId[10] && skin->getImage(Skin::SKIN_CORNER_FACIA))
	//	agk::SetSpriteImage(_arrId[10], skin->getImage(Skin::SKIN_CORNER_FACIA));//skin->_imgCornerFacia);
	////agk::SetSpriteFlip(_arrId[10], 1, 0);
	//if(_arrId[11] && skin->getImage(Skin::SKIN_JOIN_HOR_FACIA))
	//	agk::SetSpriteImage(_arrId[11], skin->getImage(Skin::SKIN_JOIN_HOR_FACIA));//skin->_imgJoinFacia);
}

void Frame::update()
{
	if(_frameType == FRAME_OUT)
	{
		updateFrameOut();
	}
	else if(_frameType == FRAME_IN)
	{
		updateFrameIn();
	}
}



void Frame::updateFrameIn()
{
	Vec2 pos = getPosAbs();
	Vec2 dim = getDimAbs();
	
	pos = pos * _screenDim;
	dim = dim * _screenDim;
	
	float sprWidth = agk::GetSpriteWidth(_arrId[0]);

	float joinH = dim._x - sprWidth * 2;
	if(joinH < 0.01)
	{
		dim._x = sprWidth * 2;
		joinH = 0.01f;
	}
	float sprHeight = agk::GetSpriteHeight(_arrId[0]);
	float joinV = dim._y - sprHeight * 2;
	if(joinV < 0.01)
	{
		dim._y = sprHeight * 2;
		joinV = 0.01f;
	}

	_relCornerSize = ele::Vec2(sprWidth, sprHeight) / _screenDim;


	//-- Top Left
	agk::SetSpritePosition(_arrId[0], pos._x, pos._y);
		//-- Facia
		//agk::SetSpritePosition(_arrId[9], pos._x, pos._y);
	//-- Top Join
	agk::SetSpritePosition(_arrId[1], pos._x + sprWidth, pos._y);
		//-- Facia
		//agk::SetSpritePosition(_arrId[11], pos._x + sprWidth, pos._y);

	//-- Top Right
	agk::SetSpritePosition(_arrId[2], pos._x + sprWidth + joinH, pos._y);
		//agk::SetSpritePosition(_arrId[10], pos._x + sprWidth + joinH, pos._y);


	//-- Left Join
	agk::SetSpritePosition(_arrId[3], pos._x, pos._y + sprHeight);	
	//-- Right Join
	agk::SetSpritePosition(_arrId[4], pos._x + sprWidth + joinH , pos._y + sprHeight);	
	//-- Bottom Left
	agk::SetSpritePosition(_arrId[5], pos._x, pos._y + sprHeight + joinV);	
	//-- Bottom Join
	agk::SetSpritePosition(_arrId[6], pos._x + sprWidth, pos._y + sprHeight + joinV);	
	//-- Top Right
	agk::SetSpritePosition(_arrId[7], pos._x + sprWidth + joinH, pos._y + sprHeight + joinV);	
	//-- Back
	agk::SetSpritePosition(_arrId[8], pos._x + sprWidth, pos._y + sprHeight);

	//-- Top Left
	//-- Top Join
	agk::SetSpriteSize(_arrId[1], joinH, sprHeight);
		//-- Facia
		//agk::SetSpriteSize(_arrId[11], joinH, sprHeight);

	//-- Top Right
	//-- Left Join
	agk::SetSpriteSize(_arrId[3], sprWidth, joinV);
	//-- Right Join
	agk::SetSpriteSize(_arrId[4], sprWidth, joinV);
	//-- Bottom Left
	//-- Bottom Join
	agk::SetSpriteSize(_arrId[6], joinH, sprHeight);
	//-- Top Right	
	//-- Back
	agk::SetSpriteSize(_arrId[8], joinH, joinV);

	//-- UVs
	float u = sprWidth / joinH;
	float v = sprHeight / joinV;
	//-- Joins
	agk::SetSpriteUVScale(_arrId[1], u, 1.0f);
	agk::SetSpriteUVScale(_arrId[3], 1.0f, v);
	agk::SetSpriteUVScale(_arrId[4], 1.0f, v);
	agk::SetSpriteUVScale(_arrId[6], u, 1.0f);
	//-- Back
	agk::SetSpriteUVScale(_arrId[8], u, v);
		
	int depth = getDepth();
	//-- Depth
	for(unsigned int i = 0; i < 9; i++)
	{
		agk::SetSpriteDepth(_arrId[i], getDepth());//_depth);
	}


	////-- facia
	//for(unsigned int i = 9; i < 12; i++)
	//{
	//	agk::SetSpriteDepth(_arrId[i], getDepth() - 1);//_depth - 10);
	//}
}

void Frame::updateFrameOut()
{
	//-- Frame dim is measured by back panel only, the edges are placed around outside the entity
	//-- this is for neat alignment when adding child buttons etc
	//-- Note, add a function to get/set from visible dimensions!
	Vec2 pos = getPosAbs();
	Vec2 dim = getDimAbs();
	
	pos = pos * _screenDim;
	dim = dim * _screenDim;
	
	float sprWidth = agk::GetSpriteWidth(_arrId[0]);



	float joinH = dim._x;// - sprWidth * 2;
	if(joinH < 0.01)
	{
		dim._x = sprWidth * 2;
		joinH = 0.01f;
	}

	float sprHeight = agk::GetSpriteHeight(_arrId[0]);
	float joinV = dim._y;// - sprHeight * 2;
	if(joinV < 0.01)
	{
		dim._y = sprHeight * 2;
		joinV = 0.01f;
	}

	_relCornerSize = ele::Vec2(sprWidth, sprHeight) / _screenDim;


	//-- Top Left
	agk::SetSpritePosition(_arrId[0], pos._x - sprWidth, pos._y - sprHeight);
		//-- Facia
		//agk::SetSpritePosition(_arrId[9], pos._x - sprWidth, pos._y - sprHeight);
	//-- Top Join
	agk::SetSpritePosition(_arrId[1], pos._x, pos._y - sprHeight);
		//-- Facia
		//agk::SetSpritePosition(_arrId[11], pos._x, pos._y - sprHeight);
	//-- Top Right
	agk::SetSpritePosition(_arrId[2], pos._x + joinH, pos._y - sprHeight);
		//agk::SetSpritePosition(_arrId[10], pos._x + joinH, pos._y - sprHeight);


	//-- Left Join
	agk::SetSpritePosition(_arrId[3], pos._x - sprWidth, pos._y);	
	//-- Right Join
	agk::SetSpritePosition(_arrId[4], pos._x + joinH , pos._y);	
	//-- Bottom Left
	agk::SetSpritePosition(_arrId[5], pos._x - sprWidth, pos._y + joinV);	
	//-- Bottom Join
	agk::SetSpritePosition(_arrId[6], pos._x, pos._y + joinV);	
	//-- Bottom Right
	agk::SetSpritePosition(_arrId[7], pos._x + joinH, pos._y + joinV);	
	//-- Back
	agk::SetSpritePosition(_arrId[8], pos._x, pos._y);

	//-- Top Left
	//-- Top Join
	agk::SetSpriteSize(_arrId[1], joinH, sprHeight);
		//-- Facia
		//agk::SetSpriteSize(_arrId[11], joinH, sprHeight);

	//-- Top Right
	//-- Left Join
	agk::SetSpriteSize(_arrId[3], sprWidth, joinV);
	//-- Right Join
	agk::SetSpriteSize(_arrId[4], sprWidth, joinV);
	//-- Bottom Left
	//-- Bottom Join
	agk::SetSpriteSize(_arrId[6], joinH, sprHeight);
	//-- Top Right	
	//-- Back
	agk::SetSpriteSize(_arrId[8], joinH, joinV);

	//-- UVs
	float u = sprWidth / joinH;
	float v = sprHeight / joinV;
	//-- Joins
	agk::SetSpriteUVScale(_arrId[1], u, 1.0f);
	agk::SetSpriteUVScale(_arrId[3], 1.0f, v);
	agk::SetSpriteUVScale(_arrId[4], 1.0f, v);
	agk::SetSpriteUVScale(_arrId[6], u, 1.0f);
	//-- Back
	agk::SetSpriteUVScale(_arrId[8], u, v);
		
	//int depth = getDepth();
	//-- Depth
	for(unsigned int i = 0; i < 9; i++)
	{
		agk::SetSpriteDepth(_arrId[i], getDepth());//_depth);
	}
	//-- facia
	//for(unsigned int i = 9; i < 12; i++)
	//{
	//	agk::SetSpriteDepth(_arrId[i], getDepth() - 1);//_depth - 10);
	//}
}







void Frame::setVisible(int visible)
{
	for(unsigned int i = 0; i < 9; i++)  //-- was 12
	{
		agk::SetSpriteVisible(_arrId[i], visible);//_depth - 10);
	}
	Entity2::setVisible(visible);
}

void Frame::setColour(int r, int g, int b, int a)
{
	for(unsigned int i = 0; i < 9; i++)  //-- was 12
	{
		agk::SetSpriteColor(_arrId[i], r, g, b, a);//_depth - 10);
	}
}


ele::Vec2 Frame::getCornerDimRel()
{
	return _relCornerSize;
}



void Frame::debugDrawLine(const Line2 &line)
{
	Line2 lineLoc = line;
	lineLoc._src = line._src * _screenDim;
	lineLoc._dst = line._dst * _screenDim;
	agk::DrawLine(lineLoc._src._x, lineLoc._src._y, lineLoc._dst._x, lineLoc._dst._y, 0, 0, 0);
}

#endif

Some useful things to think about:

You may want to separate how the images are handled, I use a Skin class which holds all the images, my Frame class has a SetSkin() command which changes the look of the Frame.

You should think about defining different edges(borders), there is an outside border which is used when the Frame is placed inside another Frame, but there is also an inside border which is used when putting things inside that frame. Then you may want to have a 'hit' border for detecting touches etc, this may not always correspond with the other borders for various reasons.

You may want to have a DebugDraw() command which draws all the various borders in different colours, it helps when putting ui's together and things don't seem to be working like they should, it allows you to see exactly what is going on.

If you are using tier 2 you can try my ui system if you like? Let me know if you need any more help.

Back to top

Profile PM Email

BatVink

Moderator

21

Years of Service

User Offline

Joined: 4th Apr 2003

Location: Gods own County, UK

Posted: 20th Jun 2014 15:20

Link

What Matty H and Blendman say.

I didn't read the details, but you can essentially provide one image and split it up into 9 subimages. I use a textfile to describe how to cut the image up. Then, you can be more creative and don't have to be symmetrical.

For boxes that only scale one way you could/should use 3 images. The result is much neater.

ten-net consulting limited

Back to top

Profile PM Email

Phaelax

DBPro Master

21

Years of Service

User Offline

Joined: 16th Apr 2003

Location: Metropia

Posted: 21st Jun 2014 01:43

Link

Just use images and scale the inner part of the box. That's what I did for my iOS interface.

http://zimnox.com

Back to top

Profile PM Email Website

easter bunny

12

Years of Service

User Offline

Joined: 20th Nov 2012

Playing: Dota 2

Posted: 24th Jun 2014 13:09

Link

Seems like the general consensus is using 9 images, but wouldn't Van B's original suggestion of using memblocks be better?

I spent a while getting an algorithm sorted out, but here you go, it's finished!

main.agc

+ Code Snippet

SetVirtualresolution(100,150)
SetOrientationAllowed(1,1,0,0)

#include "API.agc"

foo=createBoxImage(1000,500,20)
asdf=CreateSprite(foo)

SetSpritePosition(asdf,0,0)

imagesize=3 //Increase for better qualitry/lower framerate

do
    DeleteImage(foo)
    x#=GetPointerX()
    y#=GetPointerY()
    if x#<20 then x#=20
    if y#<20 then y#=20
    if x#>90 then x#=90
    if y#>90 then y#=90
    foo=createBoxImage(x#*imagesize,y#*imagesize,20)
    SetImageMagFilter( foo,0 )
    SetSpriteImage(asdf,foo)
    SetSpriteSize(asdf,x#,y#)

    sync()
loop


end

API.agc

function dist(a as float,b as float,c as float,d as float)
    e as float
    e = sqrt((a - c)^2 + ((b-d))^2)
endfunction e

function createBoxImage(width, height, radius as float) //radius in pixels
    size = width*height*4 + 12
    mem = createMemblock(size)

setMemblockInt(mem,0,width)
    setMemblockInt(mem,4,height)
    setMemblockInt(mem,8,32)

for ty=0 to height-1
        for tx=0 to width-1
            ty#=ty
            tx#=tx
            pixelIsInCorner = 0

if tx#<radius //Left half of the screen
                if ty#<radius //top left half
                    if dist(tx#,ty#,radius,radius)>radius then pixelIsInCorner=1
                elseif ty#>(height-radius) //Bottom Left half
                    if dist(tx#,ty#,radius,height-radius)>radius then pixelIsInCorner=1
                endif
            elseif tx#>(width-radius)  //Right half of the screen
                if ty#<radius //Top Right
                    if dist(tx#,ty#,width-radius,radius)>radius then pixelIsInCorner=1
                elseif ty#>(height-radius) //Bottom Right
                    if dist(tx#,ty#,width-radius,height-radius)>radius then pixelIsInCorner=1
                endif
            endif

`if dist(tx#,ty#,width/2,height/2)<radius then pixelIsInCorner=1

d = 12 + (ty*width + tx)*4

select pixelIsInCorner
                case 1
                    SetMemblockByte(mem,d,255) //RGBA 255,255,255,0
                    SetMemblockByte(mem,d+1,255)
                    SetMemblockByte(mem,d+2,255)
                    SetMemblockByte(mem,d+3,0)
                endcase
                case 0
                    SetMemblockByte(mem,d,255) //RGBA 255,255,255,255
                    SetMemblockByte(mem,d+1,255)
                    SetMemblockByte(mem,d+2,255)
                    SetMemblockByte(mem,d+3,255)
                endcase
            endselect
        next
    next

i = createImageFromMemblock(mem)
    deleteMemblock(mem)
endfunction i

+ Code Snippet

function dist(a as float,b as float,c as float,d as float)
    e as float
    e = sqrt((a - c)^2 + ((b-d))^2)
endfunction e


function createBoxImage(width, height, radius as float) //radius in pixels
    size = width*height*4 + 12
    mem = createMemblock(size)

    setMemblockInt(mem,0,width)
    setMemblockInt(mem,4,height)
    setMemblockInt(mem,8,32)



    for ty=0 to height-1
        for tx=0 to width-1
            ty#=ty
            tx#=tx
            pixelIsInCorner = 0

            if tx#<radius //Left half of the screen
                if ty#<radius //top left half
                    if dist(tx#,ty#,radius,radius)>radius then pixelIsInCorner=1
                elseif ty#>(height-radius) //Bottom Left half
                    if dist(tx#,ty#,radius,height-radius)>radius then pixelIsInCorner=1
                endif
            elseif tx#>(width-radius)  //Right half of the screen
                if ty#<radius //Top Right
                    if dist(tx#,ty#,width-radius,radius)>radius then pixelIsInCorner=1
                elseif ty#>(height-radius) //Bottom Right
                    if dist(tx#,ty#,width-radius,height-radius)>radius then pixelIsInCorner=1
                endif
            endif

            `if dist(tx#,ty#,width/2,height/2)<radius then pixelIsInCorner=1

            d = 12 + (ty*width + tx)*4

            select pixelIsInCorner
                case 1
                    SetMemblockByte(mem,d,255) //RGBA 255,255,255,0
                    SetMemblockByte(mem,d+1,255)
                    SetMemblockByte(mem,d+2,255)
                    SetMemblockByte(mem,d+3,0)
                endcase
                case 0
                    SetMemblockByte(mem,d,255) //RGBA 255,255,255,255
                    SetMemblockByte(mem,d+1,255)
                    SetMemblockByte(mem,d+2,255)
                    SetMemblockByte(mem,d+3,255)
                endcase
            endselect
        next
    next

    i = createImageFromMemblock(mem)
    deleteMemblock(mem)
endfunction i

Audacia Games - Latest WIP - AUTOMAYTE 2.1, AppGameKit one click deploy to Android
"When you've finished 90% of your game, you only have 90% left"

Back to top

Profile PM Email

baxslash

Valued Member

Bronze Codemaster

17

Years of Service

User Offline

Joined: 26th Dec 2006

Location: Duffield

Posted: 24th Jun 2014 15:25

Link

Why use 9 images when you can use 1 (see attached example)?

Attachments

Login to view attachments

Back to top

Profile PM Email

easter bunny

12

Years of Service

User Offline

Joined: 20th Nov 2012

Playing: Dota 2

Posted: 25th Jun 2014 04:33 Edited at: 25th Jun 2014 04:34

Link

Why use 1 image when you can just use 0? [See my previous post]

It'd be easy enough to modify my example to use a real image, use antialiasing, speed it up (it's really really slow atm), or even use tiled images (for keeping an aspect ratio)

Audacia Games - Latest WIP - AUTOMAYTE 2.1, AppGameKit one click deploy to Android
"When you've finished 90% of your game, you only have 90% left"

Back to top

Profile PM Email

baxslash

Valued Member

Bronze Codemaster

17

Years of Service

User Offline

Joined: 26th Dec 2006

Location: Duffield

Posted: 25th Jun 2014 10:27 Edited at: 25th Jun 2014 10:52

Link

I wasn't saying your way was wrong or not good but I do think my way is easier to edit for your own uses. You could replace my 1 image with any sized corner image of any style easily and still get the same effect as the 9 image method.

Using no images has a clear memory advantage but in my book an easy to adapt and re-use method is normally more useful.

Here are a couple of examples using my method after about 15 minutes borrowing and editing some images from the net:

EDIT: Also you should bear in mind that although your method although saves on the download size it will have more of an impact on runtime memory.

Attachments

Login to view attachments

Back to top

Profile PM Email

Blendman

10

Years of Service

User Offline

Joined: 17th Feb 2014

Location: Arkeos

Posted: 25th Jun 2014 13:09 Edited at: 25th Jun 2014 13:15

Link

@baxslash : thank you a lot for your code and example. I agree with you, it's a very interesting method !

It's easy to create a "menu editor", to create some menu with your method and save the menu in a txt file (or in the code) to create all of sort of menu/ui.

Thank you a lot !

http://www.dracaena-studio.com

Back to top

Profile PM Website

baxslash

Valued Member

Bronze Codemaster

17

Years of Service

User Offline

Joined: 26th Dec 2006

Location: Duffield

Posted: 25th Jun 2014 18:17

Link

Any time

Back to top

Profile PM Email

Sorry your browser is not supported!

AppGameKit Classic Chat / UI Design - boxes with rounded corners

Attachments

Attachments

Attachments