1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. If you are going to register on XLNation, please make sure you do not use a proxy server.
    If you use a proxy server your registration will most likely get blocked due to spammers and hackers using proxy servers to hide their real IP address.

    If your using your home or work IP address and have not received your registration email, check your spam folder.
    PLEASE DO NOT ASK TO HAVE YOUR ACCOUNT DELETED IF YOU HAVE POSTED IN THE FORUM! If so we do not delete accounts due to the mess it can make on the forum.
    Dismiss Notice

Tutorial How to create a 15M Esplanade Road in CitiesXL V1.1

Detailed guide with 2 example 3dsmax scenes and supporting resources

  1. PaulJChris
    This is a detailed guide to how to make these Esplanade Roads without holes at intersections.

    Credit to Altiris for the original design, this guide uses his unpublished mod as a basis for a template.

    Included in the ZIP file are:

    A template data folder with all required files
    2 example 3dsmax scenes with supporting textures
    A detailed guide to model creation in Microsoft Word format
    A patch file for a demonstration model showing how the various pieces are displayed within the game.
    A photoshop PSD tarmac texture for use in your texture bitmaps.

    I hope this will inspire some of you to create some more waterfront designs to provide further variety.

    TEXT OF TUTORIAL REPRODUCED BELOW:

    How to create a 15M Esplanade Road with no gaps at intersections.

    By PaulJChris November 2014


    cxl_screenshot_harbour town_19.jpg


    This guide is based upon the unpublished 15M Esplanade Road produced by Altiris and will show you how to produce your own Esplanade Road based upon this template.

    It is assumed that you are familiar with the process of bringing a building into the game and you have a reasonable working knowledge of 3dsmax.

    Required Resources:

    Autodesk 3dsmax2012
    Paint.net or any image software capable of read/writing files in .dds format
    PakunPak
    Notepad ++

    Time Required: 7 hours
    Skill Level: Intermediate


    Contents: Zip file containing:
    This guide in Word format
    A template data folder which you can overwrite
    An untextured sample 3dsmax scene with all the components correctly placed
    A fully textured sample 3dsmax scene with all the components correctly placed
    A Photoshop tarmac texture lifted from Altiris’ files
    A tutorial .patch file which shows how the components fit together and how the game engine displays them



    CONTENTS:
    A: RENAMING THE DATA FILES
    B: DESIGNING THE MODELS
    C: MAJOR DESIGN DECISION
    D: BEGINNING YOUR MODEL IN 3dsMAX
    E: SOME TIPS THAT MAY BE USEFUL TO NEW USERS OF MAX
    F: SUGGESTED WORKFLOW
    G: FINISHING TOUCHES

    A: RENAMING THE DATA FILES
    Step1

    Create a project folder on your desktop named “MyEsplanadeRoad” or similar

    Step2

    Unpack the Zip file and copy the folder called “data” into your newly created project folder.

    Step3

    Rename the files within this data folder. In order for your mod not to overwrite the roads made by others it is important that the filenames are distinct. Choose a 2 letter designator for your mod.

    Go through each of the folders and subfolders in turn renaming each and every file/folder with Esplanade6 in the title to EsplanadeXX ,where XX is your chosen designator. There are a lot of files to rename, use a bulk file renaming utility to automate this process if your version of Windows does not include this. Alternatively, do this by hand if you are bored.

    Step4

    Rename the contents of the files. It is equally important to rename the contents of the files to be distinct. Choose a different 4 letter designator for your mod.

    Using the “Replace within files” option of Notepad++ on the entire data directory (with subfolders and hidden folders enabled) replace the following in the order below:

    Find in Files.png
    find in files 2.png


    5/ Replace “esp6” with “XXXX” your 4 letter designator chosen above. This will change all the names of the .sgbin files referenced to within the files.

    6/ Replace “Esplanade6” with “EsplanadeXX” where XX is the 2 letter designator that you chose in step3 above. This will change all references to filenames within the files to match those renamed in step3 above.

    7/ Replace “StyleEU” with StyleXXXXX” where XXXXX is a style tag designator chosen by you. This reason for this is to allow your custom mod to appear in the construction menu without overwriting other roads. It is better if you can to use an existing tag included with the User Interface Mod (UIM) V1.79.9 or later. If you have previously made any custom bridges or other mods that require a custom tag, you can safely re-use them here. Here is a list of the suitable custom bridges tags already included within the UIM V1.79.9 with the manual addition of my seawall tags:

    tags list.png

    If your chosen tag is not your own, then please ask the original author for permission to re-use their tag before publishing your mod. The point of re-using old tags is that you do not have to provide players with a separate updated tags file for them to be able to use your .patch file, provided they have UIM V1.79.9 or later installed , your custom road will work in their game without causing a missing tags crash on start-up.

    8/ Optional, not required if you are happy with the default description.
    Do another Notepad++ Replace Within Files for the text “Esplanade6 road” and “Road with a pedpath all along.“ with appropriate text to describe your mod. This will update the localization files with the correct text to describe your road.

    Good. That’s all the files renamed. All you now need to do is to produce the 13 required 3d models in 3dsmax with the filenames suitably amended with your chosen 4 letter designator.

    B: DESIGNING THE MODELS:

    This design is based upon a 15M wide road (produced by the game files, you do not need to model the road) , a 7.5M wide pavement on the seafront side of the road and a 2.5M standard pavement width on the other side. These settings can be changed in the Class files by doing another Notepad++ Find within Files search for the line:

    <_PavementWidth>7.5,2.5</_PavementWidth> and changing the pavement widths. The first one is the waterside pavement width, the 2nd is the far side pavement. It is not recommended to change the 2nd one due the need to be compatable with the in game roads at intersections. Bear in mind if you change the pavement width then all the file names will also need to be changed in the list below.


    Here is the list of the 13 component .sgbins required for your mod:

    sgbin list.png

    Note the naming convention carefully. A comma is used instead of a decimal point in the file names. So “7,5” means 7.5M . You can see that the filenames make a bit more sense. It is absolutely vital to maintain this strict naming convention exactly. It may surprise you to note that only 2 of these files are referenced directly from the .layout files, the others are found by the game engine by searching for files that adhere strictly to this file naming convention.

    You may notice there are “r_pv_” and “r_cr” prefixes , these are for straight pieces and for corners. The “_cr” files have to be able to handle the various permutations of a 2.5M pavement meeting a 7.5M .There are 4 of these.
    The “_rb” designated files are the ones used when junctions are detected by the game engine.

    The “_pavementfound” files are used to display the vertical part of the wall showing from street level (0 in the Z axis in 3dsmax) down to the waterline, or the front wall. These are simple textured planes in the default game files and are displayed exactly 7.5M horizontally (as defined in the class file referenced above) from the edge of the road piece. They can extend down as far as you like, the default in game files for example extend down by 30M. This means that your in game Esplanade Road can be up to 30M high before you can see “underneath it” when placing it in the game. You can also use these files to display railings and walls above ground level which will be placed along the same axis as the front wall with the point of reference also being 7.5M from the edge of the road.

    The next slide shows the first 6 of the above files in representative format with the positive X axis the bright red line , and the positive Y axis represented by the bright green line as shower in the Viewer. Each file is not that hard to make, and many of them are copies with slightly different positioning, however precise placement within the 3dsmax scene is required.


    page1.png


    Open 3dsmax and load my example scene which shows all 13 pieces so you can quickly compare them and see the various pieces that you need to make for your mod and how they need to be positioned in the scene. The default scene is a bit of a mess with all 13 models showing at once so use the layers control to hide all the other pieces apart from the ones you are interested in viewing. The tutorial pieces have been textured with colours to aid recognition when this demo model is viewed in the game.

    r_template_dif.png

    NB; The 13th model on the list above r_rb_pavementfoundesp6_07,5x07,5x40 is represented by multiple colours because I didn’t leave enough space on the bitmap but it is distinctive enough to show where it is placed in the game.

    all 13 models.png

    Add the patch file XLN_PJC_15M Esplanade Wall Template V1.0.patch included in the ZIP file to your mods folder and fire up the game. In a test city , draw a figure of 8 with the demo Esplanade Road to see how the pieces interact and are displayed by the game engine. Note how some of the pieces are considerably bent by the engine which you need to consider when designing your model and your textures.

    cxl_screenshot_harbour town_19.jpg



    Some design considerations. All 13 models can be run from the same texture bitmap. Using 1024 x 1024 looks good but 512 x 512 can also be used and will reduce the load on the game engine. The 7.5m x 7.5m corner piece (or any of the other corner pieces if you want to model fancy looking corners) needs to include a small section of tarmac road to match as closely as possible the in game road tarmac texture. You need to budget enough bitmap space for this. I have included a photoshop sample tarmac texture lifted from Altiris’ mod which is based upon the in game tarmac texture which you can import into your bitmap to save some time. My sample model has also modelled the rounded curb , feel free to use this model if you wish.

    When designing your pieces, it is highly recommended that you divide the 40M length in 8 vertical divisions of 5M each. This is because when the game engine bends your model around corners, it does so at 5M intervals. If you make sections of you model and any kind of railing/posts to match at 5M intervals, it will look much better and more natural when it is displayed around corners in game.

    C: MAJOR DESIGN DECISION:

    You now need to decide whether to model the whole 7.5m pavement piece as one model which will include the front wall and any railings/walls etc or whether you wish to split the model into components.

    If you model the whole piece as a complete model then the 3 “pavementfound” pieces are redundant in the design as you will have already included the front wall in your model. These files still have to be included however, and will need to be placeholders consisting of one tiny textured plane positioned somewhere out of view in the scene.

    OR

    Model the 7.5M pavement piece as a simple 40 x 7.5 x 0.6 block. Then use the “pavementfound” pieces to model the front wall and any fancy stuff you want above street level such as a retaining wall or railings. The advantage of this approach is that it is much easier and faster to make the component pieces and line them up with the required precision if you are just using the simple box pavement pieces.

    My recent published 15M roads used the all in one approach mainly because I was adapting them from an existing earlier bridge model which was all modelled as one piece. If you are designing from scratch, the decision is completely yours. Either way, all 13 files have to be made, it’s your choice as designer as to how you allocate the components of your model to the game resources available to display them. The template scene uses the component approach but I have also included my source files for one of my published 15M roads so you can review the all-in-one approach.

    D:BEGINNING YOUR MODEL IN 3dsMAX

    Start a new Max scene or work within my template scene if it makes it easier for you.

    component pieces picture.png

    Create a new object box with dimensions 40m x 2.5M x 0.6m using 8 subdivisions. Texture this object completely and name it 2.5M pavement piece. For the moment the placement in the scene does not matter.

    Create another new object box with dimensions 40m x 7.5m x 0.6m using 8 subdivisions. Texture this object completely and name it 7.5M pavement piece. If you are going for the all in one design approach proceed to add the front wall, railings and any other details and texture it completely.

    OR

    If you are going for the separate component design approach create another separate object based upon a 40m x 30M plane with 8 subdivisions to represent the front wall, then add any other desired details not already included in the 7.5M pavement piece above. Name this object Front wall.

    So you should now have either 2 or 3 (depending upon your chosen design approach) fully textured component pieces in your scene. You will now use these objects in combination to create all 13 required models.

    Proceed down the list of sgbins one at a time and produce your own copy of them using your components matching their positioning to my example exactly within the max scene. See the following positioning notes for each model. Note that several are identical and can be cloned easily.

    Notes for each Model:
    r_cr_pavementesp6_02,5x02,5x60:
    r_cr_pavementesp6_02,5x02,5x60.png

    r_cr_pavementesp6_02,5x07,5x60:
    r_cr_pavementesp6_02,5x07,5x60.png

    r_cr_pavementesp6_07,5x02,5x60:
    r_cr_pavementesp6_07,5x02,5x60.png

    r_cr_pavementesp6_07,5x07,5x60:
    r_cr_pavementesp6_07,5x07,5x60.png

    r_cr_pavementfoundesp6_07,5x07,5x60:
    r_cr_pavementfoundesp6_07,5x07,5x60.png

    r_fd_pavementfoundesp6_07,5x40x60:
    r_fd_pavementfoundesp6_07,5x40x60.png

    r_pv_pavementesp6_02,5x40x60:
    r_pv_pavementesp6_02,5x40x60.png

    r_pv_pavementesp6_07,5x40x60:
    r_pv_pavementesp6_07,5x40x60.png

    r_rb_pavementesp6_02,5x02,5x60:
    r_rb_pavementesp6_02,5x02,5x60.png



    r_rb_pavementesp6_07,5x02,5x40:
    r_rb_pavementesp6_02,5x07,5x40.png

    r_rb_pavementesp6_07,5x07,5x40:
    r_rb_pavementesp6_07,5x02,5x40.png

    r_rb_pavementfoundesp6_07,5x07,5x40:
    r_rb_pavementesp6_07,5x07,5x40.png
    r_rb_pavementfoundesp6_07,5x07,5x40.png

    E: SOME TIPS THAT MAY BE USEFUL TO NEW USERS OF MAX:

    When manipulating your objects around the scene to get them into the correct position it is recommended to use typed in adjustments for maximum accuracy. Right click on move icon or use the co-ordinate positioning boxes at the bottom of the screen. Small errors in positioning result in unsightly “gaps” appearing at the junction of 2 pieces when viewed in the game.

    Always make sure your pivot remains set at 0,0,0. in the max scene otherwise your model will not appear in the game at the correct position. Please bear in mind that manipulating an object at the sub- object level (by selecting all vertices or edges) does not move the pivot, but moving at whole object level DOES move the pivot.

    Bear in mind that if you use the 3dsmax “Mirror” function to create your pieces as you will be tempted to do as some of the pieces are simple mirror image copies of others, please make sure you use the “reset X form “ modifier followed by selecting all polys in the object using CTRL-A and then the “flip” option. This is very important otherwise your model will appear “inside out” after using the 3ds max mirror tool. Double check your pivot position is correct after using the mirror tool.
    Reset XFrom.png

    Due to the non intuitive spelling of the file names and their length, it is highly recommended that you use copy and paste to name your models rather than trying to type them manually. The risk of making a typo in these complicated file names is high and it will crash your mod if you get one of them wrong.

    F: SUGGESTED WORKFLOW:

    In your data/gfx/building folder within your project folder , create a temporary subfolder to save your exported .sgbin models in as you create them.

    Outside of 3dsmax, open the first .sgbin in the list using the Viewer. If your system does not recognise the .sgbin file type, you need to allocate it to the Artist Tool Suite viewer using file association menu of Windows. Alternatively, if you are working within my template scene, use the layer menu to display the first model on the list to use as a reference.

    Clone the starting models you created earlier as required and manipulate them into the correct position to match that of the template. Using the layer tool hide your original starting resource objects and my template object.

    Combine the correctly positioned and cloned object(s) into one object using Attach if required. Rename this new object using copy and paste from either the filename in the list of sgbins in the data folder or from my example object in the max scene. When you paste in the filename, remember to replace “esp6” in the filename with your own chosen 4 letter designator from step4 above to the filename.

    Weld the joints if applicable and add extra modelling on the corner pieces to complete them as required.

    Open the materials editor in Max and make sure the shader type is set to “road” under the parameters setting.

    Add a bump map to the correct slot. Due to the quirks of the road shader , if you do not add a bump map then your model will display with loads of weird shadows in the viewer which you will spend endless pointless hours trying to eradicate in 3dsmax when the solution lies simply in adding a bump map. You have been duly warned.

    Rename the material to match the model name using copy and paste. Make sure it has the correct 4 letter designator in it to exactly match the model name.

    Hide all models from the scene using the layers tool apart from the one you are working on.

    Export the model to the viewer. Save it in the temporary folder you created earlier within the data/gfx/road subfolder of your project mod folder. Delete the corresponding reference .sgbin file of the same name. This way enables you to systematically work down the list always choosing the top of the list as the next model to create. It is otherwise very easy to pick the wrong file name as they all look very similar at a glance.

    Repeat the above for all 13 models.

    You should end up with 13 correctly named .sgbin files in the temporary folder you created earlier and no reference files. Copy these 13 files from the temporary folder into the main folder and delete the now empty temporary folder as it is no longer required.

    G: FINISHING TOUCHES:

    Open up paint.net and create a 128 x 128 pixel image to be used as the icon which will be displayed in the construction menu for your game. Save this file in .dds format and overwrite the existing file in data/interface/ddstexture/buildings subfolder within your projects folder.
    Run another Notepad++ Replace within Files for the text:


    <DefaultHeightOffset>14.0</DefaultHeightOffset> and replace this with

    <DefaultHeightOffset>X</DefaultHeightOffset> where X is your desired default height placement above the ground/waterline in metres within the game.


    Open PakunPak and point the source directory at the data folder within your project folder. Set the destination folder to your mods folder , giving your patch file a suitable name such as XLN_XXX_ MyEsplanadeWall V1.0 where XXX are your initials.

    Fire up the game and test out your new road in the game! The menu location specified by these template files is Custom Content, Individual Placement and Roads

Recent Updates

  1. Amendments to the Tutorial text

Recent Reviews

  1. Drazicdesign
    Drazicdesign
    5/5,
    Version: V1.1
    It is excellent tutoriel, I shall like one day making a success of a mod as of this one. Thank you for your work!
  2. Altiris
    Altiris
    5/5,
    Version: V1.1
    Wow, just stumbled across this, awesome work writing it all up.
  3. Monty
    Monty
    5/5,
    Version: V1.1
    Thanks for these amazing tutorials. If it wasn't for them all this stuff would stay as a mystery for most of us :D
  4. Mr.X²
    Mr.X²
    5/5,
    Version: V1.1
    thanks for taking your time and sharing your knowledge
  5. luis diogo
    luis diogo
    5/5,
    Version: V1.1
    Thanks for taking the time into creating such a detailed tutorial Paul.
    Not only you have given us a great collection but you also shared a template which will eventually lead to some nice alternatives.