User defined UI An ugly but working start.

[LemonWizard]

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)

PlayBASIC Code: [Select]

; 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
   
   

Login required to view complete source code

[LemonWizard]

So does anyone have any comments or advice to do with how I've coded this?

[LemonWizard]

In game simple menu system testing. Any comments, suggestions, or tips please let me know!!!

PlayBASIC Code: [Select]

; 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"

[LemonWizard]

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

PlayBASIC Code: [Select]

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

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..

PlayBASIC Code: [Select]

;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.

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.




The second one showing the menu for my game::