8 replies to this topic

[needsfoodbadly]

Version: GM:HTML5, Registered (compatible with GM8)

I've done some reading but I still seem to be missing something.

I'm working on a game with a screen resolution of 640x480. Here's what I want.



The game levels (rooms) are 640x480. I want to show just 480x360 in the play area. I want the rest of the screen to be dedicated
to player stats/score on the right and inventory on the bottom.

What's happening is instead of having the play area and the rest of the screen open, it's stretching the 480x360 play area to fill the whole 640x480 window. I know it's something wrong with the view/port settings but I'm not sure exactly how to set it up correctly.

Here are my settings:

Room Settings:
Width: 640
Height: 480
Speed: 30
Persisent: Off

Views:
Enable the use of Views: On
Clear Background with Window Color: On
View 0: Selected
Visible when room starts: On

View in Room: x: 0, y: 0, W: 480, H: 360
Port on Screen: x: 0, y: 0, W: 640, H: 480

Object Following: obj_player
Hbor: 0, Vbor: 0, Hsp: -1, Vsp: -1

[TheouAegis]

You set the size of the play area (that blue part) with view_xview/view_yview/view_wview/view_hview. To keep it that exact size, set its width and height in the port to be the same. Repeat for the UI, but set the xport and yport so they're beyond the play area's views.

A better alternative would be to set the play area so that the player would always be in the top left of the view (you'll need to code this) and then just draw the UI using draw commands.

[needsfoodbadly]

You set the size of the play area (that blue part) with view_xview/view_yview/view_wview/view_hview. To keep it that exact size, set its width and height in the port to be the same. Repeat for the UI, but set the xport and yport so they're beyond the play area's views.

A better alternative would be to set the play area so that the player would always be in the top left of the view (you'll need to code this) and then just draw the UI using draw commands.

I get the thing about having your hud objects move with the game screen but I'm having problems getting the screen setup how I want it.

I tried setting the game area at 0,0 - 460, 360, then creating separate views that covered the bottom and right area, but that resulted in an entirely black screen.

I tried playing around with the port values and ended up with the play area in the bottom right and a left side bar and a top bar area which is the opposite of what I wanted.

Do I need to use multiple views or can I do this with a single view, and perhaps you or someone could further elaborate/simplify it?

I've read this:
http://soulred12.wordpress.com/2008/06/24/soulhow-views/

and some stuff on the learnbyluke website as well but it doesn't seem to address my question.

I'm trying to make a roguelike-like type of game which is why I need a dedicated area at the bottom for messages and other info and then a status bar on the right side of the screen for player info. I need the play area dedicated to just the well, play area. I'm not trying to draw a status bar/hud on TOP of the play area but SEPARATE from it.

[TheouAegis]

Some things to remember when you mess around with views:

view_xview is the position of the view's upper-left corner relative to the room along the x-axis
view_yview is the position of the view's upper-left corner relative to the room along the y-axis
view_wview is how wide the view is spanning the room
view_hview is how high the view is spanning the room

view_xport is the view's upper-left corner relative to the window along the x-axis
view_yport is the view's upper-left corner relative to the window along the y-axis
view_wport is how wide the view is spanning the window; the window is stretched to fit this
view_hport is how high the view is spanning the window; the window is stretched to fit this


Unless you plan on having the play area's view be offset by (view_wview/2, view_hview/2) from the player and then using draw commands to simply draw the UI relative to that view, you will need to use at least two views. You can set view0 for the UI, using that view to also size the window, then use view1 for the play area. You would check if view_current=0 (or however that function works, I haven't used it yet) and then draw the UI where you want it within view0.

You cannot draw in the black area that you saw. If the window is larger than the view and the view isn't scaled to fill it, it makes that black border.

[needsfoodbadly]

@TheouAegis:

Okay, thanks. I think that makes a little more sense.

I figured I might need to reorder the views.

I'll give it another whirl tomorrow. I'm gonna knock off for the night.

[needsfoodbadly]

Okay, so after trying the suggestion in your last post, I ended up with the screen orientated the way I wanted it with the play area in the upper left, and empty black area to the right and bottom but when I moved my character to the far right end of the play port or the bottom end of the play port/area I ended up with some funky mirroring stuff going on.

It's like, comically tragic. :/

*And yes, this is a Mario themed, Roguelike (dungeon crawler)

The mario you see in the middle is the actual player. The bottom one is the glitch/mirror. All the stuff on the right side of the screen and bottom is part of the view port glitch. That box you can make out, starting from the top left, is the play port as visualized in my first post.

Edited by needsfoodbadly, 12 March 2012 - 09:02 AM.

[FoxInABox]

your room view still need to be the size of the max view, but you should use a code to position the view after how you want it:

// tells where the center position of the view should be
cx = player_obj.x + 16 - 240; // 16 is half the player sprite width, to center the view
cy = player_obj.y + 16 - 180; // minus half the player view area

// theese two next ifs moves the view with a boundary, in this case 32 from center
// if you wanted him to stay in center at all, then just replace the above cx
// and cy with view_xview and view_yview and delete the below ifs

if abs(view_xview-cx)>32 // if you have moved 32 pixles away from center position
  view_xview += ( abs(view_xview-cx)-32 ) * sign(view_xview-cx); // move the view the minumum for it to be withinn that area (unsure if it should be -= instead of +=)

if abs(view_yview-cy)>32 // if you have moved 32 pixles away from center position
  view_yview += ( abs(view_yview-cy)-32 ) * sign(view_xview-cx); // move the view the minumum for it to be withinn that area


view_xview = max(0,min(room_width+160,view_xview)) // the view limit will be 160 wider so it will draw the inventory and stats outside the room, while all the room contence is visible in in the wanted view area
view_yview = max(0,min(room_height+80,view_yview)) // and 80 for the inventory

and then you just draw the stats and inventory at their position from the view:
stats ( view_xview+480, view_yview )
inv ( view_xview, view_yview+360 )

this is so that you only need 1 view .. I do no recomand using multible unless needed, since everything would need to be drawn over again

EDIT: fixed up some of my confusing explainations ^^;;

Edited by FoxInABox, 12 March 2012 - 10:40 AM.

[needsfoodbadly]

Thanks, I'll start the whole view thing from scratch again and try that stuff. If I can't get it right, I might post a source file tomorrow when I get a chance.

Whenever I manage to get it right, I'll post an example file in case anyone else has the same issue.

Edited by needsfoodbadly, 12 March 2012 - 09:08 AM.

[needsfoodbadly]

I did think of an (in)elegant solution which is to increase window to 800x600, (the level maps are 640x480 in size) and simply display the whole level area on screen, and add ui elements to outside edges. Of course, I still want to do this the right way but I'm trying to finish this by Saturday for a 7 day game comp. There are no prizes or places btw, it's just for funsies.

Edited by needsfoodbadly, 13 March 2012 - 02:35 AM.