Cocos2d/Python: viewable portion of layer shifts in opposite direction of focus

Question

Newbie here, trying to make a game in Python with Cocos2d 0.6.0 :)

I'm using ScrollingManager's set_focus(x, y) method to scroll around a 2d tile map using the mouse. The layers involved seem to scroll correctly, however there seems to be a cropping layer, the same size as the window (512x512) moving in the opposite direction, partially obstructing my layers. How can I make this go away?

I can best visualize it this way:

Screenshot 1: initial focus at startup, all layers visible

Screenshot 2: layers seem cropped after scrolling down

For reference, I'm using the Cocos2d 0.6.0 ScrollingManager class for Python.

[EDIT] I've created a standalone script that should be testable.

import pyglet
from pyglet.window import key, mouse
import cocos
from cocos import tiles, actions, layer
import random

def main():
  global mouse, scroller
  global fx, fy, winx, winy, offsetx, offsety

  # map size (cells)
  hsize = 128
  vsize = 128

  # window size (pixels)
  winx = 960
  winy = 640

  # coordinates of screen focus
  fx = 0
  fy = 0

  from cocos.director import director
  director.init(width=winx, height=winy, do_not_scale=True, resizable=True)

  offsetx = hsize * 16 - winx
  offsety = vsize * 16 - winy

  ##################################
  ### creation of randomized map ###
  ##################################

  tileset = {}
  # a 16x16 pixel tile (blue, represents water)
  tileset['water']  = pyglet.image.ImageGrid(pyglet.image.load('resources/water.png'), 4, 4)
  # a 16x16 pixel tile (green, represents land)
  tileset['land']   = pyglet.image.ImageGrid(pyglet.image.load('resources/land.png'), 4, 4)

  # empty 2D array holding RectCells
  cellMatrix = [ [None]*hsize for i in range(vsize) ]

  # filling of array
  for v in range(vsize):
    for h in range(hsize):
      if random.random() < 0.5:
        image = tileset['water'][1]
      else:
        image = tileset['land'][1]

      tile = cocos.tiles.Tile('test', {}, image, None)

      cellMatrix[v][h] = cocos.tiles.RectCell(h*16, v*16, 1, 1, None, tile)

  ##################################
  ### end of creating random map ###
  ##################################

  # creating rectMapLayer from cell array
  rectMapLayer = cocos.tiles.RectMapLayer('test', 16, 16, cellMatrix, None, {})

  scroller = cocos.layer.ScrollingManager()
  scroller.add(rectMapLayer, 0, 'test')
  main_scene = cocos.scene.Scene(scroller)

  def on_mouse_motion(x, y, dx, dy):

    global fx, fy, offsetx, offsety, winx, winy

    if x > winx - 16:
      fx = min(offsetx, fx + 16)

    if x < 16:
      fx = max(0, fx - 16)

    if y > winy - 16:
      fy = min(offsety, fy + 16)

    if y < 16:
      fy = max(0, fy - 16)

    scroller.set_focus(fx + winx/2, fy + winy/2, force=True)

  director.window.push_handlers(on_mouse_motion)

  director.run(main_scene)

# run game
if __name__ == '__main__':
  main()

Thanks for your answers!

Answer 1

Solved the problem by changing the view on each individual layer, as such:

rectMapLayer = cocos.tiles.RectMapLayer('test', 16, 16, cellMatrix, None, {})

scroller = cocos.layer.ScrollingManager()

scroller.add(rectMapLayer, 0, 'test_layer')

# focus coordinates
x = 50
y = 50

scroller.get('test_layer').set_view(0, 0, 1024, 1024, -x, -y)

This will cause the test layer to set its view from origin (0, 0), with width/height 1024x1024, and offset -x, -y.