So throat infection/flu ish symptoms aside.. (ick!)
Ladies and gentlemens it's time to introduce to you..
The results of my late night coding session. (and sore eyes god)
Basically what we have here is the first steps towards a UI system I'm designing because I'm just too tired of waiting to feel better to do coding again.
And I'm also bored of trying to code things which I don't have the resources for (Sound, art, music) etc.
To test the code you can comment out some stuff but this is basically a sort of object oriented style approach to creating a windowing system though kinda in efficient. I coded my own rgb picker selector as well.
I wanted to make something useful that people would care about (Yes I know there's flexiGui or w/e it's called) but that really doesn't help me learn how to make my own. So.. here we are.
I wil get a screenshot up shortly.
If you want it to run you have to paste the code into a new project, create a new folder, save it in that folder and then create an image and call it "test.bmp" and put it in that same folder.
The function I defined has an auto image scaling feature.
Uhm.. the maths a bit tricky to follow but basically it takes the window size an the window frame size and the windows x1 , y1 coordinates, and draws it using those base values (and frame width/height)
it's adaptable and can be built on. Please don't steal this code though I'm actually going to optimise it all and develop it further
(I EVEN CODED IN A LITTLE X BUTTON AT THE TOP OF THE OTHER WINDOW)
and yes the RGB slider actually works (yay!!) I know in the learning version you can access the windows color picker but I don't have pbFX yet (I don't know why? )
Anyhow.. if you can follow those steps you can test it (or just change the call to draw_window(my_win, my_image) to draw_window(my_win) and it should work without the scaling (Or the image)
(http://underwaredesign.com/screens/PlayBasic/Forums/LemonWizard/ru4fw5.jpg)
[pbcode]
; PROJECT : UI
; AUTHOR : Kasumi
; CREATED : 10/15/2011
; EDITED : 10/15/2011
; ---------------------------------------------------------------------
openscreen 1024, 768, 32, 1
my_img=loadnewfximage("test.bmp")
type window
border_color
window_color
window_framewidth
window_frameheight
window_x1
window_y1
window_width
window_height
endtype
dim my_win as window
my_win.border_color=rgb(220,220, 220)
my_win.window_color=rgb(50, 78, 100)
my_win.window_framewidth=15
my_win.window_frameheight=15
my_win.window_x1=400
my_win.window_y1=400
my_win.window_width=700
my_win.window_height=700
loadfont "arial", 1, 15, 1
setfont 1
do
ink rgb(0, 255, 0)
box 300, 300, 650, 650, 1
ink rgb(sliderx_red, sliderx_green, sliderx_blue)
box 320, 320, 630, 630, 1
ink rgb(50, 100, 112)
text 350, 350, "THIS IS GREEN BOLD ARIAL"
draw_slider_red(sliderx_red)
draw_slider_green(sliderx_green)
draw_slider_blue(sliderx_blue)
if mouseinbox(0, 75, 255, 100)
if leftmousebutton()
sliderx_red=mousex()
endif
endif
if mouseinbox(0, 175, 255, 200)
if leftmousebutton()
sliderx_green=mousex()
endif
endif
if mouseinbox(0, 275, 255, 300)
if leftmousebutton()
sliderx_blue=mousex()
endif
endif
draw_window_surface(my_win, my_img)
;drawimage my_img, 0, 0, 0
if upkey()
my_win.window_width=my_win.window_width+1
endif
if downkey()
my_win.window_width=my_win.window_width-1
endif
sync
cls rgb(0,355,0)
loop
function draw_slider_red(sliderx)
ink rgb(50, 120, 120)
text 400, 60, "Red value: "+str$(sliderx)
box 0, 75, 255, 100, 1
ink rgb(200, 130, 130)
box sliderx, 80, sliderx+10, 90, 1
endfunction
function draw_slider_green(sliderx)
ink rgb(50, 120, 120)
text 400, 160, "Green value: "+str$(sliderx)
box 0, 175, 255, 200, 1
ink rgb(200, 130, 130)
box sliderx, 180, sliderx+10, 190, 1
endfunction
function draw_slider_blue(sliderx)
ink rgb(50, 120, 120)
text 400, 260, "Blue value: "+str$(sliderx)
box 0, 275, 255, 300, 1
ink rgb(200, 130, 130)
box sliderx, 280, sliderx+10, 290, 1
endfunction
function draw_window(my_win)
b_color=my_win.border_color
w_color=my_win.window_color
fw=my_win.window_framewidth
fh=my_win.window_frameheight
x1=my_win.window_x1
y1=my_win.window_y1
width=my_win.window_width
height=my_win.window_height
border_x1=x1
border_y1=y1
border_x2=width
border_y2=height
w_x1=border_x1+fw
w_x2=border_x2-fw
w_y1=border_y1+fh
w_y2=border_y2-fh
print w_x1
print w_y1
print w_x2
print w_y2
ink rgb(255, 255, 255)
box border_x1, border_y1, border_x2, border_y2, 1
ink rgb(0,0,0)
box w_x1, w_y1, w_x2, w_y2, 1
//box 110, 110, 190, 190, 1
endfunction
function draw_custom_window(border_x1, border_y1, border_x2, border_y2, w_x1, w_y1, w_x2, w_y2)
endfunction
function draw_window_surface(my_win, w_image)
b_color=my_win.border_color
w_color=my_win.window_color
fw=my_win.window_framewidth
fh=my_win.window_frameheight
x1=my_win.window_x1
y1=my_win.window_y1
width=my_win.window_width
height=my_win.window_height
border_x1=x1
border_y1=y1
border_x2=width
border_y2=height
w_x1=border_x1+fw
w_x2=border_x2-fw
w_y1=border_y1+fh
w_y2=border_y2-fh
print w_x1
print w_y1
print w_x2
print w_y2
ink b_color
box border_x1, border_y1, border_x2, border_y2, 1
ink w_color
box w_x1, w_y1, w_x2, w_y2, 1
w=getimagewidth(w_image)
h=getimageheight(w_image)
surface_width=w_x2-w_x1
surface_height=w_y2-w_y1
if surface_width<>w
scalew=true
endif
if surface_height<>h
scaleh=true
endif
if scaleh=true
if scalew=true
scaleimage w_image, surface_width, surface_height, 1
endif
endif
drawimage w_image, w_x1, w_y1, 0
//box 110, 110, 190, 190, 1
scaleh=false
scalew=false
draw_x_button(border_x2, border_y1)
endfunction
function draw_x_button(x, y)
ink rgb(200, 200, 200)
box x, y, x-15, y+15
ink rgb(0, 0, 0)
text x-10, y, "X"
endfunction
[/pbcode]
So does anyone have any comments or advice to do with how I've coded this?
In game simple menu system testing. Any comments, suggestions, or tips please let me know!!!
[pbcode]
; PROJECT : Project1
; AUTHOR : Kasumi
; CREATED : 10/15/2011
; ---------------------------------------------------------------------
SETFPS 60
;set up color vars
grey=rgb(220, 220, 220)
white=rgb(255,255, 255)
red=rgb(255, 0, 0)
blue=rgb(0,0,255)
black=rgb(0,0,0)
lgrey=rgb(230, 230, 210)
current_option=1
dim option_strings$(20)
for temp=1 to 20
option_strings$(temp)=readdata$()
next temp
inptimer=timer()+50
do
for temp=1 to 20
ink lgrey
if current_option=temp then ink grey
box 0, (temp-1)*20, 120, temp*20
ink black
text 20, (temp-1)*20, option_strings$(temp)
next temp
sync
cls white
if timer()>inptimer
move=true
endif
if move=true
if downkey()
current_option=current_option+1
inptimer=timer()+50
endif
if upkey()
current_option=current_option-1
inptimer=timer()+50
endif
endif
move=false
loop
sync
waitkey
waitnokey
data "Yes", "No", "Maybe", "I don't know", "WOO", "Run", "Play", "Save", "Timer"
data "again", "those", "Buy", "Sell", "Alert", "Go", "stop", "yes", "...", "more", "20"
[/pbcode]
So AN UPDATE. My main computer crashed so I'm using an old 1.19 GHZ pc.
W/e
Here's an update.
I got one of my games wrapped inside the windowing system I'm using.
It was kind of tough but I did it.
I have W_X and W_Y set to all my ifmouseinbox() commands like this
By the way.. if I incorperate the W_X and W_Y variables into a function that checks the mousexy for me, then I can automatically calculate the W_X and W_Y within any mouseinbox commands.. and not have to code it into future projects directly.
IE
[pbcode]
function mouseat(w_x, w_y, x1, y1, x2, y2)
if mouseinbox(x1+w_x, y1+w_y, x2+w_x, y2+w_y)
if leftmousebutton()
clicked=true
else
clicked=false
endif
endif
endfunction clicked
[/pbcode]
This is sort of a working example of how the code would work together. I'm not really willing to give away my plans for this yet since it might turn into something huge..
It's already over 1000 lines long (that's because of the game plus the windowing code)
But most of the windowing code I previously posted has been integrated into said game and at this stage the game itself is still severely incomplete.. but it will be online playable and I will have an embedded chat system and everything, as well as tradeable item system online and a somewhat (hopefully) decent online economy and battle system -.-" (HOPEFULLY? )
and yes in playbasic..
[pbcode]
;only accounting for 15 pixels versus the extra *2 (30) Plus the 'window' starting coordinate
wx=my_win(1).window_x1+my_win(1).window_framewidth
wy=my_win(1).window_y1+my_win(1).window_frameheight
If mouseinbox(200+wx, 200+wy, 419+wx, 349+wy) ;this is how I converted my "screen" coordinates which I used when I first made the game to my window coordinates.
[/pbcode]
here's like.. I guess a look at what it looks like inside this windowing system >.<
By the way, I've modified a few of the windowing functions in my system so that you can set a scale flag.
What the scale flag does is it checks the sizing of the image held in the window, versus the window's actual size and if the image is larger than the window it down sizes the image to a perfect fit.
The smaller version of what you see in the window was created by copying the image, and then using the scaling flag of the draw_window_surface command in my functions list.
(http://underwaredesign.com/screens/PlayBasic/Forums/LemonWizard/2565kzb.png)
The second one showing the menu for my game::
(http://underwaredesign.com/screens/PlayBasic/Forums/LemonWizard/ezq4hi.jpg)