1

我正在尝试复制某些网格视口的行为(例如3ds Max的正交视图)
或地图查看器(如GoogleMaps)的行为,其中我们有地图或网格,它
比屏幕大得多,我们导航单击视口中的某处并拖动。

到目前为止,我已经设法创建了一个相当大的网格,绘制它并使视口只显示它应该显示的图块。

到目前为止,这是我的代码:

import pygame, sys, math
from pygame.locals import *

FPS = 30
WINDOWWIDTH = 640
WINDOWHEIGHT = 480
GRIDWIDTH = 256
GRIDHEIGHT = 256
GRIDSIZE = 256
TILESIZE = 40
BGCOLOR = (128, 128, 128)
FGCOLOR = (64, 64, 64)

GRID = []

FPSCLOCK = pygame.time.Clock()

indexX = None
indexY = None

minVPcoordX = 0
minVPcoordY = 0
maxVPcoordX = (TILESIZE*GRIDSIZE)-WINDOWWIDTH
maxVPcoordY = (TILESIZE*GRIDSIZE)-WINDOWHEIGHT
viewportOffset = (0, 0)
vpStartXTile = 0
vpStartYTile = 0
viewportCoord = (0, 0)

coordX = 0
coordY = 0

movedDistanceX = 0
movedDistanceY = 0

speed = 4

def main():
    global FPSCLOCK, DISPLAYSURF
    global coordX, coordY
    global offsetX, offsetY, negativeOffsetX, negativeOffsetY
    global movedDistanceX, movedDistanceY

    DISPLAYSURF = pygame.display.set_mode((WINDOWWIDTH, WINDOWHEIGHT))

    mouseX = 0
    mouseY = 0

    generateGrid(GRIDSIZE, GRIDSIZE)

    LeftButton = False
    mousePos = (0, 0)
    dragStart = (0,0)
    dragEnd = (0,0)

    pygame.font.init()
    arialFnt = pygame.font.SysFont('Arial', 16)
    while True:
        DISPLAYSURF.fill(BGCOLOR)

        for event in pygame.event.get():
            if event.type == QUIT:
                pygame.quit()
                sys.exit()

        #X
        if coordX < maxVPcoordX:
            coordX += speed
        elif coordX < minVPcoordX:
            coordX = 0
        else:
            coordX = maxVPcoordX
        #Y   
        if coordY < maxVPcoordY:
            coordY += speed
        elif coordY < minVPcoordY:
            coordY = 0
        else:
            coordY = maxVPcoordY
        #-------------

        viewportCoord = (coordX, coordY)
        print(coordX, coordY)

        vpStartXTile = math.floor(float(viewportCoord[0]/TILESIZE))
        vpStartYTile = math.floor(float(viewportCoord[1]/TILESIZE))
        GRIDstartTile = GRID[vpStartXTile][vpStartYTile]

        negativeOffsetX = viewportCoord[0] - GRID[vpStartXTile][vpStartYTile][0]
        negativeOffsetY = viewportCoord[1] - GRID[vpStartXTile][vpStartYTile][1]

        offsetX = TILESIZE - negativeOffsetX
        offsetY = TILESIZE - negativeOffsetY

        repeatX = math.floor(WINDOWWIDTH/TILESIZE)
        repeatY = math.floor(WINDOWHEIGHT/TILESIZE)

        drawGrid(repeatX, repeatY)

        outputLabel = arialFnt.render('(Top-Left)Coordinates: x%s - y%s' % (coordX, coordY), 1, (255,255,255))
        DISPLAYSURF.blit(outputLabel, (10, 10))

        # frame draw
        pygame.display.set_caption("Memory Game - FPS: %.0f" % FPSCLOCK.get_fps())
        pygame.display.flip()
        pygame.display.update()
        FPSCLOCK.tick(FPS)



def generateGrid(xTiles=None, yTiles=None):
    global GRID

    GRID = []

    for i in range(xTiles):
        GRID.append([None] * yTiles)

    ix = 0
    iy = 0

    posX = -40

    for x in range(len(GRID[ix])):
        posX += TILESIZE
        posY = -40
        iy = 0
        for y in range(xTiles):
            posY += TILESIZE
            position = (posX, posY)
            GRID[ix][iy] = position
            iy += 1
        if ix < xTiles:
            ix += 1
        else:
            return

def drawGrid(x=None, y=None):
    lineWidth = 1

    xPos = 0
    yPos = 0

    for i in range(x):
        xStart = (xPos + offsetX, 0)
        xEnd = (xPos + offsetX, WINDOWHEIGHT + negativeOffsetY)
        pygame.draw.line(DISPLAYSURF, FGCOLOR, xStart, xEnd, lineWidth)
        xPos += TILESIZE

    for i in range(y):
        yStart = (0, yPos + offsetY)
        yEnd = (WINDOWWIDTH + negativeOffsetX, yPos + offsetY)
        pygame.draw.line(DISPLAYSURF, FGCOLOR, yStart, yEnd, lineWidth)
        yPos += TILESIZE

def moveGrid():    
    pass

def zoomIn():
    pass

def zoomOut():
    pass

main()    

如您所见,它按预期工作(我没有
在此示例中实现任何形式的单击和拖动)。

看来pygame没有这个事件,所以一定是
MOUSEBUTTONDOWNMOUSEMOTION的组合。

我尝试使用get_pos()存储前一帧的位置并减去当前帧的位置,但我不知道下一帧的位置。它加速得太快了..
我也用get_rel()试过这个方法试过这个,但没有成功。
(虽然我很确定我不应该将鼠标位置 ++ 到屏幕位置)

我四处研究,看看是否有其他人这样做,但我只发现了如何拖动某些东西
我四处研究看看是否有其他人这样做,但我只发现如何在固定屏幕上我需要相反的 - 在固定网格上拖动屏幕。

所以,如果有人对如何制作这个机制有任何想法或建议,或者我可以研究它的任何链接,我将不胜感激!

ps:我发现了类似的东西,但它是用JS编写的,翻译起来很痛苦)

4

1 回答 1

1

I got it working!

It still has some issues on the zoomIn/zoomOut additions but the main problem of dragging
the grid around is fixed.

import pygame, sys, math
from pygame.locals import *

FPS = 30
WINDOWWIDTH = 640
WINDOWHEIGHT = 480
GRIDSIZE = 256
TILESIZE = 40
BGCOLOR = (128, 128, 128)
FGCOLOR = (64, 64, 64)

GRID = []

FPSCLOCK = pygame.time.Clock()

indexX = None
indexY = None

minVPcoordX = 0
minVPcoordY = 0
maxVPcoordX = (TILESIZE*GRIDSIZE)-WINDOWWIDTH
maxVPcoordY = (TILESIZE*GRIDSIZE)-WINDOWHEIGHT
viewportOffset = (0, 0)
vpStartXTile = 0
vpStartYTile = 0
viewportCoord = (0, 0)

coordX = 0
coordY = 0

def main():
    global FPSCLOCK, DISPLAYSURF
    global coordX, coordY
    global offsetX, offsetY, negativeOffsetX, negativeOffsetY
    global movedDistanceX, movedDistanceY
    global isDragging

    DISPLAYSURF = pygame.display.set_mode((WINDOWWIDTH, WINDOWHEIGHT))

    mouseX = 0
    mouseY = 0

    generateGrid(GRIDSIZE, GRIDSIZE)

    isDragging = False
    mousePos = (0, 0)
    dragStart = (0,0)
    dragEnd = (0,0)

    pygame.font.init()
    arialFnt = pygame.font.SysFont('Arial', 16)
    while True:
        DISPLAYSURF.fill(BGCOLOR)

        for event in pygame.event.get():
            if event.type == QUIT:
                pygame.quit()
                sys.exit()
            if event.type == MOUSEBUTTONDOWN:
                if event.button == 2:
                    isDragging = True
                elif event.button == 4:
                    zoomIn()
                elif event.button == 5:
                    zoomOut()
            elif event.type == MOUSEMOTION:
                mouseRel = pygame.mouse.get_rel()
                moveGrid(mouseRel)
            elif event.type == MOUSEBUTTONUP:
                isDragging = False

        viewportCoord = (coordX, coordY)

        vpStartXTile = math.floor(float(viewportCoord[0]/TILESIZE))
        vpStartYTile = math.floor(float(viewportCoord[1]/TILESIZE))
        GRIDstartTile = GRID[vpStartXTile][vpStartYTile]

        negativeOffsetX = viewportCoord[0] - GRID[vpStartXTile][vpStartYTile][0]
        negativeOffsetY = viewportCoord[1] - GRID[vpStartXTile][vpStartYTile][1]

        offsetX = TILESIZE - negativeOffsetX
        offsetY = TILESIZE - negativeOffsetY

        repeatX = math.floor(WINDOWWIDTH/TILESIZE)
        repeatY = math.floor(WINDOWHEIGHT/TILESIZE)

        drawGrid(repeatX, repeatY)

        outputLabel = arialFnt.render('(Top-Left)Coordinates: x%s - y%s' % (coordX, coordY), 1, (255,255,255))
        DISPLAYSURF.blit(outputLabel, (10, 10))

        # frame draw
        pygame.display.set_caption("Memory Game - FPS: %.0f" % FPSCLOCK.get_fps())
        pygame.display.flip()
        pygame.display.update()
        FPSCLOCK.tick(FPS)



def generateGrid(xTiles=None, yTiles=None):
    global GRID

    GRID = []

    for i in range(xTiles):
        GRID.append([None] * yTiles)

    ix = 0
    iy = 0

    posX = -40

    for x in range(len(GRID[ix])):
        posX += TILESIZE
        posY = -40
        iy = 0
        for y in range(xTiles):
            posY += TILESIZE
            position = (posX, posY)
            GRID[ix][iy] = position
            iy += 1
        if ix < xTiles:
            ix += 1
        else:
            return

def drawGrid(x=None, y=None):
    lineWidth = 1

    xPos = 0
    yPos = 0

    for i in range(x):
        xStart = (xPos + offsetX, 0)
        xEnd = (xPos + offsetX, WINDOWHEIGHT + negativeOffsetY)
        pygame.draw.line(DISPLAYSURF, FGCOLOR, xStart, xEnd, lineWidth)
        xPos += TILESIZE

    for i in range(y):
        yStart = (0, yPos + offsetY)
        yEnd = (WINDOWWIDTH + negativeOffsetX, yPos + offsetY)
        pygame.draw.line(DISPLAYSURF, FGCOLOR, yStart, yEnd, lineWidth)
        yPos += TILESIZE

def moveGrid(rel):
    global coordX, coordY, isDragging


    if isDragging == True:
        #X
        if coordX <= maxVPcoordX and coordX >= minVPcoordX:
            coordX = coordX - rel[0]
            if coordX > maxVPcoordX:
                coordX = maxVPcoordX
            if coordX < minVPcoordX:
                coordX = 0
        #Y   
        if coordY <= maxVPcoordY and coordY >= minVPcoordY:
            coordY = coordY - rel[1]
            if coordY > maxVPcoordY:
                coordY = maxVPcoordY
            elif coordY < minVPcoordY:
                coordY = 0
    #-------------



def zoomIn():
    global TILESIZE, maxVPcoordX, maxVPcoordY

    TILESIZE += 4

    print("Tile size: ", TILESIZE)

    generateGrid(GRIDSIZE, GRIDSIZE)

    maxVPcoordX = (TILESIZE*GRIDSIZE)-WINDOWWIDTH
    maxVPcoordY = (TILESIZE*GRIDSIZE)-WINDOWHEIGHT


def zoomOut():
    global TILESIZE, maxVPcoordX, maxVPcoordY

    TILESIZE -= 4
    if TILESIZE <= 0:
        TILESIZE = 4

    print("Tile size: ", TILESIZE)

    generateGrid(GRIDSIZE, GRIDSIZE)

    maxVPcoordX = (TILESIZE*GRIDSIZE)-WINDOWWIDTH
    maxVPcoordY = (TILESIZE*GRIDSIZE)-WINDOWHEIGHT

main()    
于 2013-07-17T13:09:57.257 回答