ソースを参照

Updated editor overwiew and scene editor details to Ed2.

Mikael Säker 7 年 前
コミット
3a7c61852f

+ 2 - 1
.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
 build
 lib/google-cloud-sdk/
-node_modules/
+node_modules/
+deps/

+ 25 - 45
docs/en/manuals/editor.md

@@ -1,6 +1,6 @@
 ---
 title: Editor overview
-brief: This manual gives an overview on how the editor look and works, and how to navigate in it.
+brief: This manual gives an overview on how the Defold editor look and works, and how to navigate in it.
 ---
 
 # Editor overview
@@ -11,65 +11,45 @@ The editor allows you to browse and manipulate all files in your game project in
 
 ## The scene editor
 
-Defold contains a number of editors, but the Scene Editor is the one used the most. All Game Objects and Collections, as well as some component types, are created and edited in this editor.
+The *Scene Editor* is used to create and edit game objects with their components and collections.
 
-![Select object](images/scene_editing/scene_editing_select.png)
+![Select object](images/editor/select.jpg)
 
-## Selecting objects
+Selecting objects
+: Click on objects in the main window to select them. The rectangle surrounding the object in the editor view will highlight green to indicate what item is selected. The selected object is also highlighted in the *Outline* view.
 
-Click on objects in the main window to select them. The rectangle surrounding the object in the editor view will highlight green to indicate what item is selected.
+  You can also select objects by:
 
-You can also select objects by:
+  - <kbd>Click and drag</kbd> to select all objects inside the selection region.
+  - <kbd>Click</kbd> objects in the Outline view.
 
-- <kbd>Click and drag</kbd> to select all objects inside the selection region.
-- <kbd>Click</kbd> objects in the Outline view.
+  Hold <kbd>Shift</kbd> or <kbd>⌘</kbd> (Mac) / <kbd>Ctrl</kbd> (Win/Linux) while clicking to expand the selection.
 
-Hold <kbd>Shift</kbd> or <kbd>⌘</kbd> (Mac) or <kbd>Ctrl</kbd> while clicking to expand the selection.
+The move tool
+: ![Move tool](images/editor/icon_move.png){.left}
+  To move objects, use the *Move Tool*. You find it in the toolbar in the top right corner of the scene editor, or by pressing the <kbd>W</kbd> key.
 
-## The Move tool
+  ![Move object](images/editor/move.jpg)
 
-To move objects, use the *Move Tool*. It is accessible through the menu <kbd>Scene ▸ Move Tool</kbd> or by pressing the <kbd>W</kbd> key.
+  The selected object shows a set of manipulators (squares and arrows). Click and drag the green center square handle to move the object freely in screen space, click and drag the arrows to move the object along the X, Y or Z-axis. There arn also square handles for moving the object in the X-Y plane and (visible if rotating the camera in 3D) for moving the object in the X-Z and Y-Z planes.
 
-![Scene menu](images/scene_editing/scene_editing_scene.png)
+The rotate tool
+: ![Rotate tool](images/editor/icon_rotate.png){.left}
+  To rotate objects, use the *Rotate Tool* by selecting it in the toolbar, or by pressing the <kbd>E</kbd> key.
 
-The selected object now shows three manipulation points that are used to move the object. Click and drag in the green square to move the object freely:
+  ![Move object](images/editor/rotate.jpg)
 
-![Move object](images/scene_editing/scene_editing_move.png)
-
-You can also move the object along just one selected axis by clicking and dragging along the corresponding arrow. Clicking and dragging on the red arrow allows movement on the *X* axis only whereas clicking and dragging on the green arrow allows movement on the *Y* axis only.
-
-Move against the grid
-: Hold <kbd>Shift</kbd> when using the move tool to snap the center of the game object to the grid. The default grid size is set to 100. If you wish to alter the size of the grid, you can specify a custom grid size in the preferences. Select <kbd>Defold Editor ▸ Preferences...</kbd>
-
-    ![Grid size](images/scene_editing/scene_editing_grid.png)
-
-## Rotate Tool
-
-The *Rotate Tool* is accessible through the menu <kbd>Scene ▸ Rotate Tool</kbd> or by pressing the <kbd>E</kbd> key.
-
-![Rotate object](images/scene_editing/scene_editing_rotate.png)
-
-This tool consists of three handles that you can manipulate. If you are working on 2D objects, you would probably only want to use the handle that rotates around the *Z* axis, which is the blue circle around the object. Click and drag on the circle to rotate the object.
-
-If you want to rotate around the *X* or *Y* axis, click and drag on the green and red circles. Since the view is peripendicular to those axis, the circles only appear as two lines crossing the object: a green horizontal one and a red vertical.
-
-## Scale Tool
-
-The *Scale Tool* is accessed through the menu <kbd>Scene ▸ Scale Tool</kbd> or by pressing the <kbd>R</kbd> key.
-
-![Scale object](images/scene_editing/scene_editing_scale.png)
-
-Click the red or green handle and drag to scale the object. Game objects can be scaled freely along the *X* and *Y* axis, causing the object to stretch or compress visually.
+  This tool consists of four circular manipulators. An orange manipulator that rotates the object in screen space and one for rotation around each of the X, Y and Z axes. Since the view is peripendicular to the X- and Y-axis, the circles only appear as two lines crossing the object.
 
 ::: sidenote
-Currently, sprites can not be scaled in the editor. They do, however, support *runtime* free-form scaling. See the [2D Graphics documentation](/manuals/2dgraphics/) for details.
+Currently, sprite components can not be individually scaled in the editor, you have to scale the game object holding the sprite. Sprites do, however, support *runtime* free-form scaling. See the [2D Graphics documentation](/manuals/2dgraphics/) for details.
 :::
 
-## Selecting what is showing in the Scene Editor
-
-It is often convenient to be able to disable the visual rendering of certain types of information in the Scene Editor, especially when you are working on a complicated collection with lots of objects containing physics, triggers and layers upon layers of graphical assets. The Scene Editor allows you to enable and disable the rendering of different types of information in the editor. Select the <kbd>Scene ▸ Show</kbd> submenu and then chose what you want to see in the editor.
+The scale tool
+: ![Scale tool](images/editor/icon_scale.png){.left}
+  To scale objects, use the *Scale Tool* by selecting it in the toolbar, or by pressing the <kbd>R</kbd> key.
 
-![Showing information](images/scene_editing/scene_editing_show.png)
+  ![Scale object](images/editor/scale.jpg)
 
-The choices you make are stored in the editor and apply to all Scene Editor instances. Your choices are rememberered between sessions too so if you close the Defold editor down and start it up the next day, your Show settings will be intact.
+  This tool consists of a set of square handles. The center one scales the object uniformly in all axes (including Z). There also one handle for scaling along each of the X, Y and Z axes and one handle for scaling in the X-Y plane, the X-Z plane and the Y-Z plane.
 

BIN
docs/en/manuals/images/editor/icon_move.png


BIN
docs/en/manuals/images/editor/icon_rotate.png


BIN
docs/en/manuals/images/editor/icon_scale.png


BIN
docs/en/manuals/images/editor/move.jpg


BIN
docs/en/manuals/images/editor/rotate.jpg


BIN
docs/en/manuals/images/editor/scale.jpg


BIN
docs/en/manuals/images/editor/select.jpg


+ 18 - 11
docs/en/shared/editor-views.md

@@ -4,12 +4,12 @@ The Defold editor is separated into a set of panes, or views, that display speci
 
 ![Editor 2](../shared/images/editor2_overview.png)
 
-The old editor looks different but works very much the same, only with less functionality.
+The *Assets* view (*Project Explorer* in editor 1)
+: Lists all the files that are part of your project. Click and scroll to navigate the list. All file oriented operations can be made in this view:
 
-![Editor 1](../shared/images/editor1_overview.png)
-
-The *Assets* view / *Project Explorer* (editor 1)
-: Lists all the files that are part of your project. You click and scroll to navigate the list. All file oriented operations can be made in this view:
+::: sidenote
+Editor 1 looks different but works very much the same, only with less functionality.)
+:::
 
    - <kbd>Double click</kbd> a file to open it in an editor for that file type.
    - <kbd>Drag and drop</kbd> to add files from elsewhere on your disk to the project or move files and folders to new locations in the project.
@@ -17,14 +17,21 @@ The *Assets* view / *Project Explorer* (editor 1)
 
 The *Editor* view
 
-: The center view shows the currently open file in an editor for that file type. In all visual editors you can navigate the camera:
+: The center view shows the currently open file in an editor for that file type. All visual editors allows you to change the camera view:
+
+- Pan: <kbd>Alt + left mouse button</kbd>.
+- Zoom: <kbd>Alt + Right button</kbd> (three button mouse) or <kbd>Ctrl + Mouse button</kbd> (one button). If your mouse has a scroll wheel, it can be used to zoom.
+- Rotate in 3D: <kbd>Ctrl + left mouse button</kbd>.
+
+::: sidenote
+Panning in editor 1: <kbd>Alt + Middle button</kbd> (three button mouse) or <kbd>Ctrl + ⌘ + Mouse button</kbd> (one button mouse, Mac) or <kbd>Ctrl + Alt + Mouse button</kbd> (one button mouse, Windows/Linux). You can change the mouse type in the application preferences, under *Defold / Scene Editor* and *Mouse Type*.
+
+Rotating in 3D is not possible in editor 1.
 
-   - Pan: <kbd>Alt + left mouse button</kbd>.
-   - Pan (editor 1): <kbd>Alt + Middle button</kbd> (three button mouse) or <kbd>Ctrl + ⌘ + Mouse button</kbd> (one button mouse, Mac) or <kbd>Ctrl + Alt + Mouse button</kbd> (one button mouse, Windows/Linux). You can change the mouse type in the application preferences, under *Defold / Scene Editor* and *Mouse Type*.
-   - Zoom: <kbd>Alt + Right button</kbd> (three button mouse) or <kbd>Ctrl + Mouse button</kbd> (one button). If your mouse has a scroll wheel, it can be used to zoom.
-   - Rotate in 3D (editor 2): <kbd>Ctrl + left mouse button</kbd>.
+The menu <kbd>Scene</kbd> contains the tools to move, rotate and scale the currently selected object, options to frame the view to the current selection and to realign the camera.
+:::
 
-   The menu <kbd>Scene</kbd> contains tools to move, rotate and scale the currently selected object, options to frame the view to the current selection and to realign the camera. Editor 2 contains a toolbar in the top right where you find the move, rotate and scale tools.
+There is a toolbar in the top right corner of the scene view where you find object manipulation tools: *Move*, *Rotate* and *Scale*.
 
 The *Outline*
 : This view shows the content of the file currently being edited, but in a hierarchial tree structure. The outline reflects the editor view and allows you to perform operations on your items:

+ 4 - 38
docs/en/tutorials/war-battles.md

@@ -5,13 +5,7 @@ brief: In this tutorial you will create the embryo of a small shooter game. This
 
 # War battles tutorial
 
-This tutorial goes through the steps needed to create a small playable game embryo in Defold. You do not need to have any prior experience with Defold, but if you have done some programming in Lua, Javascript, Python or similar, that will help.
-
-::: important
-We are in the process of transitioning to Defold editor 2, which is currently in alpha. This guide is written for the new editor 2, but most details apply to editor 1 as well. You are very welcome to [try the new editor](https://www.defold.com/editor-two/).
-:::
-
-To get an idea about what you are about to build, you can try the result here:
+This tutorial goes through the steps needed to create a small playable game embryo in Defold. You do not need to have any prior experience with Defold, but if you have done some programming in Lua, Javascript, Python or similar, that will help. To get an idea about what you are about to build, you can try the result here:
 
 <div id="game-container" class="game-container">
     <img id="game-preview" src="//storage.googleapis.com/defold-doc/assets/war-battles/preview.jpg"/>
@@ -61,42 +55,14 @@ Before you begin, you need to create an empty project on the Defold Dashboard an
 
    ![import](images/war-battles/import_project.png)
 
-The editor now opens.
+The editor now opens. If you are new to Defold, take a moment to familiarize yourselfs with the various views in the editor.
 
-## Editor overview
+:[overview](../shared/editor-views.md)
 
-Let's take a moment to familiarize ourselves with the various views in the editor.
+## Editor overview
 
 ![editor overview](images/war-battles/editor_overview.png)
 
-1. The *Assets* view lists all the files that are part of your project. You click and scroll to navigate the list. All file oriented operations can be made in this view:
-
-    * <kbd>Double click</kbd> a file to open it in an editor for that file type.
-    * <kbd>Drag and drop</kbd> to move files and folders to new locations.
-    * <kbd>Right click</kbd> to open a pop up menu from where you can create new files or folders, rename, delete, track file dependencies and more.
-
-2. The *Editor* view in the center shows the currently open file in an editor for that file type. A toolbar is visible in the top right, including tools to move, rotate and scale currently selected items. In all visual editors you can alter the camera view:
-
-    * <kbd>Scroll</kbd> to zoom in and out.
-    * <kbd>Alt + left mouse button</kbd> to pan around.
-    * <kbd>Ctrl + left mouse button</kbd> to rotate in 3D.
-    * The <kbd>View</kbd> menu includes tools to frame the view to the current selection and to realign the camera.
-
-3. The *Outline* shows the content of the file currently being edited, but in a hierarchial tree structure. The outline reflects the editor view and allows you to perform many operations on your items:
-
-    * <kbd>Click</kbd> to select an item. Hold <kbd>Shift</kbd> or <kbd>Option</kbd> to expand the selection.
-    * <kbd>Drag and drop</kbd> to change the hierarchy.
-    * <kbd>Right click</kbd> to open a pop up menu from where you can add items, delete selected items etc.
-
-4. The *Properties* view shows properties associated with the currently selected item, like *Position*, *Rotation*, *Animation* etc, etc.
-
-5. The *Console* shows any error output or purposeful printing that you do while your game is running. Alongside the console are tabs containing the *Curve editor* which is used when editing curves in the particle editor, the *Build errors* view that shows build errors, and the *Search results* view that displays search results.
-
-6. The *Changed files* view lists any files that have been changed, added or deleted in your project. By synchronizing the project regularly you can bring your local copy in sync with what is stored in the project Git repository, that way you can collaborate within a team, and you won't lose your work if misfortune strikes. Some file oriented operations can be performed in this view:
-
-    * <kbd>Double click</kbd> a file to open it in a suitable editor, just like in the assets view.
-    * <kbd>Right click</kbd> a file to open a pop up menu from where you can open a diff view, revert all changes done to the file, find the file on the filesystem and more.
-
 ## Cleaning the project
 
 The empty project template is not 100% empty so we should fix that: