PureBasic Forums - English

Posted: **Fri Sep 28, 2012 6:07 pm**

Hey,
I'm writing a little 2D game. Yes, 2D, but I want to use Window3D for menus. Now my problem is, that (if i'm not mistaken) you have to first render the world and then display sprites. Every time I tried to do it the other way round, I failed (There's no 3D world, i only need engine3D for the windows). Soooo is there any possibility to render that 3D window AFTER the sprites are displayed? Or is that one of PureBasic's limits?
I hope someone can tell me more about this. Thanks in advance

Posted: **Fri Sep 28, 2012 8:19 pm**

The window3D stuff has not really much todo with PureBasic. It is called CEGUI.
PureBasic just has implemented the OGRE3D plugin for CEGUI. So as long as
fred doesn't write a CEGUI-Renderer for PureBasic itself, it is not really possible.

MFG PMV

Posted: **Fri Sep 28, 2012 8:24 pm**

A pity, a pity, a pity! The problem is, that I need a nice menu. But..displaying like 50 different sprites for a menu..meaning examining a cursor collision with one of the menu sprites..that's just too much work for just a graphical menu o.O There just MUST be an easier way...

Posted: **Fri Sep 28, 2012 9:15 pm**

Hi J@ckWhiteIII,

I do a lot of 2D stuff now with the CANVAS Gadget.

You have all the keyboard and mouse actions.
and you can draw directly on the CanvasGadget(),
even with 32 bits images RGBA color.
And you can use separated masks and images for Alpha channel
via the DrawMode() ... and so on.

Marc,

Posted: **Fri Sep 28, 2012 9:25 pm**

Hm...and how do you check collisions? I'm doing a labyrinth game. Do you think i could just put all the 15x20 (i mean the number of images) on the gadget? And another problem i have is, that i need a text that is kinda transparent, but also has the negative color of the stuff behind it...oh god there's so much stuff i need D:

Posted: **Fri Sep 28, 2012 10:32 pm**

Create CanvasGadget(0, 0, 0, 800, 600, )
Well, first I create a image with the needed width and height, CreateImage()
Then I draw all my text on that created image.
With DrawMode() you can select Alpha Image Mode and DrawAlphaImage()

So you can draw transparency text on your background image.

Code: Select all

;---------------------------------------------------------------------------------------------------
;- GLOBALS
;---------------------------------------------------------------------------------------------------
Global Game_Window_Event.i

Global MousePosX.w
Global MousePosY.w

Global GameTextWidth.w
Global GameTextHeight.w

Global GameText.s

Global GameTextFont.i = 4
Global GameBackgroundImage.i = 5
Global GameTextImage.i = 6

;---------------------------------------------------------------------------------------------------
;- LOAD FONTS
;---------------------------------------------------------------------------------------------------
	LoadFont(GameTextFont, "Arial", 48, #PB_Font_HighQuality)

;---------------------------------------------------------------------------------------------------
;- PRECREATE IMAGE
;---------------------------------------------------------------------------------------------------
	CreateImage(GameBackgroundImage, 800, 600, 32)
		StartDrawing(ImageOutput(GameBackgroundImage))
			DrawingMode(#PB_2DDrawing_Default)
			Box(0, 0, 800, 600, RGB(43, 144, 232))
			DrawingMode(#PB_2DDrawing_Transparent)
			DrawingFont(FontID(GameTextFont))
			DrawText(100, 100, "PVG Canvas Test", RGB(255, 255, 255))
		StopDrawing()

;---------------------------------------------------------------------------------------------------
	CreateImage(GameTextImage, 600, 100, 32)
		StartDrawing(ImageOutput(GameTextImage))
			DrawingFont(FontID(GameTextFont))
			GameText = "PVG Canvas Test"
			GameTextWidth = TextWidth(GameText) + 10
			GameTextHeight = TextHeight(GameText) + 10

			DrawingMode(#PB_2DDrawing_Default)
			Box(0, 0, GameTextWidth, GameTextHeight, RGB(0, 0, 0))

			DrawingMode(#PB_2DDrawing_Transparent)
			DrawText(5, 5, GameText, RGB(255, 255, 255))

;- FOR FULLY TRANSPARENT TEXT (CUT OUT) USE THIS
;			DrawingMode(#PB_2DDrawing_AlphaChannel)
;			DrawText(5, 5, GameText, RGBA(0, 0, 0, 0))

		StopDrawing()

;---------------------------------------------------------------------------------------------------
;- CREATE CANVAS GAMING WINDOW
;---------------------------------------------------------------------------------------------------
	If OpenWindow(0, 0, 0, 800, 600, "PVG - Canvas Game Test - v001", #PB_Window_ScreenCentered | #PB_Window_SystemMenu)
		CanvasGadget(1, 0, 0, 800, 600, #PB_Canvas_Keyboard)

;---------------------------------------------------------------------------------------------------
;- DO LOOP
;---------------------------------------------------------------------------------------------------
		Repeat
			Game_Window_Event = WindowEvent()
				Select Game_Window_Event
					Case #PB_Event_Gadget
						Select EventGadget()
							Case 1				; Canvas gadget
								Select EventType()
									Case #PB_EventType_LeftButtonDown
										If StartDrawing(ImageOutput(GameBackgroundImage))
											DrawingMode(#PB_2DDrawing_Default)
											DrawAlphaImage(ImageID(GameTextImage), MousePosX, MousePosY, 50)
											StopDrawing()
										EndIf

									Case #PB_EventType_MouseMove
										If StartDrawing(CanvasOutput(1))
											DrawingMode(#PB_2DDrawing_Default)
;											Box(0, 0, 800, 600, RGB(43, 144, 232))
											DrawImage(ImageID(GameBackgroundImage), 0, 0, 800, 600)

											MousePosX = GetGadgetAttribute(1, #PB_Canvas_MouseX)
											MousePosY = GetGadgetAttribute(1, #PB_Canvas_MouseY)
											DrawingMode(#PB_2DDrawing_AlphaBlend)
;											Circle(MousePosX, MousePosY, 10, RGB(100, 100, 100))
											DrawAlphaImage(ImageID(GameTextImage), MousePosX, MousePosY, 50)	;255)	;100)

											StopDrawing()
										EndIf
								EndSelect
						EndSelect
				EndSelect
		Until Game_Window_Event = #PB_Event_CloseWindow
	EndIf

;---------------------------------------------------------------------------------------------------
Einde:
	End

;---------------------------------------------------------------------------------------------------

- Move the mouse
- LeftMouse button Print on background

You can start with this part

Marc,

EDIT: Tested with WinXP and PB 4.61 Final

Posted: **Sat Sep 29, 2012 12:23 pm**

I really like your example and I think it is a good way to avoid using sprite commands. But what I noticed is, that the mouse movement are not really handeled well (Probably because the mouse coordinates are relatively relative

Now to my other question: Yeah I saw how you can display alpha images...But is it also possible to do that and change the colours...so that it's always the opposite? like the opposite of 203 is 255-203? because that's something i need to always make sure the text doesn't have similar colours to the stuff that's displayed behind the text...so, like a "negative" image.

Posted: **Sat Sep 29, 2012 5:15 pm**

J@ckWhiteIII wrote:I really like your example and I think it is a good way to avoid using sprite commands. But what I noticed is, that the mouse movement are not really handeled well (Probably because the mouse coordinates are relatively relative Now to my other question: Yeah I saw how you can display alpha images...But is it also possible to do that and change the colours...so that it's always the opposite? like the opposite of 203 is 255-203? because that's something i need to always make sure the text doesn't have similar colours to the stuff that's displayed behind the text...so, like a "negative" image.

That can be done with a custom filter callback.

Here's marc_256's code with a custom filter:

Code: Select all

;---------------------------------------------------------------------------------------------------
;- GLOBALS
;---------------------------------------------------------------------------------------------------
Global Game_Window_Event.i

Global MousePosX.w
Global MousePosY.w

Global GameTextWidth.w
Global GameTextHeight.w

Global GameText.s

Global GameTextFont.i = 4
Global GameBackgroundImage.i = 5
Global GameTextImage.i = 6

Global draw_alpha_level = 255 ;set this to desired level before drawing using the custom filter
Procedure XOR_Alpha_Callback(x, y, sourceColor, targetColor)
  Protected transparency.f = draw_alpha_level / 255
  Protected i_transparency.f = 1 - transparency
  ProcedureReturn (sourceColor ! targetColor) * transparency + targetColor * i_transparency
EndProcedure

;---------------------------------------------------------------------------------------------------
;- LOAD FONTS
;---------------------------------------------------------------------------------------------------
LoadFont(GameTextFont, "Arial", 48, #PB_Font_HighQuality)

;---------------------------------------------------------------------------------------------------
;- PRECREATE IMAGE
;---------------------------------------------------------------------------------------------------
CreateImage(GameBackgroundImage, 800, 600, 32)
StartDrawing(ImageOutput(GameBackgroundImage))
  DrawingMode(#PB_2DDrawing_Default)
  Box(0, 0, 800, 600, RGB(43, 144, 232))
  DrawingMode(#PB_2DDrawing_Transparent)
  DrawingFont(FontID(GameTextFont))
  DrawText(100, 100, "PVG Canvas Test", RGB(255, 255, 255))
StopDrawing()

;---------------------------------------------------------------------------------------------------
CreateImage(GameTextImage, 600, 100, 32)
StartDrawing(ImageOutput(GameTextImage))
  DrawingFont(FontID(GameTextFont))
  GameText = "PVG Canvas Test"
  GameTextWidth = TextWidth(GameText) + 10
  GameTextHeight = TextHeight(GameText) + 10
  
  DrawingMode(#PB_2DDrawing_Default)
  Box(0, 0, GameTextWidth, GameTextHeight, RGB(0, 0, 0))
  
  DrawingMode(#PB_2DDrawing_Transparent)
  DrawText(5, 5, GameText, RGB(255, 255, 255))
  
  ;- FOR FULLY TRANSPARENT TEXT (CUT OUT) USE THIS
  ;         DrawingMode(#PB_2DDrawing_AlphaChannel)
  ;         DrawText(5, 5, GameText, RGBA(0, 0, 0, 0))
  
StopDrawing()

;---------------------------------------------------------------------------------------------------
;- CREATE CANVAS GAMING WINDOW
;---------------------------------------------------------------------------------------------------
If OpenWindow(0, 0, 0, 800, 600, "PVG - Canvas Game Test - v001", #PB_Window_ScreenCentered | #PB_Window_SystemMenu)
  CanvasGadget(1, 0, 0, 800, 600, #PB_Canvas_Keyboard)
  
  ;---------------------------------------------------------------------------------------------------
  ;- DO LOOP
  ;---------------------------------------------------------------------------------------------------
  Repeat
    Game_Window_Event = WindowEvent()
    Select Game_Window_Event
      Case #PB_Event_Gadget
        Select EventGadget()
          Case 1            ; Canvas gadget
            Select EventType()
              Case #PB_EventType_LeftButtonDown
                If StartDrawing(ImageOutput(GameBackgroundImage))
                    DrawingMode(#PB_2DDrawing_Default)
                    ;DrawAlphaImage(ImageID(GameTextImage), MousePosX, MousePosY, 50)
                    CustomFilterCallback(@XOR_Alpha_Callback())
                    DrawingMode(#PB_2DDrawing_CustomFilter)
                    draw_alpha_level = 50
                    DrawImage(ImageID(GameTextImage), MousePosX, MousePosY)
                  StopDrawing()
                EndIf
                
              Case #PB_EventType_MouseMove
                If StartDrawing(CanvasOutput(1))
                    DrawingMode(#PB_2DDrawing_Default)
                    ;                                 Box(0, 0, 800, 600, RGB(43, 144, 232))
                    DrawImage(ImageID(GameBackgroundImage), 0, 0, 800, 600)
                    
                    MousePosX = GetGadgetAttribute(1, #PB_Canvas_MouseX)
                    MousePosY = GetGadgetAttribute(1, #PB_Canvas_MouseY)
                    ;DrawingMode(#PB_2DDrawing_AlphaBlend)
                    ;                                 Circle(MousePosX, MousePosY, 10, RGB(100, 100, 100))
                    ;DrawAlphaImage(ImageID(GameTextImage), MousePosX, MousePosY, 50)   ;255)   ;100)
                    CustomFilterCallback(@XOR_Alpha_Callback())
                    DrawingMode(#PB_2DDrawing_CustomFilter)
                    draw_alpha_level = 50
                    DrawImage(ImageID(GameTextImage), MousePosX, MousePosY)
                  StopDrawing()
                EndIf
            EndSelect
        EndSelect
    EndSelect
  Until Game_Window_Event = #PB_Event_CloseWindow
EndIf

;---------------------------------------------------------------------------------------------------
Einde:
End

PureBasic Forums - English

Render Window3D AFTER sprites

Render Window3D AFTER sprites

Re: Render Window3D AFTER sprites

Re: Render Window3D AFTER sprites

Re: Render Window3D AFTER sprites

Re: Render Window3D AFTER sprites

Re: Render Window3D AFTER sprites

Re: Render Window3D AFTER sprites

Re: Render Window3D AFTER sprites