Question

I’m trying to build a level editor for a game I’m working on. It pulls data from a flat file and then based on a byte-by-byte search it’ll assemble a grid from pre-set tiles. This part of the app I should have no issues with. The problem is that my test version of the editor which just loads a 16×16 grid of test tiles from 00 to FF is loading in the wrong place.

Example: The app frame looks like this:

|-T-------|
| |       |
| |       |
| |       |
| |       |
|---------|

Excusing my horrible ASCII art, the frame essentially has a horizontal sizer on it, with 2 vertical sizers, one for the left and one for the right. Each of these has a panel in it, which each have a second sizer in them. The left sizer has a 64 pixel-wide spacer in it, then a gridsizer which is later filled with images. The right second sizer is user sizable but a minimum of 960 pixels via a spacer there, then a gridsizer that’s determined by the level width and height in code.

Essentially, for each side – there’s a gridsizer inside a sizer which has a spacer for the width of the section, which are on a panel that’s inside a sizer for that half of the sizer that’s on the main frame. I hope this makes sense, as it confuses me at times 😛

Here’s the code that does all this:

    #Horizontal sizer
    self.h_sizer = wx.BoxSizer(wx.HORIZONTAL)
    #Vertical sizer
    self.v_sizer_left = wx.BoxSizer(wx.VERTICAL)
    self.v_sizer_right = wx.BoxSizer(wx.VERTICAL)

    #Create the 2 panels
    self.leftPanel = wx.ScrolledWindow(self, style = wx.VSCROLL | wx.ALWAYS_SHOW_SB)
    self.leftPanel.EnableScrolling(False, True)
    self.rightPanel = wx.ScrolledWindow(self, style = wx.VSCROLL | wx.ALWAYS_SHOW_SB)
    self.rightPanel.EnableScrolling(False, True)

    #Create a sizer for the contents of the left panel
    self.lps = wx.BoxSizer(wx.VERTICAL)
    self.lps.Add((64, 0)) #Add a spacer into the sizer to force it to be 64px wide
    self.leftPanelSizer = wx.GridSizer(256, 1, 2, 2) # horizontal rows, vertical rows, vgap, hgap
    self.lps.Add(self.leftPanelSizer)   #Add the tiles grid to the left panel sizer
    self.leftPanel.SetSizerAndFit(self.lps) #Set the leftPanel to use LeftPanelSizer (it's not lupus) as the sizer
    self.leftPanel.SetScrollbars(0,66,0, 0) #Add the scrollbar, increment in 64 pixel bits plus the 2 spacer pixels
    self.leftPanel.SetAutoLayout(True) 
    self.lps.Fit(self.leftPanel)


    #Create a sizer for the contents of the right panel
    self.rps = wx.BoxSizer(wx.VERTICAL)
    self.rps.Add((960, 0)) #Set it's width and height to be the window's, for now, with a spacer
    self.rightPanelSizer = wx.GridSizer(16, 16, 0, 0) # horizontal rows, vertical rows, vgap, hgap
    self.rps.Add(self.rightPanelSizer)  #Add the level grid to the right panel sizer
    self.rightPanel.SetSizerAndFit(self.rps)    #Set the rightPanel to use RightPanelSizer as the sizer
    self.rightPanel.SetScrollbars(64,64,0, 0)   #Add the scrollbar, increment in 64 pixel bits - vertical and horizontal
    self.rightPanel.SetAutoLayout(True)
    self.rps.Fit(self.rightPanel)


    #Debugging purposes. Colours :)
    self.leftPanel.SetBackgroundColour((0,255,0))
    self.rightPanel.SetBackgroundColour((0,128,128))

    #Add the left panel to the left vertical sizer, tell it to resize with the window (0 does not resize, 1 does). Do not expand the sizer on this side.
    self.v_sizer_left.Add(self.leftPanel, 1)
    #Add the right panel to the right vertical sizer, tell it to resize with the window (0 does not resize, 1 does) Expand the sizer to fit as much as possible on this side.
    self.v_sizer_right.Add(self.rightPanel, 1, wx.EXPAND)

    #Now add the 2 vertical sizers to the horizontal sizer.
    self.h_sizer.Add(self.v_sizer_left, 0, wx.EXPAND)   #First the left one...
    self.h_sizer.Add((0,704))                           #Add in a spacer between the two to get the vertical window size correct...
    self.h_sizer.Add(self.v_sizer_right, 1, wx.EXPAND)  #And finally the right hand frame.

After getting all the data, the app will then use it to generate the level layout with .png tiles from a specified directory but for testing purposes I’m just generating a 16×16 grid from 00 to FF, as mentioned above – via a menu option I call this method:

def populateLevelGrid(self, id):
    #This debug method fills the level grid scrollbar with 256 example image tiles
    levelTileset = self.levelTilesetLookup[id]
    #levelWidth = self.levelWidthLookup[id]
    #levelHeight = self.levelHeightLookup[id]
    #levelTileTotal = levelWidth * levelHeight

    levelTileTotal = 256    #debug line

    self.imgPanelGrid = []
    for i in range(levelTileTotal):
        self.imgPanelGrid.append(ImgPanel.ImgPanel(self, False))
        self.rightPanelSizer.Add(self.imgPanelGrid[i]) 
        self.imgPanelGrid[i].set_image("tiles/"+ levelTileset + "/" + str(i) + ".png")
    self.rightPanelSizer.Layout() 
    self.rightPanelSizer.FitInside(self.rightPanel)

This works, but pins the grid to the top left of the entire frame, not to the top left of the right half of the frame – that it should be on. There’s similar code to do a 1×256 grid on the left frame but I’ve no way of telling if that’s suffering the same issue for obvious reasons. Both have working scrollbars but have redrawing issues when scrolled, making me wonder if it’s drawing the images over the entire application and just ignoring the application layout.

Is there something I’ve missed here? This is the first time I’ve done anything with gridsizers, images and GUIs in general in python, having only recently started with the language after wanting to write in something a little more cross-platform than VB6 – any thoughts? =/

Answer 1

That’s a lot of code and a lot of sizers! But I think maybe your ImgPanels should have the rightPanel as their parent, and not self.

Also, do you ever call self.SetSizer(self.h_sizer)? Didn’t see that anywhere.

I recommend creating portions of the layout in separate functions. Then you don’t have to worry about your local namespace being polluted with all these wacky sizer names. So for each part of the sizer hierarchy you could have a function.

create_controls
    create_left_panel
        create_grid
    create_right_panel

Also, I usually use SetMinSize on the child controls instead of adding dummy spacers to the sizers to setup size constraints. Then Fit will do it for you. Speaking of Fit, I didn’t even know it could take arguments!