SOLVED: A circle-shaped GUI that can reveal a hidden image underneath?

Started by silverwolfpet, Fri 06/05/2016 10:47:23

Previous topic - Next topic

silverwolfpet

Hello,

Yes, I've read the manual. Twice.
I've tried different scripts/modules. Nothing helped.

Here's what I want to do:

- a circle shaped GUI
- it has to follow the mouse cursor (or even better BE the mouse cursor)
- when hovered over the background, it must reveal a "hidden" image

Allow me to offer a little bit more details on the last part. :) 
I'm thinking of using two identical backgrounds (let's say a simple wall image) - BG01 and BG02
BG01 has a message written in red over it.
BG02 should go "over" BG01, covering it, making it look like there's only one image on your screen.


The GUI is hovered over BG02 and, only in the circle area, it shows what is underneath (respectively BG01).


I can make the GUI, I can create a room (BG01) and perhaps have BG02 as a separate GUI spawned over it.
I just dunno how to make the circle-shaped GUI "cut through" BG02.

Ideally, it would also be scrollable (left-right) so the images used can be bigger than the screen size.
The game I'm making is 320x200.

Could you please help me and tell me where to begin? Or perhaps I'm tackling this the wrong way?
I'm not exaaaactly a beginner, but this seems like something simple and I'm missing the obvious here. ??? Any advice is welcome and I thank you for your time!

Danvzare

Hmm, I'm fairly sure there was an old plugin that did something like this. :-\
Unfortunately, that's the only help I can give. Someone else will probably be more helpful, sorry.

Slasher

Hi,

I assume you have made your gui that will act as the circle?

Idea:
Make the Circle guis' x y as that of the mouse and then use mouse over hotspot.

Could try this example (change where needed):
Code: ags

//Rep Exe Always   in Global if used in more than one room.
{
if (gCircle.Visible){
gCircle.X =mouse.x; // adjust so that the circle sits nicely on the cursor
gCircle.Y =mouse.y;  // adjust so that the circle sits nicely on the cursor
}
}

// Rep Exe in Room Code
{  
 if (Hotspot.GetAtScreenXY(mouse.x, mouse.y) ==hotspot[1] && gCircle.Visible){  //gCircle over hotspot to show hidden image
 // show or do this etc etc
}
}


Let us know how you get on....

Joe

To achieve this result:



You just need the following:

1x GUI with transparent background and border. (gGui1 in the code below)
1x sprite to store BG02 (sprite number 1 in the code below)
1x room with BG01 as background image

and

This script for the room:

Code: ags

// room script file

DrawingSurface* ds;
DynamicSprite* spr;

function room_RepExec()
{
  spr = DynamicSprite.CreateFromExistingSprite(1); //sprite number for the BG02 image.
  ds = spr.GetDrawingSurface();
  ds.DrawingColor = 0;
  ds.DrawCircle(mouse.x, mouse.y, 33); //lines 10 and 11 are only for drawing the circle outline
  ds.DrawingColor = COLOR_TRANSPARENT;
  ds.DrawCircle(mouse.x, mouse.y, 30);
  ds.Release();
  gGui1.BackgroundGraphic = spr.Graphic;
}
Copinstar © Oficial Site

silverwolfpet

Woah! Thanks for the help, guys!

@slasher - I'm not entirely sure I understand how that would achieve the result I am looking for, because it's not just one message that is hidden. I need multiple things to be visible and I probably shouldn't make 100 hotspots for 100 hidden messages. :-D Still, thank you for your answer! I used part of your code!

@Joe - That is precisely what I'm looking for. I followed your instructions to the T and I cannot seem to make the gGui1 with a transparent border and background (unless I use transparency at 100, if that is what you meant). Otherwise it just shows up as white.

I used Slasher's suggestion for making the Circle GUI follow the mouse cursor, but it won't do that. It just spawns in the top-left corner and stays there. Hm, the code seems fine, I triple checked everything. Maybe I'm missing something? I named everything properly, I checked the sprite numbers...

I use 32-bit colors.

The problems that seem obvious at first glance would be that the GUI is not following the cursor and that the BG02 sprite is not being spawned.

Joe

Quote from: silverwolfpet on Fri 06/05/2016 19:46:48
Woah! Thanks for the help, guys!

@slasher - I'm not entirely sure I understand how that would achieve the result I am looking for, because it's not just one message that is hidden. I need multiple things to be visible and I probably shouldn't make 100 hotspots for 100 hidden messages. :-D Still, thank you for your answer! I used part of your code!

@Joe - That is precisely what I'm looking for. I followed your instructions to the T and I cannot seem to make the gGui1 with a transparent border and background (unless I use transparency at 100, if that is what you meant). Otherwise it just shows up as white.

I used Slasher's suggestion for making the Circle GUI follow the mouse cursor, but it won't do that. It just spawns in the top-left corner and stays there. Hm, the code seems fine, I triple checked everything. Maybe I'm missing something? I named everything properly, I checked the sprite numbers...

I use 32-bit colors.

The problems that seem obvious at first glance would be that the GUI is not following the cursor and that the BG02 sprite is not being spawned.


The GUI doesn't have to follow the cursor, actually it must be fixed in (0,0) and also should have the same width and height as current room. To make the GUI transparent try to set border and background color to 0. Good luck ;)
Copinstar © Oficial Site

silverwolfpet

AHA!

Yes yes, now it seems to work! YES! Thank you!

Two issues appeared though:

1. The characters are behind the GUI, so we cannot see them. Do I have to set a different Zorder for the characters?
2. The BG02 does not scroll with the rest of the screen, it stays in place.

Snarky

You can't have characters in front of the GUI, so if you need to see the characters, you can't cover the whole screen with a GUI. And GUIs don't scroll (they're screen-relative, not room-relative), so to make it fit with scrolling would be more complicated.

The simplest solution is probably to use an object instead of a GUI, and otherwise do everything the same.

Joe

Well Snarky overtook me, I was gonna say 'use objects' aswell. But if we are gonna stop using GUIs, why not get rid of everything? So:

Just delete that GUI and do the following:
- Import another sprite for the room background (sprite 2 in the code below) (actually you should remove the room background too).

- Use this modified code:
Code: ags

// room script file

DrawingSurface* ds;
DynamicSprite* spr;

function room_RepExec()
{
  spr = DynamicSprite.CreateFromExistingSprite(1); //sprite number for the base wall
  ds = spr.GetDrawingSurface();
  ds.DrawingColor = 0;
  ds.DrawCircle(mouse.x, mouse.y, 33); //lines 10 and 11 are only for drawing the circle outline
  ds.DrawingColor = COLOR_TRANSPARENT;
  ds.DrawCircle(mouse.x, mouse.y, 30); //lines 12 ans 13 are for making the hole.
  ds.Release();
  
  ds = Room.GetDrawingSurfaceForBackground();
  ds.DrawImage(0, 0, 2); //draw the "hidden" wall to the background
  ds.DrawImage(0, 0, spr.Graphic); //draw the wall with the hole
  ds.Release();
}


Not sure if this would work fine with scrolling anyway its easily solvable.
Copinstar © Oficial Site

silverwolfpet

Using an object did the trick exceptionally well!

Looks good, moves good... now the ONLY issue remaining is that the circle remains behind when I move the character to the right.
It's like it is not updating its position via the mouse cursor.

So if I stay in the first part of the room, it's perfect. Once I move and start scrolling, it looks good but the circle stays behind and won't move past a point.

EDIT: Ok, gonna try the new code as well.

EDIT 2: Tried it and I'm getting some serious ghosting on the circle. The Object method seemed to be cleaner, hmm...

Maybe I'll just stick to non-scrolling rooms and that's that ^^'

Joe

Anyway just try playing with GetViewportX() GetViewportY() to correct those scrolling issues.

EDIT:
e.g.:

Code: ags
ds.DrawCircle(mouse.x + GetViewportX(), mouse.y + GetViewportY(), 33);
Copinstar © Oficial Site

silverwolfpet

You are a genius, thank you!

When this game will be finished, I'll write your name in the credits!

Joe

Copinstar © Oficial Site

SMF spam blocked by CleanTalk