web/workshop/guide.html

   1 <!DOCTYPE html>
   2 <html>
   3  <head>
   4   <style type="text/css">
   5    body{
   6     margin:40px auto;
   7     max-width:650px;
   8     line-height:1.6;
   9     font-size:18px;
  10     color:#444;
  11     padding:0 10px
  12    }
  13    h1,h2,h3{line-height:1.2}
  14   </style>
  15  </head>
  16
  17  <body>
  18   <h1>Workshop Guide - Custom boards</h1>
  19   <p>This guide covers creating a custom board model using blender and an image
  20   editor. Since theres not many of us here at the moment, feel free to contact
  21   me at <i>hgodden00@gmail.com</i> for any help.</p>
  22
  23   <h2>0. Things you need</h2>
  24   <p>- Skaterift content is made using Blender. You can get the latest version
  25   of <a href="https://store.steampowered.com/app/365670/Blender/">
  26      Blender from steam</a>, this guide is for version 3.4 and above.<br>
  27   - <a href="https://www.gimp.org/">GNU Gimp</a> or similar image editor.<br>
  28   - Download the <a href="custom_board.zip">custom_board.zip</a><br>
  29   - An installed copy of Skaterift of course.</p>
  30   <hr>
  31
  32   <h2>1. Installing exporter addon</h2>
  33   <p>Skip this step if you've already done it before.
  34   <a href="addon.html">Guide on how to install the exporter addon for
  35   Blender</a>
  36   </p>
  37   <hr>
  38
  39   <h2>2. Configuring the template</h2>
  40   <p>Firstly, Open the .blend file from the board_template zip.<br>
  41   <br>
  42   Open the side panel in the 3D Viewport, and find the Skaterift tab, and in
  43   that menu, the <b>Export tab</b><br>
  44   <br>
  45   <b>Export Dir</b> must be set to the game folder, which ends in
  46   <i>/steamapps/common/skaterift<b>/</b></i><br>
  47   <b>NOTE:</b> the path must have a
  48   <b>/</b> at the end, else things will break.<br>
  49   <br>
  50   Wer're now setup to go, but an optional step here is to create one from
  51   scratch. If you want to do this, <a href="board_spec.html">take a look at the
  52   detailed board specification</a> for how to set it up. If its your first one,
  53   you probably want to skip this step.</p>
  54   <hr>
  55
  56   <h2>3. Edit the texture</h2>
  57   <p>Next step is to customize the artwork, in the template folder there is a
  58   texture which you can edit. There is also the original .xcf file which you can
  59   open using <a href="https://www.gimp.org/">GNU Gimp</a>, or a similar image
  60   editor.<br>
  61   <img src="guide2.jpg" width="100%"/>
  62   Now you can change the texture on the material to your own file, and see how
  63   it looks in Blender.
  64   <img src="guide1.jpg" width="100%"/>
  65   </p>
  66   <hr>
  67
  68   <h2>4. Compile the model</h2>
  69   <p>In the <b>Outliner</b> panel in the top right, rename the collection name,
  70   called <i>boards/template/board.mdl</i>. You should replace only the word
  71   <b></i>template</i></b>. The collection name is the path it will export the
  72   model, relative to the directory we set earlier.<br>
  73   <br>
  74   Now in the Skaterift Export tab, press Compile This collection. <b>NOTE:
  75   Blender will freeze for a second or so, since the export script has to
  76   compress the texture file.</b><br>
  77   </p>
  78   <hr>
  79
  80   <h2>5. Test it out in-game</h2>
  81   <p>If everything is good, you should be able to visit the board shop and it
  82   will be loaded in there. If not, try reopen it. If still not not, then
  83   something broke, and there is no contingency plan here, sorry.<br>
  84   </p>
  85   <hr>
  86
  87   <h2>6. Upload via the Workshop tool</h2>
  88   <p>From the menu of Skaterift, you can open the
  89   workshop tool. From here, fill in the folder name which houses the board. This
  90   is relative to the game folder just like the export tool. You will know its
  91   correct when you see your board after pressing the load button.<br>
  92   <img src="guide3.jpg" width="100%"/>
  93   <br>
  94   You can customize the preview by dragging around the image, left, right and
  95   middle mouse buttons do different controls.
  96   From here, just fill in the information like the title and description, and
  97   press submit.
  98   </p>
  99  </body>
 100 </html>