CS2D Mapping Tutorial: Part II

<div class="c3">
    <div class="rc">
        <h1>Tutorial: Mapping</h1>
        <h2>Parts</h2>
        <h3>Beginner</h3>
        <ul class="ulink">
            <li><a href="help_mapping.php?part=1">Part I: The Map Editor</a></li>
            <li><a href="help_mapping.php?part=2">Part II: My First Map</a></li>
            <li><a href="help_mapping.php?part=3">Part III: Mapping Guidelines</a></li>
        </ul>
        <h3>Advanced</h3>
        <ul class="ulink">
            <li><a href="help_mapping.php?part=4">Part IV: The Trigger System</a></li>
            <li><a href="help_mapping.php?part=5">Part V: Doors and Bridges</a></li>
        </ul>
    </div>
    <div class="spacer"></div>
    <div class="rc">
        <h1>Mapping - Part II: My First Map</h1>
        Okay! Now let us start with our first map!
        <ul class="udo">
            <li>Start CS2D</li>
            <li>Click the 'Editor'-button</li>
        </ul>
        Again you'll see the editor with a new blank map! That's the point where many mappers simply start to place tiles on the map - which is NOT a good idea!
        <br>Of course you can do it and it will work but you did not specify a size or a tileset or a background for your map! The size is very important so you should do that first:
        <ul class="udo">
            <li>Click the 'New Map'-button</li>
        </ul>
        This opens the following menu! (Don't be confused! I changed the values on the following screen!)
        <br><img src="img/tut/mapping09.jpg" style="padding:5px;">
        <br>Selecting the right size is important for the minimap. Your minimap will look pretty stupid when you have large unused areas in your map! Moreover it's a waste of space and memory to make a map bigger than necessary!
        <br>Our first map will be pretty small. We use a 10x10 tiles map with scrolling water as background and the 'aztec.bmp' tileset.
        <br>
        <ul class="udo">
            <li>Enter 10x10 as size</li>
            <li>Click the 'Tileset'-field and select 'aztec.bmp'</li>
            <li>Click the 'Background Image'-field and select 'water1.jpg'</li>
            <li>Enter 1x1 for scrolling speed</li>
            <li>Check the 'Scroll background like tiles'-checkbox</li>
        </ul>
        Note that the size is defined in tiles. One screen (640x480) can display a map area of 20x15 tiles (640/32 x 480/32)!
        <br>'Tileset' and 'Background Image' are both simple image files. A tileset has to be selected but the background image is not necessary.
        <br>You can also select a background color. This color is only visible if you do not use a background image. The default background color is black.
        <br>
        <br>Moreover there are some scrolling options. They allow you to scroll your background image. Of course it doesn't make sense to enter something here when you do not even use a background image!
        <br>The two numbers define how fast and in which direction your background will be scrolled:
        <br>1. Value: X axis for horizontal scrolling. Positive values: scroll to the right, negative values: scroll to the left
        <br>2. Value: Y axis for vertical scrolling. Positive values: scroll to downwards, negative values: scroll upwards
        <br>
        <br>The checkbox 'Scroll background like tiles' connects the backgrounds with the tiles. This means your background will be scrolled as well when you scroll the map.
        <br>Hint: It's hard to see the difference with a scrolling background in the editor so you should test this option in-game at the next opportunity!
        <br>
        <br>Enough about these settings! Let's click 'Create' to generate a new map!
        <ul class="udo">
            <li>Click the 'Create'-button</li>
        </ul>
        You should now see something like that:
        <img src="img/tut/mapping10.jpg" style="padding:5px;">
        <br>Note that there is a new background (which scrolls!) and that the tileset has changed! You also have a very tiny minimap now.
        <br>The area without grid is 'outside' your map. You can't set tiles in this area but you are allowed to create entities there.
        <br>
        <br>Let's scroll to the center!
        <br>
        <ul class="udo">
            <li>Use the arrow keys or W/A/S/D to scroll to the center of your map</li>
            <li><b>OR</b> Try to click at the center of your map</li>
        </ul>
        You should now see the whole map surrounded by water without grid! If not: Try again and make sure that your map has a size of 10x10 tiles!
        <br>
        <br>Now we will set our first tiles!
        <ul class="udo">
            <li>Click the 'Edit Tiles'-button</li>
            <li>Click at 'Tile #1, Wall' in the tiles list</li>
            <li>Click the 'Draw Tile by Tile'-button (Pen Tool)</li>
        </ul>
        Hint: Point at a tile in the list for a short while to see it's number + it's properties!
        <br>
        <br>Now Draw a row of tiles as you can see it on the screen! Keep one tile free at each border. You should do that on each map. It avoids problems with map shadows and makes your minimap look better!
        <br>
        <ul class="udo">
            <li>Click + Drag in the map area to draw the tile</li>
        </ul>
        <img src="img/tut/mapping11.jpg" style="float:left; padding:5px;">
        <br>That's how it should look like!
        <br>
        <br>Did it work? If you 'painted' a wrong tile:
        <br>Rightclick a tile without wall to select this tile and afterwards correct wrong tiles by left-clicking them!
        <br>
        <br>
        <br>It's not that easy to draw rectangles with the pen tools. Therefore we have the rectangle tool. It works this way: 1. click: define the first point/corner of the rectangle
        <br>2. click: define the second point/corner of the rectangle
        <br>
        <br>The rectangle will be created in the area between those two points. You can cancel the process with a right click.
        <br>After setting the first point you will see the size of the rectangle at the top of the screen. Moreover the area which will be changed is highlighted.
        <br>
        <br>We will now test the rectangle tool! Use it to create the missing three walls!
        <br>
        <br>
        <ul class="udo">
            <li>Click the 'Draw Rect of Tiles'-button (Rectangle Tool)</li>
            <li>Draw the three missing walls with 3 rectangles</li>
        </ul>
        <div align="center">
            <img src="img/tut/mapping12.jpg" style="padding:5px;">
        </div>
        Does your map look like the one on the screen? Good job!
        <br>Note that you see your big rectangle on the minimap as well!
        <br>
        <br>Two tools used. One tool left! Select the fill tool and a floor tile and afterwards fill the area in our rectangle!
        <br>
        <ul class="udo">
            <li>Click the 'Fill Area with Tiles'-button (Fill Tool)</li>
            <li>Click at 'Tile #16, Floor - Step' in the tiles list</li>
            <li>Click into the center of your map to fill it!</li>
        </ul>
        This is what your result should look like:
        <br>
        <div align="center">
            <img src="img/tut/mapping13.jpg" style="padding:5px;">
        </div>
        <br>This is the principle of setting tiles. It's really easy as you see!
        <br>
        <br>However we are not ready yet! CS2D can't work with this map because it does not know where to spawn players!
        <br>That's the point where we have to take a look at entities! Entities are used to specify certain places and areas or to put cool stuff and effects in a map.
        <br>
        <ul class="udo">
            <li>Click the 'Edit Entities'-button (light bulb)</li>
        </ul>
        You will now see a long list of entities. For our map we just need two of them: Info_T and Info_CT! They are used to tell CS2D where it can spawn players.
        <br>You can set as many of these both entities as you like - but be careful: You should place them on floor tiles inside your map only!
        <br>
        <ul class="udo">
            <li>Click at 'Info_T'</li>
            <li>Click into the top left corner of your map with a floor tile</li>
        </ul>
        That's our spawn for the bad guys! We also need some police forces to fight against them:
        <ul class="udo">
            <li>Click at 'Info_CT'</li>
            <li>Click into the bottom right corner of your map with a floor tile</li>
        </ul>
        Now we created both spawns. Congratulations! Our first map is ready and functional!
        <br>Note: If you point at one of the spawns you will see a yellow highlighted area. This area is buy zone where you can buy stuff!
        <br>
        <div align="center">
            <img src="img/tut/mapping14.jpg" style="padding:5px;">
        </div>All you need to do now is to save your map!
        <ul class="udo">
            <li>Click the 'Save Map'-button (ATTENTION: SAVE! NOT LOAD!)</li>
            <li>Enter a name like 'dm_myfirstmap'</li>
            <li>Click the 'Save'-button</li>
        </ul>
        Done! Your map has now been saved and can be tested! Have much fun playing it!
        <br>Hint: Use the prefix 'dm_' for 'Deathmatch' if your map does not contain a special goal (bombspot/hostages/VIP/flags etc.)!
        <br>
        <a href="help_mapping.php?part=3">Continue!</a>
    </div>
</div>