Mojox GUI + Game Rendering

[juliocmfjParticipant]

Good evening everyone. I’m taking a beating to use the Mojox library. I’m developing a library for retro style RPG games (like The Legend of Zelda [NES]) and would like to create a stage editor for it …

Oh, that’s the problem. I’m completely lost here. In BlitzMax I did not have many complications, but in Monkey 2 I still did not understand how the GUI works.

Does anyone have an example of how to join GUI interface with the rendering of the game itself?

[Mark SiblyKeymaster]

The main idea is to write a ‘GameView’ style class that implements your game rendering, and then to add that to your app’s view hierarchy, eg:

Monkey

#Import "<std>" #Import "<mojo>" #Import "<mojox>" Using std.. Using mojo.. using mojox.. Class GameView Extends View Method OnRender( canvas:Canvas ) Override canvas.DrawText( "Game Rendering goes here!",Width/2,Height/2,.5,.5 ) End End Class GameWindow Extends Window Field _gameView:GameView Field _textView:TextView Field _dockingView:DockingView Method New() _gameView=New GameView _textView=New TextView _dockingView=New DockingView _dockingView.ContentView=_gameView _dockingView.AddView( _textView,"right",320,True ) ContentView=_dockingView End End Function Main() New AppInstance New GameWindow App.Run() End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

#Import "<std>" #Import "<mojo>" #Import "<mojox>"   Using std.. Using mojo.. using mojox..   Class GameView Extends View Method OnRender( canvas:Canvas ) Override canvas.DrawText( "Game Rendering goes here!",Width/2,Height/2,.5,.5 ) End End   Class GameWindow Extends Window Field _gameView:GameView Field _textView:TextView Field _dockingView:DockingView Method New() _gameView=New GameView   _textView=New TextView   _dockingView=New DockingView _dockingView.ContentView=_gameView _dockingView.AddView( _textView,"right",320,True ) ContentView=_dockingView End   End   Function Main() New AppInstance New GameWindow App.Run() End

This sets up a docking view that contains your game view as its ‘main’ view and adds a resizable TextView on the right.

Have a look in modules/mojox/tests for some mojox examples.

[juliocmfjParticipant]

Thank you Mark. (Now I’ve opened my vision a little more, but it’s still confusing …).

Taking advantage of the hook, I also miss out on how the coordinates of the GUI components on the screen work.

In BlitzMax, he used the x, y coordinates. I still try to understand how the organization works in Monkey 2.

Could you give me a brief explanation of how it works?

Note: I have already looked at all the examples and still I still do not understand very well.

[Mark SiblyKeymaster]

The general idea is for mojox to do all the layout stuff for you, so you don’t have to worry about positions/sizes etc so much. This allows guis to work on a wide range of resolutions and devices and to respond very dynamically when windows are resized etc.

You generally create a hierarchy of views using DockingViews, ToolBars, ListViews, TreeViews, GridViews etc and mojox does the positioning and sizing for you when it needs to update the GUI layout.

[juliocmfjParticipant]

Hey Mark … Now I understand how it works. I spent the day looking at all the forum posts related to Mojox, and it opened my mind more. I’m still confused about some things, but I understand their operation much more.

I’ll keep doing my tests here. And once again, thank you for your help.

[Author]

Posts