SDL编程入门（30）滚动

墨蓝 2023-01-02 03:20 184阅读 0赞

# 滚动 #

到目前为止，我们只涉及屏幕大小的平面。有了滚动功能，你可以通过渲染与摄影机相关的所有内容来浏览任何大小的平面。

滚动的基本原理是，你有一个矩形，它的功能是一个摄像机:  
![aae7c1d76e2b6c43163cb02bd3aaaba3.png][]

然后你只渲染摄像机里的东西，通常涉及渲染相对于摄像机的事物或仅显示摄像机内部的对象的一部分。  
![2caf1d5f8a0e8613c6e1d93e905014fb.png][]

//平面的尺寸
    const int LEVEL_WIDTH = 1280;
    const int LEVEL_HEIGHT = 960;
    
    //屏幕尺寸常量
    const int SCREEN_WIDTH = 640;
    const int SCREEN_HEIGHT = 480;

由于平面不再是屏幕的大小，我们必须有一组单独的常量来定义平面的大小。

//The dot that will move around on the screen
    class Dot
    { 
        public:
            //The dimensions of the dot
            static const int DOT_WIDTH = 20;
            static const int DOT_HEIGHT = 20;
    
            //Maximum axis velocity of the dot
            static const int DOT_VEL = 10;
    
            //Initializes the variables
            Dot();
    
            //Takes key presses and adjusts the dot's velocity
            void handleEvent( SDL_Event& e );
    
            //Moves the dot
            void move();
    
            //Shows the dot on the screen relative to the camera
            void render( int camX, int camY );
    
            //Position accessors
            int getPosX();
            int getPosY();
    
        private:
            //The X and Y offsets of the dot
            int mPosX, mPosY;
    
            //The velocity of the dot
            int mVelX, mVelY;
    };

这一次，点要相对于摄像机进行渲染，所以它的渲染功能要考虑到摄像机的位置。

void Dot::move(){ 
        //Move the dot left or right
        mPosX += mVelX;
    
        //If the dot went too far to the left or right
        if( ( mPosX < 0 ) || ( mPosX + DOT_WIDTH > LEVEL_WIDTH ) )
        { 
            //Move back
            mPosX -= mVelX;
        }
    
        //Move the dot up or down
        mPosY += mVelY;
    
        //If the dot went too far up or down
        if( ( mPosY < 0 ) || ( mPosY + DOT_HEIGHT > LEVEL_HEIGHT ) )
        { 
            //Move back
            mPosY -= mVelY;
        }
    }

这次在移动点时，我们检查点是否从平面上移开，而不是检查点是否从屏幕上移开，因为屏幕要在平面上移动。

void Dot::render( int camX, int camY ){ 
        //显示点相对于摄像机的位置
        gDotTexture.render( mPosX - camX, mPosY - camY );
    }

现在，当我们将对象渲染到屏幕上时，我们通过减去摄像机的偏移来渲染它们相对于摄像机的位置。

//Main loop flag
                bool quit = false;
    
                //Event handler
                SDL_Event e;
    
                //The dot that will be moving around on the screen
                Dot dot;
    
                //摄像机区域
                SDL_Rect camera = {  0, 0, SCREEN_WIDTH, SCREEN_HEIGHT };

在进入主循环之前，我们先声明点和将要跟随它的摄像机。

//Move the dot
                    dot.move();
    
                    //将相机对准点的中心
                    camera.x = ( dot.getPosX() + Dot::DOT_WIDTH / 2 ) - SCREEN_WIDTH / 2;
                    camera.y = ( dot.getPosY() + Dot::DOT_HEIGHT / 2 ) - SCREEN_HEIGHT / 2;
    
                    //摄像机要保持在范围内
                    if( camera.x < 0 )
                    {  
                        camera.x = 0;
                    }
                    if( camera.y < 0 )
                    { 
                        camera.y = 0;
                    }
                    if( camera.x > LEVEL_WIDTH - camera.w )
                    { 
                        camera.x = LEVEL_WIDTH - camera.w;
                    }
                    if( camera.y > LEVEL_HEIGHT - camera.h )
                    { 
                        camera.y = LEVEL_HEIGHT - camera.h;
                    }

在我们移动点后，我们要将摄像机的位置改为点的中心位置。我们不希望摄像机离开平面，所以在移动它之后，我们要将它保持在边界内。

//Clear screen
                    SDL_SetRenderDrawColor( gRenderer, 0xFF, 0xFF, 0xFF, 0xFF );
                    SDL_RenderClear( gRenderer );
    
                    //Render background
                    gBGTexture.render( 0, 0, &camera );
    
                    //Render objects
                    dot.render( camera.x, camera.y );
    
                    //Update screen
                    SDL_RenderPresent( gRenderer );

摄像机到位后，我们渲染该摄像机内部的那部分背景，然后渲染相对于摄像机位置的点。

在 [这里][Link 1]下载本教程的媒体和源代码。

[原文链接][Link 2]

**关注我的公众号：编程之路从0到1**  
![编程之路从0到1][0_1]

[aae7c1d76e2b6c43163cb02bd3aaaba3.png]: /images/20221120/56f3c86c6d124d51be211c5d6f937b09.png
[2caf1d5f8a0e8613c6e1d93e905014fb.png]: /images/20221120/4e5cd97e71cd434e8c6e3a1854529c03.png
[Link 1]: http://www.lazyfoo.net/tutorials/SDL/30_scrolling/30_scrolling.zip
[Link 2]: http://www.lazyfoo.net/tutorials/SDL/30_scrolling/index.php
[0_1]: /images/20221120/79c5ca5a99694803992f4b1437f6fd8e.png