User Tools

Site Tools


en:tutorials:tools:inkscape_to_orx

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
tutorials:community:sausage:inkscape_to_orx [2015/10/28 19:26 (9 years ago)] – ↷ Page moved from en:orx:tutorials:community:sausage:inkscape_to_orx to tutorials:community:sausage:inkscape_to_orx sausageen:tutorials:tools:inkscape_to_orx [2020/08/31 06:54 (4 years ago)] (current) – ↷ Page moved from en:tutorials:community:sausage:inkscape_to_orx to en:tutorials:tools:inkscape_to_orx sausage
Line 1: Line 1:
 ====== Using the Inkscape SVG to ORX Converter ====== ====== Using the Inkscape SVG to ORX Converter ======
  
-In order to create SVG paths in Inkscape and use these as mesh VertexLists in orx, follow these steps...+===== Purpose ===== 
 + 
 +This tool allows the user to design meshes for use on Object [[en:orx:config:settings_structure:orxbody|Body Parts]] in the form of VertexLists. Box and Sphere type body parts are very straight forward and automatic. Mesh parts however, need some kind of editor to make the job easier. 
 + 
 +Inkscape is an excellent tool for creating paths on top of your texture. This tool then allows taking the native Inkscape SVG and converting the paths into config format for Orx. 
 + 
 + 
 +===== How to work with Inkscape and Convert ===== 
 + 
 +In order to create SVG paths in Inkscape and use these as mesh VertexLists in orx. You can download the converter [[http://orx-project.org/images/fbfiles/files/InkscapeToOrxMesh03.zip|here]]. Follow these steps...
  
 1. Open Inkscape 1. Open Inkscape
  
-{{ :01-open-inkscape.png |}}+{{ tutorials:tools:01-open-inkscape.png |}}
  
 2. Select File > Import to bring in a graphic that you want to create path(s) for. 2. Select File > Import to bring in a graphic that you want to create path(s) for.
  
-{{ :02-select-import.png |}}+<WRAP center round box 80%> 
 +From Inkscape 0.91 onwards, be careful to choose the right DPI for your image when importing. You'd think it best to try to use DPI "From File", however in my trials, Using "Default import resolution" (which is likely 90 DPI) is the one to use to ensure the scaling of your meshes are correct. 
 +</WRAP> 
 + 
 + 
 +{{ tutorials:tools:02-select-import.png |}}
  
 3. Your graphic will appear on the design surface in Inkscape. 3. Your graphic will appear on the design surface in Inkscape.
  
-{{ :03-import-image.png |}}+{{ tutorials:tools:03-import-image.png |}}
  
 4. Right click your graphic and select Image Properties. You need to get the graphic into the top left hand corner. Enter 0 for both X and Y. The image will snap to the top left. 4. Right click your graphic and select Image Properties. You need to get the graphic into the top left hand corner. Enter 0 for both X and Y. The image will snap to the top left.
  
-{{ :04-image-properties.png |}}+{{ tutorials:tools:04-image-properties.png |}}
  
 5. Then select the Object > Object Properties menu. We need to lock the object down to the surface. 5. Then select the Object > Object Properties menu. We need to lock the object down to the surface.
  
-{{ :05-object-properties.png |}}+{{ tutorials:tools:05-object-properties.png |}}
  
 6. Click the Lock checkbox. This way, the graphic cannot be accidentally clicked or moved while you work on your paths. 6. Click the Lock checkbox. This way, the graphic cannot be accidentally clicked or moved while you work on your paths.
  
-{{ :06-object-properties-lock.png |}}+{{ tutorials:tools:06-object-properties-lock.png |}}
  
 7. Zoom into your graphic to make it easy to work with. 7. Zoom into your graphic to make it easy to work with.
  
-{{ :07-zoom-tile.png |}}+{{ tutorials:tools:07-zoom-tile.png |}}
  
 8. Select the freehand lines tool. 8. Select the freehand lines tool.
  
-{{ :08-select-draw-lines-tool.png |}}+{{ tutorials:tools:08-select-draw-lines-tool.png |}}
  
 9. Draw a triangle. It must be drawn in a clockwise direction. So in this example, you could start on the left hand point, go up and right for the second point, then straight down for the third. This is drawing in clockwise which is required by Box2D in orx. I suggest you select the Fill and Stroke properties to have a nice bright stroke, and semi transparent fill to make it easy to visualise your triangles, squares or polygons. 9. Draw a triangle. It must be drawn in a clockwise direction. So in this example, you could start on the left hand point, go up and right for the second point, then straight down for the third. This is drawing in clockwise which is required by Box2D in orx. I suggest you select the Fill and Stroke properties to have a nice bright stroke, and semi transparent fill to make it easy to visualise your triangles, squares or polygons.
  
-{{ :09-set-triangle-one.png |}}+{{ tutorials:tools:09-set-triangle-one.png |}}
  
 10. Draw more path shapes to build up a convex ramp out of several path shapes. 10. Draw more path shapes to build up a convex ramp out of several path shapes.
  
-{{ :10-set-more-triangles.png |}}+{{ tutorials:tools:10-set-more-triangles.png |}} 
 + 
 +<WRAP center round box 60%> 
 +Very Important, all objects must be ungrouped in case they have special transforms on them. Please ungroup everything before saving. The converter will warn you if you don't. 
 +</WRAP> 
  
 11. And our final design is done. In this graphic, it will be using eight path shapes to make up the curve. Save the file somewhere as an Inkscape SVG. 11. And our final design is done. In this graphic, it will be using eight path shapes to make up the curve. Save the file somewhere as an Inkscape SVG.
  
-{{ :11-set-triangles-done.png |}}+{{ tutorials:tools:11-set-triangles-done.png |}} 
 + 
 +12. If you didn't get the converter already, get it now from: http://orx-project.org/images/fbfiles/files/InkscapeToOrxMesh03.zip and load it up. 
 + 
 +<WRAP center round box 60%> 
 +Please note the shots below are from the 0.1 version. 0.2b has more functionality but the same applies. Below will be updated in the future. 
 +</WRAP>
  
-12. Download the converter from: http://orx-project.org/images/fbfiles/files/InkscapeToOrxMesh.zip and load it up. 
  
-{{ :12-load-converter.png |}}+{{ tutorials:tools:12-load-converter.png |}}
  
 13. Browse to the SVG file and enter a Base Object Name. This name is used when outputting your orx config lines. 13. Browse to the SVG file and enter a Base Object Name. This name is used when outputting your orx config lines.
  
-{{ :13-converter-select-file-and-name.png |}}+{{ tutorials:tools:13-converter-select-file-and-name.png |}}
  
 14. Click preview to see what your output will look like or Convert to make a real conversion. If the Clipboard radio button is selected, the converted information is copied to the clipboard, otherwise you;ll be prompted to save your output file as an .INI. 14. Click preview to see what your output will look like or Convert to make a real conversion. If the Clipboard radio button is selected, the converted information is copied to the clipboard, otherwise you;ll be prompted to save your output file as an .INI.
  
-{{ :14-converter-sample-output.png |}}+{{ tutorials:tools:14-converter-sample-output.png |}}
  
  
en/tutorials/tools/inkscape_to_orx.1446085611.txt.gz · Last modified: 2017/05/30 00:50 (7 years ago) (external edit)