Xbox LIVE Indie Games
Sort Discussions: Previous Discussion Next Discussion
Page 1 of 2 (38 posts) 1 2 Next >

Adding vertical scrolling to Platformer starter kit

Last post 3/17/2014 7:09 AM by SurvivalOps. 37 replies.
  • 1/30/2009 9:39 PM

    Adding vertical scrolling to Platformer starter kit

    I've been messing around with the platformer starter kit and have done the addon tutorials at http://msdn.microsoft.com/en-us/library/dd254919.aspx.
    I've been adding stuff to the game on top of that but one thing is confusing me.  How do I implement vertical level scrolling as well has horizontal?  I know the tutorial makes it so that the level moves back and forth, not the camera.  Is there any way to make the level move in all directions?  I've been able to make the level react to me going up and down, but I don't know how to make the level actually move up and down. (When I move up, level moves left, when I move down, level goes right, it's really weird).  Since I have it noticing I'm moving in all 4 directions, how do I make the level move in all 4 directions?  

    This part of the code from the tutorial says it makes the level movie left and right, how do I change this to make it move at least up and down instead.  (I'd really like it to move in all directions).  

     public void Draw(GameTime gameTime, SpriteBatch spriteBatch)
        {
          spriteBatch.Begin();
          for (int i = 0; i <= EntityLayer; ++i)
            layers[i].Draw(spriteBatch, cameraPosition);
          spriteBatch.End();

          ScrollCamera(spriteBatch.GraphicsDevice.Viewport);
          Matrix cameraTransform = Matrix.CreateTranslation(-cameraPosition, 0.0f, 0.0f);
          spriteBatch.Begin(SpriteBlendMode.AlphaBlend, SpriteSortMode.Immediate, SaveStateMode.None, cameraTransform);

          DrawTiles(spriteBatch);

          foreach (Gem gem in gems)
            gem.Draw(gameTime, spriteBatch);

          Player.Draw(gameTime, spriteBatch);

          foreach (Enemy enemy in enemies)
            enemy.Draw(gameTime, spriteBatch);

          spriteBatch.End();

          spriteBatch.Begin();
          for (int i = EntityLayer + 1; i < layers.Length; ++i)
            layers[i].Draw(spriteBatch, cameraPosition);
          spriteBatch.End();
        }

    I want to make these changes so I can build a bigger game.  Sure it can go on forever horizontally, but without any vertical variation, it gets pretty boring.  When I add tiles below the visible level, the game draws them, but the camera doesn't follow me down there.



    Other things I'm also trying to add
    -moving tiles (platforms)
    -some type of projectile (I have a punch right now)
    -healthbar (so not everything dies in one hit)


    stuff I've added
    -Scrolling level (horizontal)
    -power up (invincible, kills enemy)
    -punch (kills enemy)
    -multiple levels
    -double jump (can easily turn into flying)
    -various custom tiles

  • 1/30/2009 10:37 PM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    I just played with the scrolling level tutorial, and I got it to go pretty quick and easy.. If you post your email, when I get home tonight I can send you the base code itself. Its not perfect mind you, but it will get you started at least..
  • 2/2/2009 4:31 PM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    Cdxrd:
    I just played with the scrolling level tutorial, and I got it to go pretty quick and easy.. If you post your email, when I get home tonight I can send you the base code itself. Its not perfect mind you, but it will get you started at least..


    cool.  send it to s276655@nwmissouri.edu

    thanks
  • 2/3/2009 10:17 PM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    Hello hello, i want know also your method Cdxrd.
    email deleted (thanks for sending Cdxrd !)
    Thanks !
  • 2/3/2009 10:56 PM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    Mines a hack based on the scrolling tutorial already.. so its by no means perfect.. but I will mail it out later tonight..
  • 2/3/2009 11:02 PM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    I'll waiting without patience ^^
  • 2/4/2009 6:01 AM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    Sent.. good luck!
  • 2/4/2009 10:30 PM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    I would also like to see it... my email is   tntrent@gmail.com  or  backst3r@hotmail.com    thanks!
  • 2/5/2009 12:26 AM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    I'd love to see the code also.

    admin@xkloc.com is my email!
  • 2/5/2009 5:00 AM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    Added download link to my website: http://www.cdx-games.com
  • 2/7/2009 4:11 PM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    thanks alot for the code Cdxrd
    im playing around with drawing the tiles off screen. it seems to be alright for tiles above the current camera position. but once it dips down, it wont fully draw the tiles. I have an idea but ill have to try it when i get home. Thanks again, very helpful

    EDIT:
    Alright well, my idea was correct. Not sure if its the best solution but what i did is in the DrawTiles() method i found the for loop that draws offscreen tiles:

    // For each tile position

     

    for (int y = top; y < bottom; ++y)

    {

     

    for (int x = left; x <= right; ++x)

    {

     

    // If there is a visible tile in that position

     

    Texture2D texture = tiles[x, y].Texture;

     

    if (texture != null)

    {

     

    // Draw it in screen space.

     

    Vector2 position = new Vector2(x, y) * Tile.Size;

    spriteBatch.Draw(texture, position,

     

    Color.White);

    }

    }

    }

    and i changed the first for loop to read:
    for (int y = 0; y < Height; ++y)

    everything now draws perfectly and i dont have any framerate dips. Don't know if i did the right thing, but it works so it alright.

     

  • 2/26/2009 8:26 PM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    Luckily for you guys, someone on this side wrote up some notes on exactly how to do this :-)

     

    Adding Vertical Scrolling to Platformer SK  
    ******************************************  
     
    // Open the Level.cs file and add the following, after the existing cameraPosition variable declaration:  
                public float cameraPositionYAxis;   
     
    // Modify the Draw method to use a Y-axis offset in addition to the previously calculated X-axis offset. Modify the following line:  
    //          Matrix cameraTransform = Matrix.CreateTranslation(-cameraPosition, 0.0f, 0.0f);  
    // to match the following:  
                Matrix cameraTransform = Matrix.CreateTranslation(-cameraPositionXAxis, -cameraPositionYAxis, 0.0f);  
     
    // Modify the ScrollCamera method by adding the following, after the existing code block that calculates the scrolling borders of the X-axis:  
                // Calculate the scrolling borders for the Y-axis.  
                const float TopMargin = 0.3f;  
                const float BottomMargin = 0.1f;  
                float marginTop = cameraPositionYAxis + viewport.Height * TopMargin;  
                float marginBottom = cameraPositionYAxis + viewport.Height - viewport.Height * BottomMargin;  
     
    // in the same method, add the following, after the existing code block that calculates how far to scroll along the X-axis:  
                // Calculate how far to vertically scroll when the player is near the top or bottom of the screen.  
                float cameraMovementY = 0.0f;  
                if (Player.Position.Y < marginTop) //above the top margin  
                    cameraMovementY = Player.Position.Y - marginTop;  
                else if (Player.Position.Y > marginBottom) //below the bottom margin  
                    cameraMovementY = Player.Position.Y - marginBottom;  
     
    // In the same method, add a new variable (called maxCameraPositionYOffset) that tracks the highest scrolling point for the camera:  
                float maxCameraPositionYOffset = Tile.Height * Height - viewport.Height;  
     
    // Finally, add the following, after the calculation for the camera position along the X-axis:  
                float maxCameraPositionYOffset = Tile.Height * Height - viewport.Height;  
     
    // The code modifications are complete but for testing purposes we need to add a new level that has height information above the current level to the project. We'll modify the second level by doubling the height information of the current map. Replace the existing contents of 1.txt with the following:  
    ..........................................................  
    ..........................................................  
    ..............................G.....##....................  
    .........................G...---..........................  
    ...................G....---...............................  
    ..................---.....................................  
    .......................G..................................  
    ......................---.................................  
    ............................G.............................  
    ...........................###...G........................  
    ................................###.......................  
    ...........................G..........................X...  
    ..........................###.................############  
    ......................G...................................  
    .....................###..............G.G.G...............  
    .................G....................######..............  
    ................###.......................................  
    ............G...................G.G.......................  
    ...........###.................#####......................  
    .......G..................................................  
    ......###.............................G.G.G.G.G.G.G.G.G.G.  
    .......................................G.G.G.G.G.G.G.G.G..  
    .1....................................GCG.G.G.GCG.G.G.GCG.
    ####################..................####################  
     

     

  • 2/27/2009 7:11 PM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    Thanks for this Brandon.

     
    // Finally, add the following, after the calculation for the camera position along the X-axis:  
                float maxCameraPositionYOffset = Tile.Height * Height - viewport.Height;  

    Is this line of code correct? It's a repeat of the previous line of code.

    Should it be something like the following?

    cameraPositionYAxis = MathHelper.Clamp(cameraPositionYAxis + cameraMovementY, 0.0f, maxCameraPositionYOffset); 
     

     

     

     

     

     



  • 3/3/2009 8:55 AM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    Yup, that is an error. Sorry about that :-)
  • 3/3/2009 9:11 PM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    Hi ive made this and i seem to have a few problems, im only a beginner so i need some help XD Could someone tell me how i can fix this code, at the moment its not making the vertical scrolling. Heres the part of the code that i think is wrong.
        private void UpdateGems(GameTime gameTime) 
            { 
                for (int i = 0; i < gems.Count; ++i) 
                { 
                    Gem gem = gems[i]; 
     
                    gem.Update(gameTime); 
     
                    if (gem.BoundingCircle.Intersects(Player.BoundingRectangle)) 
                    { 
                        gems.RemoveAt(i--); 
                        OnGemCollected(gem, Player); 
                    } 
                } 
            } 
     
            /// <summary> 
            /// Animates each enemy and allow them to kill the player. 
            /// </summary> 
            private void UpdateEnemies(GameTime gameTime) 
            { 
                foreach (Enemy enemy in enemies) 
                { 
                    enemy.Update(gameTime); 
     
                    // Touching an enemy instantly kills the player 
                    if (enemy.BoundingRectangle.Intersects(Player.BoundingRectangle)) 
                    { 
                        OnPlayerKilled(enemy); 
                    } 
                } 
            } 
     
            /// <summary> 
            /// Called when a gem is collected. 
            /// </summary> 
            /// <param name="gem">The gem that was collected.</param> 
            /// <param name="collectedBy">The player who collected this gem.</param> 
            private void OnGemCollected(Gem gem, Player collectedBy) 
            { 
                score += Gem.PointValue; 
     
                gem.OnCollected(collectedBy); 
            } 
     
            /// <summary> 
            /// Called when the player is killed. 
            /// </summary> 
            /// <param name="killedBy"> 
            /// The enemy who killed the player. This is null if the player was not killed by an 
            /// enemy, such as when a player falls into a hole. 
            /// </param> 
            private void OnPlayerKilled(Enemy killedBy) 
            { 
                Player.OnKilled(killedBy); 
            } 
     
            /// <summary> 
            /// Called when the player reaches the level's exit. 
            /// </summary> 
            private void OnExitReached() 
            { 
                Player.OnReachedExit(); 
                exitReachedSound.Play(); 
                reachedExit = true
            } 
     
            /// <summary> 
            /// Restores the player to the starting point to try the level again. 
            /// </summary> 
            public void StartNewLife() 
            { 
                Player.Reset(start); 
            } 
            #endregion 
            #region Draw 
     
            /// <summary> 
            /// Draw everything in the level from background to foreground. 
            /// </summary> 
            public void Draw(GameTime gameTime, SpriteBatch spriteBatch) 
            { 
                spriteBatch.Begin(); 
                for (int i = 0; i <= EntityLayer; ++i) 
                    layers[i].Draw(spriteBatch, cameraPosition); 
                spriteBatch.End(); 
     
                ScrollCamera(spriteBatch.GraphicsDevice.Viewport); 
                Matrix cameraTransform = Matrix.CreateTranslation(-cameraPositionXAxis, -cameraPositionYAxis, 0.0f);  
                spriteBatch.Begin(SpriteBlendMode.AlphaBlend, SpriteSortMode.Immediate, SaveStateMode.None, cameraTransform); 
                int left = (int)Math.Floor(cameraPosition / Tile.Width); 
                int right = left + spriteBatch.GraphicsDevice.Viewport.Width / Tile.Width; 
                right = Math.Min(right, Width - 1); 
                for (int x = left; x <= right; ++x) 
     
     
                    DrawTiles(spriteBatch); 
     
                foreach (Gem gem in gems) 
                    gem.Draw(gameTime, spriteBatch); 
     
                Player.Draw(gameTime, spriteBatch); 
     
                foreach (Enemy enemy in enemies) 
                    enemy.Draw(gameTime, spriteBatch); 
     
                spriteBatch.End(); 
     
                spriteBatch.Begin(); 
                for (int i = EntityLayer + 1; i < layers.Length; ++i) 
                    layers[i].Draw(spriteBatch, cameraPosition); 
                spriteBatch.End(); 
            } 
     
            /// <summary> 
            /// Draws each tile in the level. 
            /// </summary> 
            private void DrawTiles(SpriteBatch spriteBatch) 
            { 
                // For each tile position 
                for (int y = 0; y < Height; ++y) 
                { 
                    for (int x = 0; x < Width; ++x) 
                    { 
                        // If there is a visible tile in that position 
                        Texture2D texture = tiles[x, y].Texture; 
                        if (texture != null
                        { 
                            // Draw it in screen space. 
                            Vector2 position = new Vector2(x, y) * Tile.Size; 
                            spriteBatch.Draw(texture, position, Color.White); 
                        } 
                    } 
                } 
            } 
            private void ScrollCamera(Viewport viewport) 
            { 
    #if ZUNE 
    const float ViewMargin = 0.45f; 
    #else 
                const float ViewMargin = 0.35f; 
    #endif 
     
                // Calculate the edges of the screen. 
                float marginWidth = viewport.Width * ViewMargin; 
                float marginLeft = cameraPosition + marginWidth; 
                float marginRight = cameraPosition + viewport.Width - marginWidth; 
     
                // Calculate how far to scroll when the player is near the edges of the screen. 
                float cameraMovement = 0.0f; 
                if (Player.Position.X < marginLeft) 
                    cameraMovement = Player.Position.X - marginLeft; 
                else if (Player.Position.X > marginRight) 
                    cameraMovement = Player.Position.X - marginRight; 
     
                // Update the camera position, but prevent scrolling off the ends of the level. 
                float maxCameraPosition = Tile.Width * Width - viewport.Width; 
                cameraPosition = MathHelper.Clamp(cameraPosition + cameraMovement, 0.0f, maxCameraPosition); 
     
                const float TopMargin = 0.3f; 
                const float BottomMargin = 0.1f; 
                float marginTop = cameraPositionYAxis + viewport.Height * TopMargin; 
                float marginBottom = cameraPositionYAxis + viewport.Height - viewport.Height * BottomMargin; 
                // Calculate how far to vertically scroll when the player is near the top or bottom of the screen.   
                 
                float cameraMovementY = 0.0f; 
                if (Player.Position.Y < marginTop) //above the top margin   
                    cameraMovementY = Player.Position.Y - marginTop; 
                else if (Player.Position.Y > marginBottom) //below the bottom margin   
                    cameraMovementY = Player.Position.Y - marginBottom; 
     
                float maxCameraPositionYOffset = Tile.Height * Height - viewport.Height; 
                cameraPositionYAxis = MathHelper.Clamp(cameraPositionYAxis + cameraMovementY, 0.0f, maxCameraPositionYOffset);   
      
      
     
            } 
            public float cameraPositionYAxis; 
            public float cameraPositionXAxis;  
      
            #endregion 
        } 
     
     

  • 3/5/2009 4:20 PM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    Anyone?
  • 3/5/2009 9:50 PM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    What's the problem you're having? Does your code compile? If not, what's the error you're getting?


  • 3/6/2009 8:53 PM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    well it runs the horizontal scrolling works but it just doesnt scroll up or draw anything up??
  • 4/9/2009 4:28 PM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    My problem is smaller. It says im missing an Importer that handles importing TxT files.
  • 4/9/2009 9:55 PM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    Timberwolf:
    My problem is smaller. It says im missing an Importer that handles importing TxT files.


    Right click on the txt file and hit properties, then specify the "Build action" to none and the "copy to output directory" to copy if newer.

    If I understood your post that should fix it! :-)
  • 4/10/2009 7:51 AM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    thanks! That helped out alot.
  • 5/24/2009 6:48 PM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    Cdxrd:
    Added download link to my website: http://www.cdx-games.com


    Hi, I went to download it, but there was an error. It said internet couldn't connect to adress. I think the link is broken since you had updated you site to squiggly frog.

    Are you able to fix it or send it to an email adress?
  • 5/25/2009 6:29 PM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    Brandon Bloom:

    Luckily for you guys, someone on this side wrote up some notes on exactly how to do this :-)

     

    Adding Vertical Scrolling to Platformer SK  
    ******************************************  
     
    // Open the Level.cs file and add the following, after the existing cameraPosition variable declaration:  
                public float cameraPositionYAxis;   
     
    // Modify the Draw method to use a Y-axis offset in addition to the previously calculated X-axis offset. Modify the following line:  
    //          Matrix cameraTransform = Matrix.CreateTranslation(-cameraPosition, 0.0f, 0.0f);  
    // to match the following:  
                Matrix cameraTransform = Matrix.CreateTranslation(-cameraPositionXAxis, -cameraPositionYAxis, 0.0f);  
     
    // Modify the ScrollCamera method by adding the following, after the existing code block that calculates the scrolling borders of the X-axis:  
                // Calculate the scrolling borders for the Y-axis.  
                const float TopMargin = 0.3f;  
                const float BottomMargin = 0.1f;  
                float marginTop = cameraPositionYAxis + viewport.Height * TopMargin;  
                float marginBottom = cameraPositionYAxis + viewport.Height - viewport.Height * BottomMargin;  
     
    // in the same method, add the following, after the existing code block that calculates how far to scroll along the X-axis:  
                // Calculate how far to vertically scroll when the player is near the top or bottom of the screen.  
                float cameraMovementY = 0.0f;  
                if (Player.Position.Y < marginTop) //above the top margin  
                    cameraMovementY = Player.Position.Y - marginTop;  
                else if (Player.Position.Y > marginBottom) //below the bottom margin  
                    cameraMovementY = Player.Position.Y - marginBottom;  
     
    // In the same method, add a new variable (called maxCameraPositionYOffset) that tracks the highest scrolling point for the camera:  
                float maxCameraPositionYOffset = Tile.Height * Height - viewport.Height;  
     
    // Finally, add the following, after the calculation for the camera position along the X-axis:  
                cameraPositionYAxis = MathHelper.Clamp(cameraPositionYAxis + cameraMovementY, 0.0f, maxCameraPositionYOffset);  
     
    // The code modifications are complete but for testing purposes we need to add a new level that has height information above the current level to the project. We'll modify the second level by doubling the height information of the current map. Replace the existing contents of 1.txt with the following:  
    ..........................................................  
    ..........................................................  
    ..............................G.....##....................  
    .........................G...---..........................  
    ...................G....---...............................  
    ..................---.....................................  
    .......................G..................................  
    ......................---.................................  
    ............................G.............................  
    ...........................###...G........................  
    ................................###.......................  
    ...........................G..........................X...  
    ..........................###.................############  
    ......................G...................................  
    .....................###..............G.G.G...............  
    .................G....................######..............  
    ................###.......................................  
    ............G...................G.G.......................  
    ...........###.................#####......................  
    .......G..................................................  
    ......###.............................G.G.G.G.G.G.G.G.G.G.  
    .......................................G.G.G.G.G.G.G.G.G..  
    .1....................................GCG.G.G.GCG.G.G.GCG.
    ####################..................####################  
     

     

     

     

     

     



    Thanks for the code. It really helped me. And also thank you Matt Simpson for finding that error. That was the main thing blocking me from reaching my goal.
    Thanks.
  • 6/2/2009 10:00 PM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    Thanks a lot Brandon Bloom, however does this do anything about drawing entities off the screen?  In my opinion the margin at the bottom isn't enough, but I understand that since this is my own opinion I am free to change that if I wish, I'm thinking I might add a camera control button so you can move the camera around a limited distance so you can see what's under you before jumping down.

    Anyhow, now that I see this, I'm realizing that vertical scrolling would have been something fairly easy to do, but I am just too lazy to figure that out myself lol.  I did however figure out the solution to the problems I mentioned above.

    To prevent tiles from drawing while they are off screen, add the following code under the code which calculates the visible range of tiles.

                int top = (int)Math.Floor(cameraPositionYAxis / Tile.Height); 
                int bottom = top + spriteBatch.GraphicsDevice.Viewport.Height / Tile.Height; 
                bottom = Math.Min(bottom, Height - 1); 

    Then change for (int y = 0; y < Height; ++y) to for (int y = top; y <= bottom; ++y)  All in the DrawTiles() method.

    Simply editing the TopMargin and BottomMargin values to something else will make the screen start moving at the right time.
  • 6/13/2009 1:27 AM In reply to

    Re: Adding vertical scrolling to Platformer starter kit

    If you want to add vertical parallax aswell, make these quick changes;

    // In level.draw change the two instances of this; 
    layers[i].Draw(spriteBatch, cameraPositionX); 
    // to this; 
    layers[i].Draw(spriteBatch, cameraPositionX, cameraPositionY); 
     
    // In layers.draw, change this; 
    public void Draw(SpriteBatch spriteBatch, float cameraPositionX) 
    // to this; 
    public void Draw(SpriteBatch spriteBatch, float cameraPositionX, float cameraPositionY)  
     
    // under this; 
    float x = cameraPositionX * ScrollRate;  
    // add this; 
    float y = cameraPositionY * ScrollRate; 
     
    // changes this; 
            spriteBatch.Draw(Textures[leftSegment % Textures.Length], new Vector2(x, 0.0f), Color.White);  
            spriteBatch.Draw(Textures[rightSegment % Textures.Length], new Vector2(x + segmentWidth, 0.0f), Color.White); 
    // to this; 
            spriteBatch.Draw(Textures[leftSegment % Textures.Length], new Vector2(x, -y), Color.White);  
            spriteBatch.Draw(Textures[rightSegment % Textures.Length], new Vector2(x + segmentWidth, -y), Color.White); 
Page 1 of 2 (38 posts) 1 2 Next > Previous Discussion Next Discussion