2
0
Mikael Säker 7 жил өмнө
parent
commit
c1c6232c19
95 өөрчлөгдсөн 564 нэмэгдсэн , 494 устгасан
  1. 27 18
      docs/en/en.json
  2. 2 243
      docs/en/manuals/2dgraphics.md
  3. 2 49
      docs/en/manuals/3dgraphics.md
  4. 98 0
      docs/en/manuals/atlas.md
  5. 71 167
      docs/en/manuals/building-blocks.md
  6. 29 17
      docs/en/manuals/editor.md
  7. 179 0
      docs/en/manuals/graphics.md
  8. BIN
      docs/en/manuals/images/2dgraphics/2dgraphics_animsheet.png
  9. BIN
      docs/en/manuals/images/2dgraphics/2dgraphics_atlas.png
  10. BIN
      docs/en/manuals/images/2dgraphics/2dgraphics_atlas_add.png
  11. BIN
      docs/en/manuals/images/2dgraphics/2dgraphics_component_position.png
  12. BIN
      docs/en/manuals/images/2dgraphics/2dgraphics_gameobject_position.png
  13. BIN
      docs/en/manuals/images/2dgraphics/2dgraphics_import1.png
  14. BIN
      docs/en/manuals/images/2dgraphics/2dgraphics_import2.png
  15. BIN
      docs/en/manuals/images/2dgraphics/2dgraphics_tilemap.png
  16. BIN
      docs/en/manuals/images/2dgraphics/2dgraphics_tilemap_go.png
  17. BIN
      docs/en/manuals/images/2dgraphics/2dgraphics_tiles_pick.png
  18. BIN
      docs/en/manuals/images/2dgraphics/2dgraphics_tilesource.png
  19. BIN
      docs/en/manuals/images/2dgraphics/2dgraphics_tilesource_add_animation.png
  20. BIN
      docs/en/manuals/images/2dgraphics/2dgraphics_tilesource_animation.png
  21. BIN
      docs/en/manuals/images/2dgraphics/2dgraphics_tilesource_collision.png
  22. BIN
      docs/en/manuals/images/atlas/add.png
  23. BIN
      docs/en/manuals/images/atlas/[email protected]
  24. BIN
      docs/en/manuals/images/atlas/add_animation.png
  25. BIN
      docs/en/manuals/images/atlas/[email protected]
  26. BIN
      docs/en/manuals/images/atlas/animation_group.png
  27. BIN
      docs/en/manuals/images/atlas/[email protected]
  28. BIN
      docs/en/manuals/images/atlas/atlas_properties.png
  29. BIN
      docs/en/manuals/images/atlas/[email protected]
  30. BIN
      docs/en/manuals/images/atlas/single_images.png
  31. BIN
      docs/en/manuals/images/atlas/[email protected]
  32. BIN
      docs/en/manuals/images/building_blocks/bean_collection.png
  33. BIN
      docs/en/manuals/images/building_blocks/[email protected]
  34. BIN
      docs/en/manuals/images/building_blocks/building_blocks.png
  35. BIN
      docs/en/manuals/images/building_blocks/[email protected]
  36. BIN
      docs/en/manuals/images/building_blocks/child_transform.png
  37. BIN
      docs/en/manuals/images/building_blocks/[email protected]
  38. BIN
      docs/en/manuals/images/building_blocks/childing.png
  39. BIN
      docs/en/manuals/images/building_blocks/[email protected]
  40. BIN
      docs/en/manuals/images/building_blocks/collection.png
  41. BIN
      docs/en/manuals/images/building_blocks/[email protected]
  42. BIN
      docs/en/manuals/images/building_blocks/components.png
  43. BIN
      docs/en/manuals/images/building_blocks/[email protected]
  44. BIN
      docs/en/manuals/images/building_blocks/go_instance.png
  45. BIN
      docs/en/manuals/images/building_blocks/go_instance2.png
  46. BIN
      docs/en/manuals/images/building_blocks/[email protected]
  47. BIN
      docs/en/manuals/images/building_blocks/[email protected]
  48. BIN
      docs/en/manuals/images/building_blocks/instance.png
  49. BIN
      docs/en/manuals/images/building_blocks/[email protected]
  50. BIN
      docs/en/manuals/images/editor/add_file.png
  51. BIN
      docs/en/manuals/images/editor/create_file.png
  52. BIN
      docs/en/manuals/images/editor/[email protected]
  53. BIN
      docs/en/manuals/images/editor/create_file_name.png
  54. BIN
      docs/en/manuals/images/editor/[email protected]
  55. BIN
      docs/en/manuals/images/editor/import.png
  56. BIN
      docs/en/manuals/images/editor/[email protected]
  57. BIN
      docs/en/manuals/images/graphics/atlas.png
  58. BIN
      docs/en/manuals/images/graphics/[email protected]
  59. BIN
      docs/en/manuals/images/graphics/gui.png
  60. BIN
      docs/en/manuals/images/graphics/[email protected]
  61. BIN
      docs/en/manuals/images/graphics/import.png
  62. BIN
      docs/en/manuals/images/graphics/[email protected]
  63. BIN
      docs/en/manuals/images/graphics/model.png
  64. BIN
      docs/en/manuals/images/graphics/[email protected]
  65. BIN
      docs/en/manuals/images/graphics/particles.png
  66. BIN
      docs/en/manuals/images/graphics/[email protected]
  67. BIN
      docs/en/manuals/images/graphics/spine.png
  68. BIN
      docs/en/manuals/images/graphics/[email protected]
  69. BIN
      docs/en/manuals/images/graphics/sprite.png
  70. BIN
      docs/en/manuals/images/graphics/[email protected]
  71. BIN
      docs/en/manuals/images/graphics/tilemap.png
  72. BIN
      docs/en/manuals/images/graphics/[email protected]
  73. BIN
      docs/en/manuals/images/graphics/tilesource.png
  74. BIN
      docs/en/manuals/images/graphics/[email protected]
  75. BIN
      docs/en/manuals/images/graphics/z-order.png
  76. BIN
      docs/en/manuals/images/graphics/[email protected]
  77. BIN
      docs/en/manuals/images/tilemap/animation.png
  78. BIN
      docs/en/manuals/images/tilemap/[email protected]
  79. BIN
      docs/en/manuals/images/tilemap/collision.png
  80. BIN
      docs/en/manuals/images/tilemap/[email protected]
  81. BIN
      docs/en/manuals/images/tilemap/paint_tiles.png
  82. BIN
      docs/en/manuals/images/tilemap/[email protected]
  83. BIN
      docs/en/manuals/images/tilemap/palette.png
  84. BIN
      docs/en/manuals/images/tilemap/[email protected]
  85. BIN
      docs/en/manuals/images/tilemap/pick_tiles.png
  86. BIN
      docs/en/manuals/images/tilemap/[email protected]
  87. BIN
      docs/en/manuals/images/tilemap/small_map.png
  88. BIN
      docs/en/manuals/images/tilemap/[email protected]
  89. BIN
      docs/en/manuals/images/tilemap/tilemap.png
  90. BIN
      docs/en/manuals/images/tilemap/[email protected]
  91. BIN
      docs/en/manuals/images/tilemap/tilesource.png
  92. BIN
      docs/en/manuals/images/tilemap/[email protected]
  93. BIN
      docs/en/manuals/images/tilemap/use_tilemap.png
  94. BIN
      docs/en/manuals/images/tilemap/[email protected]
  95. 156 0
      docs/en/manuals/tilemap.md

+ 27 - 18
docs/en/en.json

@@ -191,10 +191,6 @@
                         "path": "/manuals/message-passing",
                         "name": "Message passing"
                     },
-                    {
-                        "path": "/manuals/resource",
-                        "name": "Resource management"
-                    },
                     {
                         "path": "/manuals/application-lifecycle",
                         "name": "Application lifecycle"
@@ -202,20 +198,29 @@
                 ]
             },
             {
-                "name": "RESOURCES & COMPONENTS",
+                "name": "ASSETS AND RESOURCES",
                 "items": [
                     {
-                        "path": "/manuals/2dgraphics",
-                        "name": "2D graphics"
+                        "path": "/manuals/animation",
+                        "name": "Animation"
                     },
                     {
-                        "path": "/manuals/3dgraphics",
-                        "name": "3D graphics"
+                        "path": "/manuals/graphics",
+                        "name": "Graphics"
                     },
                     {
-                        "path": "/manuals/animation",
-                        "name": "Animation"
-                    },
+                        "path": "/manuals/resource",
+                        "name": "Resource management"
+                    }
+                ]
+            },
+            {
+                "name": "COMPONENTS",
+                "items": [
+                    {
+                        "path": "/manuals/atlas",
+                        "name": "Atlas"
+                    },                    
                     {
                         "path": "/manuals/spine",
                         "name": "Spine animation"
@@ -226,7 +231,7 @@
                     },
                     {
                         "path": "/manuals/model",
-                        "name": "Model (3D)"
+                        "name": "Model"
                     },
                     {
                         "path": "/manuals/particlefx",
@@ -240,6 +245,10 @@
                         "path": "/manuals/sound",
                         "name": "Sound"
                     },
+                    {
+                        "path": "/manuals/tilemap",
+                        "name": "Tilemap"
+                    },
                     {
                         "path": "/manuals/font",
                         "name": "Font"
@@ -272,10 +281,6 @@
                         "path": "/manuals/collection-proxy",
                         "name": "Collection proxy"
                     },
-                    {
-                        "path": "/manuals/live-update",
-                        "name": "Live update"
-                    },
                     {
                         "path": "/manuals/camera",
                         "name": "Camera"
@@ -387,7 +392,11 @@
                     {
                         "path": "/manuals/instant-games",
                         "name": "Facebook Instant Games"
-                    }
+                    },
+                    {
+                        "path": "/manuals/live-update",
+                        "name": "Live update"
+                    }                    
                 ]
             },
             {

+ 2 - 243
docs/en/manuals/2dgraphics.md

@@ -1,250 +1,9 @@
 ---
 title: Defold 2D graphics manual
-brief: This manual details Defold's support for 2D graphical elements like sprites and Spine models.
+brief: This manual is outdated
 ---
 
 # 2D Graphics
 
-2D games are commonly built by many images that are presented as is (for backgrounds or sprites), used in _flip-book animation_ (for sprites), combined and rigged to create _Spine animation_ (for sprites) or mapped out into tilemaps and used for levels or backgrounds.
+This manual has been replaced by the [Graphics overview manual](/manuals/graphics).
 
-For performance reasons, images are often combined into one or a few larger images, but the small original image can still be referenced as a sub-image on the larger one. Combining smaller images into larger is especially important on mobile devices where memory and processing power is more scarce than on desktop machines or dedicated game consoles.
-
-In Defold, there are two types of asset that represent such a larger image:
-
-Atlases
-: An _atlas_ contains a list of separate images files, which are automatically combined into a larger image. See http://en.wikipedia.org/wiki/Texture_atlas
-
-
-Tile Sources
-: A tile source references an image file that is already containing sub-images ordered on a uniform grid. Other tools sometimes use the terms _tile set_ and _sprite sheet_ for this type of image. See https://en.wikipedia.org/wiki/Tile-based_video_game for an overview of tile based games.
-
-## Importing Image Files
-
-Defold needs all assets that should be in your project hierarchy. Therefore you should start by importing the image files you want to build your graphics from. To import image assets, simply drag the files from the file system on your computer and drop them in an appropriate place in the Defold editor _Project Explorer_.
-
-::: important
-Currently, Defold supports the PNG and JPEG image formats.
-:::
-
-![Importing image files](images/2dgraphics/2dgraphics_import1.png)
-
-![Importing image files](images/2dgraphics/2dgraphics_import2.png)
-
-## Creating an Atlas
-
-You need to populate an _Atlas_ before you can use it. As soon as you have added images and/or animations to the Atlas, it can be used as a graphics source for object components like Sprites and ParticleFX components.
-
-1. Import your image files as described above.
-2. Select <kbd>New ▸ Atlas File</kbd> from the context menu in the Project Explorer.
-3. Select <kbd>Add Images</kbd> from the context menu in the Outline.
-
-A dialog opens from which you can find and select the images you want to add to the Atlas. Note that you can filter the image files and select multiple files at once.
-
-![Creating an atlas, adding images](images/2dgraphics/2dgraphics_atlas_add.png)
-![Creating an atlas](images/2dgraphics/2dgraphics_atlas.png)
-
-## Defining flip-book animations
-
-You can define flip-book animations of selected sub-images in an atlas:
-
-- Select <kbd>Add Animation Group</kbd> from the context menu in the Outline.
-- Select <kbd>Add Images</kbd> from the context menu of the created animation group and choose the images that you want as frames of the animation.
-- Adjust the *Properties* for the animation as needed.
-
-You can reorder the images in the Outline by dragging them, if needed. You can also easily create duplicates by copying and pasting (From the <kbd>Edit</kbd> menu, the right click context menu or keyboard shortcuts) images in the outline. Select an animation and press <kbd>Space</kbd> on your keyboard to preview the animation.
-
-## Creating a Tile Source
-
-To create a Tile Source you need an image containing all the tiles. All tiles must have the exact same dimensions and be placed in a grid. Defold supports _spacing_ between the tiles and _padding_ around each tile. Defold can also automatically _extrude borders_ which is sometimes neccessary to avoid visual artifacts.
-
-Once you have the source image created, you can create a Tile Source:
-
-- Import the image to your project by dragging it into the Project Explorer.
-- Create a new Tile Source file.
-- Click the browse-button next to the *Image* property and select your image. Now you should see the image displayed in the editor.
-- Adjust the *Tile Height*, *Tile Width*, *Tile Margin* and *Tile Spacing* to match the source image. When everything is correctly set you should see the tiles line up perfectly inside each cell of the transparent grid.
-
-![Creating a Tile Source](images/2dgraphics/2dgraphics_tilesource.png)
-
-::: sidenote
-If you use linear filtering (see below) and a Tile Source where each tile lies immediately next to each other (i.e. has no borders), there is a risk that you will experience a visual artifact called edge bleeding: if a neighboring tile has colored pixels on its edge, their color might bleed over at the edges. The easiest way to fix this problem is to set the *Extrude Border* property (which can be found on Atlases and Tile Sources). The value specifies how many times the edge pixels should be automatically replicated in the final texture used in when the game is run.
-
-A good measure is to specify a number that corresponds to how much you scale the textures when viewed in game. If you display the game world at half scale (you can see 2 times as much) then set *Extrude Borders* to 2. When the texture is used scaled down to half the size, a _mipmap_ is used for rendering. That mipmap is half the width and height of the original image.
-:::
-
-## Tile Source collision shapes
-
-Collision shapes that enable physics interaction with Tile Maps can be automatically generated. Defold uses the alpha channel from the image specified in the *Collision* property to generate a _convex_ shape for each tile. Often it is sensible to use the same image for collision as the one containing the actual graphics, but you are free to specify a separate image if you want collision shapes that differ from the visuals. When you specify a collision image, the preview is updated with an outline on each tile indicating the generated collision shapes. See the [Physics documentation](/manuals/physics) for more details.
-
-![Collision Shapes](images/2dgraphics/2dgraphics_tilesource_collision.png)
-
-## Tile Source flip-book animations
-
-To define an animation in a Tile Source each frame must correspond to one tile (be on a grid of a certain width and height). Each frame tile must lie next to each other in a sequence left to right. The sequence can wrap from one row to the next. All newly created Tile Sources have a default animation named "anim". Selecting it displays the animation *Properties* that allow you to set a descriptive name, start and end frame, playback method, playback speed, and whether the animation should be visually flipped horizontally or vertically.
-
-![Tile Source add animation](images/2dgraphics/2dgraphics_tilesource_animation.png)
-
-You can easily add more animations to the Tile Source by selecting <kbd>Add Animation</kbd> in the context menu that can be accessed by right clicking the root *Tile Source* in the Outline view.
-
-![Tile Source animation](images/2dgraphics/2dgraphics_tilesource_add_animation.png)
-
-## Manipulating Game Objects and components
-
-When you add visual components (Sprites, ParticleFX, etc) to a game object, you are able to set the _position_ and _rotation_ of the component. These values are used as offsets against the position and rotation of the game object. What's more, the values are _set_ in the component when you assemble the game object.
-
-![Component position](images/2dgraphics/2dgraphics_component_position.png)
-
-Defold game objects can be moved, rotated, and have any of their properties animated. Components belonging to a manipulated game object undergo the same manipulations as the game object, but will keep their relative position and rotation as set in the game object. Components can be turned on and off, but it's not possible to animate, move, or rotate them dynamically (with an exception described below). Therefore, if you have graphics that you intend to alter you should put the graphics in separate game objects. A group of game objects or a game object hierarchy is conveniently assembled in a Collection. Then you can freely manipulate the objects through script:
-
-![Component position](images/2dgraphics/2dgraphics_gameobject_position.png)
-
-```lua
--- Animate the wand game object to specified position and rotation.
-go.animate("wand", "position", go.PLAYBACK_ONCE_FORWARD, vmath.vector3(530, 79, -0.1), go.EASING_INOUTSINE, 0.5)
-go.animate("wand", "euler", go.PLAYBACK_ONCE_FORWARD, vmath.vector3(0, 0, -70), go.EASING_INOUTSINE, 0.5)
-```
-
-## Dynamically scaling Sprites
-
-It is actually possible to dynamically alter the scale of Sprite components in a non-uniform way. This is a special feature that may feel odd when you try to construct a mental model for how game objects and components are related to each other and how to work with them.
-
-Sprites have a property `scale` which is of type `vmath.vector3`. You can animate the components separately:
-
-```lua
-go.animate("my_object#sprite", "scale.x", go.PLAYBACK_ONCE_FORWARD, 1.5, go.EASING_INOUTSINE, 2)
-```
-
-## Sprites
-
-Sprite components are used to add graphics and flip-book animations to game objects. They are typically used to create characters and props. Creating a Sprite component is very straightforward:
-
-- Create (or open) the game object the Sprite should belong to.
-- From the Game Object context menu in the Outline, select <kbd>Add Component</kbd>.
-- Choose *Sprite*.
-- Specify in the Sprite's *Image* property which Tile Source or Atlas the Sprite should use.
-- Specify in the Sprite's *Default Animation* property which animation it should play by default.
-
-The default animation is played when the game object is created in the running game. Note that if you use an Atlas as the image resource you will see still images as well as animations in the *Default Animation* drop down menu. If you want to create a Sprite with a still image out of a Tile Source, you can create a 1 frame animation and set its *Playback* property to "None".
-
-## Collision Shapes
-
-Sprites do not yet support Collision Shapes generated in Tile Sources. Instead, you add Collision Objects with Collision Shapes like you would for any game object. See the [Physics documentation](/manuals/physics) for details.
-
-## Blend Mode
-
-The *Blend Mode* property defines how the sprite should be blended with the graphics behind it. These are the available blend modes and how they are calculated:
-
-Alpha
-: Normal blending: a~0~ * rgb~0~ + (1 - a~0~) * rgb~1~
-
-Add
-: Brighten the background with the color values of the corresponding sprite pixels: rgb~0~ + rgb~1~
-
-Add Alpha (deprecated!)
-: Brighten the background with the corresponding visible sprite pixels: a~0~ * rgb~0~ + rgb~1~
-
-Multiply
-: Darken the background with values of the the corresponding sprite pixels: rgb~0~ * rgb~1~
-
-## Sprite Shading
-
-The default sprite shading files are located under */builtins/material/sprite.\** in your project. The default shading performs a regular texture lookup, but also has a tint (a fragment shader constant) which is multiplied with the texture color.
-
-To obtain effects like flashing a sprite white when it is hit, you can implement custom shading. To set a custom shading for your sprites, follow these steps:
-
-- Copy the files under */builtins/material/sprite.\** into one of your project directories (you can't modify the content of the *builtins*-directory). This is not mandatory but makes the process easier.
-- Open the copied *sprite.material* file and remap the shader files (*.vp* and *.fp*) to your own copies.
-- Edit the *.vp* and *.fp* copies as you please. If you introduce shader constants, they must also be declared in the material file.
-- Open your sprite and specify your new material in the Properties.
-- To set a shader constant while the game is running, use the functions [`sprite.set_constant()`](/ref/sprite#sprite.set_constant) and [`sprite.reset_constant()`](/ref/sprite#sprite.reset_constant).
-
-## Tile Maps
-
-A Tile Map is a component that allows you to assemble, or _paint_, tiles from a Tile Source onto a large grid area. Tile Maps are commonly used to build game level environments. You can also use the Collision Shapes from the Tile Source in your maps for collision detection and physics simulation.
-
-## Painting Tiles
-
-- Open the Tile Map you want to work in.
-- Make sure that there are no flagged issues in the *Property* or *Outline* view.
-- Select or create a Layer to paint on in the *Outline* view.
-- Select a tile to use as brush (press <kbd>Space</kbd> to show the tile palette)
-
-![Painting tiles](images/2dgraphics/2dgraphics_tilemap.png)
-
-## Picking Tiles
-
-You can also pick tiles directly from the Tile Map to use as a brush. Hold <kbd>Shift</kbd> and click a tile to pick it up as the current brush. While holding <kbd>Shift</kbd> you can also click and drag to select a block of tiles to use as a larger brush.
-
-![Picking tiles](images/2dgraphics/2dgraphics_tiles_pick.png)
-
-## Erasing Tiles
-
-The Eraser tool is used to erase painted tiles. To select the Eraser, you can either:
-
-- Select it from the <kbd>Tile Map</kbd> menu.
-- Press <kbd>Backspace</kbd>.
-- Click the active tile again in the tiles palette.
-- Pick any empty cell on the Tile Map.
-
-## Attaching Physics
-
-You can attach physics to the Tile Map to do collision detection or physics simulations involving tiles. To attach physics to a Tile Map, see the [Physics documentation](/manuals/physics) for details.
-
-## Changing tiles from script
-
-You can change the content of a Tile Map dynamically while your game is running. To do so, call the [`tilemap.set_tile()`](/ref/tilemap/#tilemap.set_tile) function:
-
-```lua
--- Replace the two door-tiles with "open door" tiles.
--- The door is two tiles, one on top of the other.
-local x = 3
-local y = 4
--- Lower part of door
-tilemap.set_tile("/level#tilemap", "layer1", x, y, 58)
--- Upper part of door
-tilemap.set_tile("/level#tilemap", "layer1", x, y+1, 46)
-```
-
-## Adding a Tile Map to your game
-
-To add a Tile map to your game:
-
-1. Create a game object to hold the Tile Map component. The game object can be in a file or created directly in a collection
-2. Right-click the root of the game object and select <kbd>Add component from file</kbd>
-3. Select the Tile Map file
-
-The game object now contains the Tile Map and you can place or spawn the game object wherever you want it.
-
-![Placed tile map](images/2dgraphics/2dgraphics_tilemap_go.png)
-
-## Texture Filtering and Sampling
-
-Defold supports two different ways to do texture sampling. The method governs the visual result in cases when a _texel_ (a pixel in a texture) is not perfectly aligned with a screen pixel. This happens when you move a Sprite containing the texture seamlessly (say 0.2 pixels in any direction), if your camera is moving seamlessly or if your camera zooms in or out:
-
-Nearest
-: The nearest texel will be picked to color the screen pixel. This sampling method should be chosen if you want a perfect one-to-one pixel mapping from your textures to what you see on screen. With nearest filtering everything will snap from pixel to pixel when moving which looks twitchy if the Sprite moves slowly.
-
-
-Linear
-: The texel will be averaged with its neighbors before coloring the screen pixel. This produces smooth appearances for slow, continuous motions as a Sprite will bleed into the pixels before fully coloring them--thus it is possible to move a Sprite less than a whole pixel.
-
-
-The setting for which filtering to use is stored in the [Project Settings](/manuals/project-settings) file. There are two settings:
-
-default_texture_min_filter
-: Minifying filtering applies whenever the texel is smaller than the screen pixel.
-
-default_texture_mag_filter
-: Magnifying filtering applies whenever the texel is larger than the screen pixel.
-
-Both settings accept the values `linear` or `nearest`. For example:
-
-```ini
-[graphics]
-default_texture_min_filter = nearest
-default_texture_mag_filter = nearest
-```
-
-If you don’t specify anything, both are set to `linear` by default.
-
-(Some of the graphic assets used are made by Kenney: http://kenney.nl/assets)

+ 2 - 49
docs/en/manuals/3dgraphics.md

@@ -1,55 +1,8 @@
 ---
 title: Defold 3D graphics manual
-brief: This manual outlines the 3D support in Defold.
+brief: This manual is outdated
 ---
 
 # 3D graphics
 
-Defold is at its core a 3D engine. Even when you work with 2D material only all rendering is done in 3D, but orthographically projected onto the screen.
-
-Defold allows you to utilize full 3D content by including 3D assets, or _Models_ into your collections. You can build games in strictly 3D with only 3D assets, or you can mix 3D and 2D content as you wish.
-
-## Defold resources
-
-*Model*
-: The model component contains the object mesh, its skeleton and animations. Like all visual components it also has a material tied to it.
-
-*Animation Set*
-: The animation set file contains a list of *.dae* files from where to read animations. You can also add other *.animationset* files to an animation set, which is handy if you share partial sets of animations between several models.
-
-
-The [Model documentation](/manuals/model) explains how to import 3D assets and create models.
-
-The [Animation documentation](/manuals/animation) explains how to animate 3D models.
-
-## Collada support
-
-Defold's 3D support requires you to save or export model, skeleton and animation data in the _Collada_ format. This is a widely adopted format that most 3D modelling software supports. So you should be able to create assets in in _Maya_, _3D Max_, _Blender_, _Sketchup_ or any other popular software and then bring the results into Defold.
-
-::: important
-Defold currently supports only baked animations. Animations need to have matrices for each animated bone each keyframe, and not position, rotation and scale as separate keys.
-
-Animations are also linearly interpolated. If you do more advanced curve interpolation the animations needs to be prebaked from the exporter.
-
-Animation clips in Collada are not supported. To use multiple animations per model, export them into separate *.dae* files and gather the files into an *.animationset* file in Defold.
-:::
-
-## Materials, shaders and textures
-
-3D software commonly allows you to set properties on your object vertices, like coloring and texturing. This information goes into the Collada *.dae* file that you export from your 3D software. Depending on the requirements of your game you will have to select and/or create appropriate and _performant_ materials for your objects. A material combines _shader programs_ with a set of parameters for rendering of the object.
-
-You will also need to design and implement a game camera that works with your intended gameplay.
-
-Your Defold project has some built-in materials that are used to render sprites, tiles, particles and GUI nodes. For 3D models, there is no suitable built-in material so we have to create one. For the example book model there is a "textured.material" resource ready-made.
-
-Read the [Material documentation](/manuals/material) for information on how materials work and how you can create materials that work with textured 3D models.
-
-The [Shader manual](/manuals/shader) contains information on how shader programs work.
-
-## Rendering
-
-The last thing to do to get the model into the game is to alter the *Render Script* for the project. The default render script is tailor made for 2D games and does not work with 3D models. But by copying the default render script and adding a handful of lines of Lua code we can make sure that our book is rendered as expected. For the example the render script is already set up.
-
-Read the [Render documentation](/manuals/render) for details on how render scripts work.
-
-
+This manual has been replaced by the [Graphics overview manual](/manuals/graphics).

+ 98 - 0
docs/en/manuals/atlas.md

@@ -0,0 +1,98 @@
+---
+title: Atlas manual
+brief: This manual explains how Atlas resources work in Defold.
+---
+
+# Atlas
+
+While single images are often used as source for sprites, for performance reasons, images need to be combined into larger sets of images, called atlases. Combining sets of smaller images into atlases is especially important on mobile devices where memory and processing power is more scarce than on desktop machines or dedicated game consoles.
+
+In Defold, an atlas resource is a list of separate images files, which are automatically combined into a larger image.
+
+## Creating an Atlas
+
+Select <kbd>New ▸ Atlas</kbd> from the context menu in the Project Explorer. Name the new atlas file. The editor will now open the file in the atlas editor. The atlas properties are shown in the 
+*Properties* pane so you can edit them (see below for details).
+
+You need to populate an atlas with images or animations before you can use it as a graphics source for object components like Sprites and ParticleFX components.
+
+Make sure that you have added your images to the project (drag and drop image files to the right location in the *Assets* browser)
+
+Adding single images
+: <kbd>Right click</kbd> the root Atlas entry in the *Outline* pane.
+  
+  Select <kbd>Add Images</kbd> from the pop up context menu to add single images.
+
+  A dialog opens from which you can find and select the images you want to add to the Atlas. Note that you can filter the image files and select multiple files at once.
+
+  ![Creating an atlas, adding images](images/atlas/add.png){srcset="images/atlas/[email protected] 2x"}
+
+  The added images are listed in the *Outline* and the full atlas can be seen in the center editor view. You may need to press <kbd>F</kbd> (<kbd>View ▸ Frame Selection</kbd> from the menu) to reframe the selection.
+
+  ![Images added](images/atlas/single_images.png){srcset="images/atlas/[email protected] 2x"}
+
+Adding flip-book animations
+: <kbd>Right click</kbd> the root Atlas entry in the *Outline* pane.
+
+  Select <kbd>Add Animation Group</kbd> from the pop up context menu to create a flip book animation group.
+
+  A new, empty, animation group with a default name ("New Animation") is added to the atlas.
+
+  <kbd>Right click</kbd> then new group and select <kbd>Add Images</kbd> from the context menu.
+
+  A dialog opens from which you can find and select the images you want to add to the animation group.
+  
+  ![Creating an atlas, adding images](images/atlas/add_animation.png){srcset="images/atlas/[email protected] 2x"}
+
+  Press <kbd>Space</kbd> with the animation group selected to preview it. Adjust the *Properties* for the animation as needed (see below).
+
+  ![Animation group](images/atlas/animation_group.png){srcset="images/atlas/[email protected] 2x"}
+
+You can reorder the images in the Outline by selecting them and pressing <kbd>Alt + Up/down</kbd>. You can also easily create duplicates by copying and pasting images in the outline (From the <kbd>Edit</kbd> menu, the right click context menu or keyboard shortcuts).
+
+## Atlas properties
+
+Each atlas resource has a set of properties. These are shown in the *Properties* pane when you select the root item in the *Outline* view.
+
+Size
+: Shows the computed total size of the resulting texture resource. The width and height are set to the closest power of two. Note that if you enable texture compression, some formats require square textures. Non square textures will then be resized and filled with empty space to make the texture square. See the [Texture profiles manual](/manuals/texture-profiles/) for details.
+
+Margin
+: The number of pixels that should be added between each image.
+
+Inner Padding
+: The number of empty pixels that should be padded around each image.
+
+Extrude Borders
+: The number of edge pixels that should be repeatedly padded around each image. When the fragment shader samples pixels at the edge of an image, pixels of a neighbor image (on the same atlas texture) may bleed over. Extruding the border solves this problem.
+
+Here are examples of the different property settings with four square images of size 64x64 added to an atlas. Notice how the atlas jumps to 256x256 as soon as the images won't fit 128x128, resulting in much wasted texture space.
+
+![Atlas properties](images/atlas/atlas_properties.png){srcset="images/atlas/[email protected] 2x"}
+
+## Animation properties
+
+In addition to the list of images that are part of an animation group, a set of properties are available:
+
+Id
+: The name of the animation.
+
+Fps
+: The playback speed of the animation, expressed in frames per second (FPS).
+
+Flip horizontal
+: Flips the animation horizontally.
+
+Flip vertical
+: Flips the animation vertically.
+
+Playback
+: Specifies how the animation should play:
+
+  - `None` does not play back at all, the first image is displayed.
+  - `Once Forward` plays the animation one time from the first to the last image.
+  - `Once Backward` plays the animation one time from the last to the first image.
+  - `Once Ping Pong` plays the animation one time from the first to the last image and then back to the first image.
+  - `Loop Forward` plays the animation repeatedly from the first to the last image.
+  - `Loop Backward` plays the animation repeatedly from the last to the first image.
+  - `Loop Ping Pong` plays the animation repeatedly from the first to the last image and then back to the first image.

+ 71 - 167
docs/en/manuals/building-blocks.md

@@ -5,223 +5,127 @@ brief: This manual digs into the details of how game objects, components and col
 
 #  Building blocks
 
-Some of the design decisions made in Defold differ from other software and it may take some time to get a good grip on how and why things are put together the way they are. In order to properly understand how Defold manages and gives you access to game resources, read this document, the [addressing manual](/manuals/addressing) and the [message passing manual](/manuals/message-passing).
+At the core of Defold's design are a few concepts that may take a little while to get a good grip on. This manual explains what the building blocks of Defold consist of. After having read this manual, move on to the [addressing manual](/manuals/addressing) and the [message passing manual](/manuals/message-passing). There are also a set of [tutorials](/tutorials/getting-started) available from within the editor to get you up and running quickly.
 
-Some or many of the things here might be unfamiliar and hard to understand at first, but don't worry. Take your time, experiment with the editor and engine and return to the documentation when you run into problems.
+![Building blocks](images/building_blocks/building_blocks.png){srcset="images/building_blocks/[email protected] 2x"}
 
-![Building blocks](images/building_blocks/building_blocks.png)
+There are three basic types of building blocks that you use to construct a Defold game:
 
-## Game objects
-
-Game objects are simple objects that each have a separate lifespan during the execution of your game. Game objects are usually equipped with visual or audible representation (a sound or sprite component, for instance). They can also be equipped with behavior through script components. Game objects are thus a separate thing from sprites, models or sounds in that they are _containers_ for these different type of components. You create game objects and place them in collections in the editor, or spawn them dynamically at run-time with _factories_.
-
-There are two different ways you can create game objects in the editor:
-
-1. Create a game object file and then create an instance of that file in a collection.
-2. Create an _in-place_ instance of a game object in a collection.
+Collection
+: A collection is a file used to structure your game. In collections you build hierarchies of game objects and other collections. They are typically used to structure game levels, groups of enemies or characters built out of several game objects.
 
-Let's look at the difference between these.
+Game object
+: A game object is a container with an id, position, rotation and scale. It is used to contain components. They are typically used to create player characters, bullets, the game’s rule system or a level loader/unloader.
 
-## Prototypes and instances
+Component
+: Components are entities that are put in game object to give them visual, audible and/or logic representation in the game. They are typically used to create character sprites, script files, add sound effects or add particle effects.
 
-When you create a game object _file_, you create a blueprint, or a prototype, for a game object. This prototype can then be _instanced_ into one or many game objects.
+## Collections
 
-![Game object file](images/building_blocks/building_blocks_gameobject_file.png)
+Collections are tree structures that hold game objects and other collections. A collection is always stored on file.
 
-Creating a game object file does not add anything to your running game. The game object does not exist yet, only the formula to create it. To add an actual game object based on the blueprint just created, you add an instance of the game object to a collection in your project by right clicking the collection and selecting <kbd>Add Game Object File</kbd>.
+When the Defold engine starts, it loads a single _bootstrap collection_ as specified in the "game.project" settings file. The bootstrap collection is often named "main.collection" but you are free to use any name you like.
 
-![Game object instance](images/building_blocks/building_blocks_gameobject_instance.png)
+A collection can contain game objects and other collections (by reference to the sub-collection's file), nested arbitrarily deep. Here is an example file called "main.collection". It contains one game object (with the id "can") and one sub-collection (with the id "bean"). The sub-collection, in turn, contains two game objects: "bean" and "shield".
 
-Now you are able to start working on the game object. You might create a large number of instances of the object, each one being an exact clone of what's stored in the game object file.
+![Collection](images/building_blocks/collection.png){srcset="images/building_blocks/[email protected] 2x"}
 
-![Game object clones](images/building_blocks/building_blocks_gameobject_clones.png)
+Notice that the sub-collection with id "bean" is stored in its own file, called "/main/bean.collection" and is only referenced in "main.collection":
 
-The nice thing with this model is that if you change the game object file you are changing the prototype, so any instance that uses the file as its blueprint will immediately change.
+![Bean collection](images/building_blocks/bean_collection.png){srcset="images/building_blocks/[email protected] 2x"}
 
-![Game object alter file](images/building_blocks/building_blocks_gameobject_alter.png)
+You cannot address collections themselves since there are no runtime objects corresponding to the "main" and "bean" collections. However, you sometimes need to use the identity of a collection as part of the _path_ to a game object (See the [addressing manual](/manuals/addressing) for details):
 
-## Childing game objects
+```lua
+-- file: can.script
+-- get position of the "bean" game object in the "bean" collection
+local pos = go.get_position("bean/bean")
+```
 
-Let's now look at a case which might seem peculiar at first. Add an instance "my_gameobject" of the above prototype file to a collection, then create another game object called "heart" _in place_ (right click and select <kbd>Add Game Object</kbd>) with some component. Finally, make "heart" the child of "my_gameobject" by dragging it onto it. You now have a collection that looks like this:
+A collection is always added to another collection as a reference to a collection file:
 
-![Game object instance with child](images/building_blocks/building_blocks_gameobject_instance_child.png)
+<kbd>Right-click</kbd> the collection in the *Outline* view and select <kbd>Add Collection File</kbd>.
 
-You might assume that by dragging the "heart" object onto "my_gameobject" you would change the file "my_gameobject.go", but that is not what happens. The effect of the operation is that the game object _instance_ "my_gameobject" gets a child attached to it. The game object instance has two separate properties for its prototype and its children. When you add children to a game object instance you add the object to the object's *children* property -- you don't touch the prototype.
+## Game objects
 
-If you open the collection in the text editor by right clicking and selecting <kbd>Open With ▸ Text Editor</kbd> you can inspect the game object data structure:
+Game objects are simple objects that each have a separate lifespan during the execution of your game. Game objects have a position, rotation and scale that each can be manipulated and animated at runtime.
 
-```txt
-name: "default"
-instances {
-  id: "my_gameobject"
-  prototype: "/a_simple_test/my_gameobject.go"
-  children: "heart"
-  ...
-}
-scale_along_z: 0
-embedded_instances {
-  id: "heart"
-  data: "embedded_components {\n  id: \"sprite\"\n  type: \"sprite\"\n  data: \"tile_set: \\\"/cards_example/cards_sprites.atlas\\\"\\ndefault_animation: \\\"heart\\\"\\nmaterial: \\\"/builtins/materials/sprite.material\\\"\\nblend_mode: BLEND_MODE_ALPHA\\n\"\n  position {\n    x: 0.0\n    y: 0.0\n    z: 0.0\n  }\n  rotation {\n    x: 0.0\n    y: 0.0\n    z: 0.0\n    w: 1.0\n  }\n}\n"
-  ...
-}
+```lua
+-- animate X position of "can" game object
+go.animate("can", "position.x", go.PLAYBACK_LOOP_PINGPONG, 100, go.EASING_LINEAR, 1.0)
 ```
 
-You can see clearly that the game object instance has a property *prototype* that is set to the game object file. It has another property *children* that lists "heart" as its only child. The game object "heart" is different. Since it's an in_place game object not based on a prototype, it is listed under *embedded_instances* and all its data is stored right inside the collection file.
+Game objects can be used empty (as position markers, for instance) but are usually used equipped with various components, like sprites, sounds, scripts, models, factories and more. Game objects are either created in the editor, placed in collection files, or dynamically spawned at run-time through _factory_ components.
 
-::: important
-Apart from making a clear distinction between game object prototypes and instances when working with them in the editor, you should also take the time to carefully study how game objects are identified with a _fixed_ id in run time and how and why the id is unaffected by childing. The [Message passing documentation](/manuals/message-passing) explains this in detail.
-:::
+Game objects are either added in-place in a collection, or added to a collection as a reference to a game object file:
 
-At this point you might ask yourself _"What if I create a game object file with a game object and a child, and then remove the child after having instanced the object in a collection?"_ The answer is simply that you can't. A game object file is a blueprint for a single game object. It only makes sense to add children to instances of game objects, either at build time in the editor by editing a collection---or at runtime via:
+<kbd>Right-click</kbd> the collection in the *Outline* view and select <kbd>Add Game Object</kbd> (add in-place) or <kbd>Add Game Object File</kbd> (add as file reference).
 
-```lua
-msg.post("my_object", "set_parent", { parent_id = go.get_id("my_parent") })
-```
 
 ## Components
 
-Components are used to give specific expression and/or functionality to game objects. They don't live a life of their own but have to be contained inside game objects. There are two different ways in which you can create new components in the editor:
-
-1. Create a component-type _file_, then create an instance of that component inside a game object.
-2. Create an _in-place_ instance of a component in a game object.
+Components are used to give specific expression and/or functionality to game objects. Components have to be contained inside game objects and are affected by the position, rotation and scale of the game object that contains the component:
 
-In either of these cases you create components of a specific type. Opening that component in the editor fires up a component type specific editor that allows you to manipulate the component in ways that make sense for the type.
+![Components](images/building_blocks/components.png){srcset="images/building_blocks/[email protected] 2x"}
 
-In the previous section you saw how the editor stores embedded components in a game object though the *embedded_components* property. If we instead chose to instance the component from a file reference, the data looks like this:
+Many components have type specific properties that can be manipulated and there are component type specific functions available for interacting with them in runtime:
 
 ```lua
-embedded_instances {
-  id: "heart2"
-  data: "components {\n  id: \"sprite\"\n  component: \"/a_simple_test/my_heart.sprite\"\n  position {\n    x: 0.0\n    y: 0.0\n    z: 0.0\n  }\n  rotation {\n    x: 0.0\n    y: 0.0\n    z: 0.0\n    w: 1.0\n  }\n}\n"
-  ...
-}
+-- disable the can "body" sprite
+msg.post("can#body", "disable")
+
+-- play "hoohoo" sound on "bean" in 1 second
+sound.play("bean#hoohoo", { delay = 1, gain = 0.5 } )
 ```
 
-The component specific data are stored in the component file referenced via the *component* property.
+Components are either added in-place in a game object, or added to a game object as a reference to a component file:
 
-The most common component type is probably the _script component_, which you use to create behaviors. It is easy to forget that there is a clear boundary between the script component and the containing game object. For instance, the following style of message passing is common:
+<kbd>Right-click</kbd> the game object in the *Outline* view and select <kbd>Add Component</kbd> (add in-place) or <kbd>Add Component File</kbd> (add as file reference).
 
-```lua
-msg.post("my_object", "my_message", { my_data = 1 }})
-```
+In most cases it makes most sense to create components in-place, but the following component types must be created in separate resource files before being added by reference to a game object:
 
-Here, we send a custom message to a game object "my_object". This usually works, but is not recommended. First, since sending messages to a game object _broadcasts_ the message to all containing components you create unnecessary overhead. Secondly, you might even break the behavior of a game object. Suppose, for instance, that the game object has several script components that all listen to the "my_message" message and they are not designed to run simultaneously. The recommended way of addressing messages is to instead be as specific as possible, and that requires that you keep the difference between game object and component in mind.
+* Script
+* GUI
+* Particle FX
+* Tile Map
 
-```lua
-msg.post("my_object#script", "my_message", { my_data = 1 })
-```
+## Objects added in-place or by reference
 
-## Custom component properties
+When you create a collection, game object or component _file_, you create a blueprint, or a prototype. This only adds a file to the project file structure, nothing is added to your running game. To add an instance of a collection, game object or component based on a blueprint file, you add an instance of it in one of your collection files.
 
-Components have type specific properties that you set to alter the component in one way or another. It may be the width and height of a sprite component, or a flag dictating whether a sound component should loop its sound or not during playback. _Script components_, in contrast, allow you to specify custom properties for any purpose. In a script you define a script component simply by adding its definition to the script file:
+You can see what file an object instance is based on in the outline view. The file "main.collection" contains three instances that are based on files:
 
-```lua
--- self.health will be automatically set to 100 by default. You can change
--- the init value for any instance containing the script component in the editor.
-go.property("health", 100)
-
-function on_message(self, message_id, message, sender)
-    -- Now we can access the property as "self.health"
-    ...
-end
-```
+1. The "bean" sub-collection.
+2. The "bean" script component in the "bean" game object in the "bean" sub-collection.
+3. The "can" script component in the "can" game object.
 
-A detailed explanation of how script properties work and how they can be used is found in the [Script properties documentation](/manuals/script-properties). The script properties you define are a type of instance property associated your script component. Defold stores them on file as a generic component property. If the game object is instanced from a prototype, a separate *component_properties* property is added to the object instance containing any script properties (and in the future, possibly other component properties):
+![Instance](images/building_blocks/instance.png){srcset="images/building_blocks/[email protected] 2x"}
 
-![Script properties](images/building_blocks/building_blocks_properties.png)
+The benefit of creating blueprint files becomes apparent when you have multiple instances of a game object or collection and wishes to change all of them:
 
-```txt
-component_properties {
-  id: "script"
-  properties {
-    id: "my_property"
-    value: "4712.0"
-    type: PROPERTY_TYPE_NUMBER
-  }
-}
-```
+![GO instances](images/building_blocks/go_instance.png){srcset="images/building_blocks/[email protected] 2x"}
 
-Conversely, in an embedded game object, any component properties are explicitly expressed as a *properties* property in the collection file:
-
-![Embedded script properties](images/building_blocks/building_blocks_properties_embedded.png)
-
-```txt
-data: "components {\n"
-"  id: \"some_script\"\n"
-"  component: \"/a_simple_test/my_thing.script\"\n"
-"  position {\n"
-"    x: 0.0\n"
-"    y: 0.0\n"
-"    z: 0.0\n"
-"  }\n"
-"  rotation {\n"
-"    x: 0.0\n"
-"    y: 0.0\n"
-"    z: 0.0\n"
-"    w: 1.0\n"
-"  }\n"
-"  properties {\n"
-"    id: \"my_property\"\n"
-"    value: \"4713.0\"\n"
-"    type: PROPERTY_TYPE_NUMBER\n"
-"  }\n"
-"}\n"
-```
+By changing the blueprint file, any instance that uses that file will immediately be updated.
 
-## Collections
+![GO instances updated](images/building_blocks/go_instance2.png){srcset="images/building_blocks/[email protected] 2x"}
 
-Collections are Defold's mechanism for creating templates, or what in other engines are called "prefabs". Collections are tree structures that hold game objects and other collections. A collection is _always_ stored on file and brought into the game in one of two ways:
-
-1. Either at build time by placing the collection in another collection in the editor.
-2. At runtime by dynamically loading all resources gathered in the collection through a _collection proxy_ (See [Collection proxy documentation](/manuals/collection-proxy) for details).
-
-![Collection instances](images/building_blocks/building_blocks_collection_instances.png)
-
-Collections that have been placed in the editor cannot be modified. You cannot, for instance, add children to game objects that are part of the placed collection. Why you can't do that becomes clear when you look at the data that is stored for the collection instance. The data for the containing game objects is inside the _referenced_ collection file *my_collection.collection* and that is not what you're editing.
-
-While you can't modify the contents of a collection instance without editing the source collection file, the editor allows modification of property values such as script properties that are associated with components in the collection.
-
-![Properties in a collection](images/building_blocks/building_blocks_collection_properties.png)
-
-```txt
-collection_instances {
-  id: "my_collection"
-  collection: "/a_simple_test/my_collection.collection"
-  position {
-    x: -172.74739
-    y: 149.61157
-    z: 0.0
-  }
-  rotation {
-    x: 0.0
-    y: 0.0
-    z: 0.0
-    w: 1.0
-  }
-  scale: 1.0
-  instance_properties {
-    id: "my_gameobject"
-    properties {
-      id: "script"
-      properties {
-        id: "my_property"
-        value: "4717.0"
-        type: PROPERTY_TYPE_NUMBER
-      }
-    }
-  }
-}
-```
+## Childing game objects
+
+In a collection file, you can build hierarchies of game objects so that one or more game objects are children to a single parent game object. By simply <kbd>dragging</kbd> one game object and <kbd>dropping</kbd> it onto another the dragged game object is childed under the target:
+
+![Childing game objects](images/building_blocks/childing.png){srcset="images/building_blocks/[email protected] 2x"}
+
+Object parent-child hierarchies is a dynamic relation affecting how objects react to transformations. Any transformation (movement, rotation or scaling) applied to an object will in turn be applied to the object’s children, both in the editor and in runtime:
 
-## Child-parent hierarchies
+![Child transform](images/building_blocks/child_transform.png){srcset="images/building_blocks/[email protected] 2x"}
 
-When editing a collection file, you can build hierarchies of game objects so that one or more game objects are children to a parent game object. Object parent-child hierarchies is a dynamic relation affecting how objects react to transformations. Any transformation (movement, rotation or scaling) applied to an object will in turn be applied to the object’s children.
+Conversely, a child's translations are done in the local space of the parent. In the editor, you can choose to edit a child game object in the local space or world space by selecting <kbd>Edit ▸ World Space</kbd> (the default) or <kbd>Edit ▸ Local Space</kbd>.
 
-It is also possible to alter an object’s parent in run-time by sending `set_parent` messages.
+It is also possible to alter an object’s parent in run-time by sending a `set_parent` message to the object.
 
 ```lua
-local parent = go.get_id("some_object")
-msg.post(".", "set_parent", { parent_id = parent })
+local parent = go.get_id("bean")
+msg.post("child_bean", "set_parent", { parent_id = parent })
 ```
 
-A common misunderstanding is that a game object's place in the collection hierarchy is connected to this runtime parent-child hierarchy. But they are two very different things. Parent-child hierarchies dynamically alters the scene graph which allows objects to be visually attached to each other. The place a game object has in the collection hierarchy dictates its id. This id is static throughout the lifetime of the object and will *never change*.
+A common misunderstanding is that a game object's place in the collection hierarchy changes when it becomes part of a parent-child hierarchy. However, these are two very different things. Parent-child hierarchies dynamically alters the scene graph which allows objects to be visually attached to each other. The only thing that dictates a game object's address is its place in the collection hierarchy. The address is static throughout the lifetime of the object.

+ 29 - 17
docs/en/manuals/editor.md

@@ -37,13 +37,9 @@ The Defold editor is separated into a set of panes, or views, that display speci
 The *Assets* view
 : 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:
 
-::: 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.
-   - <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.
+   - <kbd>Right click</kbd> to open a _context menu_ from where you can create new files or folders, rename, delete, track file dependencies and more.
 
 The *Editor* view
 
@@ -57,17 +53,11 @@ There is a toolbar in the top right corner of the scene view where you find obje
 
 ![toolbar](images/editor/toolbar.png){srcset="images/editor/[email protected] 2x"}
 
-If you have multiple files open, a separate tab for each file is shown at the top of the editor view. It is possible to open 2 editor views side by side. <kbd>Right click</kbd> the tab for the editor you want to move and select <kbd>Move to Other Tab Pane</kbd>.
-
-![2 panes](images/editor/2-panes.png){srcset="images/editor/[email protected] 2x"}
-
-You can also use the tab menu to swap the position of the two panes and join them to a single pane.
-
 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:
    - <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 move items. Drop a game object on another game object in a collection to child it.
-   - <kbd>Right click</kbd> to open a pop up menu from where you can add items, delete selected items etc.
+   - <kbd>Right click</kbd> to open a _context menu_ from where you can add items, delete selected items etc.
 
 The *Properties* view
 : This view shows properties associated with the currently selected item, like Position, Rotation, Animation etc, etc.
@@ -81,9 +71,17 @@ The *Changed Files* view:
    - <kbd>Double click</kbd> a file to open a diff view of the file. Editor 2 opens the file 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 (editor 2).
 
+## Side-by-side editing
+
+If you have multiple files open, a separate tab for each file is shown at the top of the editor view. It is possible to open 2 editor views side by side. <kbd>Right click</kbd> the tab for the editor you want to move and select <kbd>Move to Other Tab Pane</kbd>.
+
+![2 panes](images/editor/2-panes.png){srcset="images/editor/[email protected] 2x"}
+
+You can also use the tab menu to swap the position of the two panes and join them to a single pane.
+
 ## The scene editor
 
-The *Scene Editor* is used to create and edit game objects with their components and collections.
+Double clicking a collection or game object file brings up the *Scene Editor*:
 
 ![Select object](images/editor/select.jpg)
 
@@ -113,10 +111,6 @@ The rotate tool
 
   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, 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.
-:::
-
 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.
@@ -125,3 +119,21 @@ The scale tool
 
   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.
 
+## Creating new project files
+
+To create new resource files, either select <kbd>File ▸ New...</kbd> and then choose the file type from the menu, or use the context menu:
+
+<kbd>Right click</kbd> the target location in the *Assets* browser, then select <kbd>New... ▸ [file type]</kbd>:
+
+![create file](images/editor/create_file.png){srcset="images/editor/[email protected] 2x"}
+
+Type a suitable name for the new file. The full file name including the file type suffix is shown under *Path* in the dialog:
+
+![create file name](images/editor/create_file_name.png){srcset="images/editor/[email protected] 2x"}
+
+## Importing files to your project
+
+To add asset files (images, sounds, models etc) to your project, simply drag and drop them to the correct position in the *Assets* browser. This will make _copies_ of the files at the selected location in the project file structure.
+
+![Import files](images/editor/import.png){srcset="images/editor/[email protected] 2x"}
+

+ 179 - 0
docs/en/manuals/graphics.md

@@ -0,0 +1,179 @@
+---
+title: Defold graphics manual
+brief: This manual outlines Defold's support for graphical elements.
+---
+
+# Graphics
+
+Defold is a full 3D engine, but it is designed and built with strong support for 2D games. The editor is currently best suited for making 2D games. 
+
+## Importing Image Files
+
+Defold needs all assets that should be in your project hierarchy. Therefore you need to import all graphics asset files that you need for your graphics. To import an assets, simply drag the files from the file system on your computer and drop them in an appropriate place in the Defold editor _Project Explorer_.
+
+![Importing image files](images/graphics/import.png){srcset="images/graphics/[email protected] 2x"}
+
+Defold supports images in the PNG and JPEG image formats. For models, Defold uses the Collada DAE format.
+
+## Image resources
+
+In Defold, there are two types of resource that are used as an image source for visual components:
+
+![atlas](images/icons/atlas.png){.icon} Atlas
+: An atlas contains a list of separate images files, which are automatically combined into a larger texture image. Atlases can contain still images and *Animation Groups*, sets of images that together form a flipbook animation.
+
+  ![atlas](images/graphics/atlas.png){srcset="images/graphics/[email protected] 2x"}
+
+![tile source](images/icons/tilesource.png){.icon} Tile Source
+: A tile source references an image file that is already made out to consist of smaller sub-images ordered on a uniform grid. Another term commonly used for this type of compound image is _sprite sheet_. Tile sources can contain flipbook animations, defined by the first and last tile for the animation. It is also possible to use an image to automatically attach collision shapes to tiles.
+
+  ![tile source](images/graphics/tilesource.png){srcset="images/graphics/[email protected] 2x"}
+
+## Visual components
+
+There are several component types that get their image data from atlas or tile source image resources:
+
+![sprite](images/icons/sprite.png){.icon}
+: A sprite is a simple image or flipbook animation that is displayed on screen.
+
+  ![sprite](images/graphics/sprite.png){srcset="images/graphics/[email protected] 2x"}
+
+
+![tile map](images/icons/tilemap.png){.icon} Tile map
+: A tilemap component pieces together a map from tiles (image and collision shapes) that come from a tile source. Tile maps cannot use atlas sources.
+
+  ![tilemap](images/graphics/tilemap.png){srcset="images/graphics/[email protected] 2x"}
+
+
+![particle effect](images/icons/particlefx.png){.icon} Particle fx
+: Particles that are spawned from a particle emitter consist of a still image or a flipbook animation from an atlas or tile source. 
+
+  ![particles](images/graphics/particles.png){srcset="images/graphics/[email protected] 2x"}
+
+
+![gui](images/icons/gui.png){.icon} GUI
+: GUI box nodes and pie nodes can use still images and flip book animations from atlases and tile sources.
+
+  ![gui](images/graphics/gui.png){srcset="images/graphics/[email protected] 2x"}
+
+![spine](images/icons/spine-model.png){.icon} Spine model
+: Spine models gets their data from Spine scene resources. Those contain two pieces of data:
+
+  1. A Spine Json file that describes the bone animations.
+  2. An atlas that contain the images that are attached to the bones. Spine models cannot use data from tile maps.
+
+  ![spine](images/graphics/spine.png){srcset="images/graphics/[email protected] 2x"}
+
+
+
+## 3D graphics
+
+Models get its image data directly from an image file that is mapped onto the model according to the model's UV map:
+
+![model](images/icons/model.png){.icon} Model
+: 3D models 
+
+  ![model](images/graphics/model.png){srcset="images/graphics/[email protected] 2x"}
+
+Collada support
+: Defold's 3D support requires you to save or export model, skeleton and animation data in the _Collada_ format. This is a widely adopted format that most 3D modelling software supports. So you should be able to create assets in in _Maya_, _3D Max_, _Blender_, _Sketchup_ or any other popular software and then bring the results into Defold.
+
+  Defold currently only supports baked animations. Animations need to have matrices for each animated bone each keyframe, and not position, rotation and scale as separate keys.
+
+  Animations are also linearly interpolated. If you do more advanced curve interpolation the animations needs to be prebaked from the exporter.
+
+  Animation clips in Collada are not supported. To use multiple animations per model, export them into separate *.dae* files and gather the files into an *.animationset* file in Defold.
+
+Materials, shaders and textures
+: 3D software commonly allows you to set properties on your object vertices, like coloring and texturing. This information goes into the Collada *.dae* file that you export from your 3D software. Depending on the requirements of your game you will have to select and/or create appropriate and _performant_ materials for your objects. A material combines _shader programs_ with a set of parameters for rendering of the object.
+
+  You will also need to design and implement a game camera that works with your intended gameplay.
+
+  There is a simple 3D model material available in the built-in materials folder. If you need to create custom materials for your models, see the [Material documentation](/manuals/material) for information. The [Shader manual](/manuals/shader) contains information on how shader programs work.
+
+Rendering models
+: The default render script is tailor made for 2D games and does not work with 3D models. But by copying the default render script and adding a handful of lines of code to the render script you can enable rendering of your models. For instance:
+
+  ```lua
+
+  function init(self)
+    self.model_pred = render.predicate({"model"})
+    ...
+  end
+
+  function update()
+    ...
+    render.set_depth_mask(true)
+    render.enable_state(render.STATE_DEPTH_TEST)
+    render.set_projection(stretch_projection(-1000, 1000))  -- orthographic
+    render.draw(self.model_pred)
+    render.set_depth_mask(false)
+    ...
+  end
+  ```
+
+  See the [Render documentation](/manuals/render) for details on how render scripts work.
+
+
+## Z order
+
+All game objects and components are positioned in 3D space with positions expressed as vector3 objects. When you view your game's graphics content in 2D, the X and Y value determine the position of an object along the "width" and "height" axis, and the Z position determines the position along the "depth" axis. The Z position allows you to control the visibility of overlapping objects: a sprite with a Z value of 1 will appear in front of a sprite at Z position 0. By default, Defold uses a coordinate system allowing Z values between -1 and 1:
+
+![model](images/graphics/z-order.png){srcset="images/graphics/[email protected] 2x"}
+
+The numerical precision on the Z values with a near and far limit of -1 and 1 is very high. When working with 3D assets, you may need to change the near and far limits of the default projection in a custom render script. See the [Render manual](/manuals/render/) for more information.
+
+## Blend modes
+
+The *Blend Mode* property defines how the sprite should be blended with the graphics behind it. These are the available blend modes and how they are calculated:
+
+Alpha
+: Normal blending: a~0~ * rgb~0~ + (1 - a~0~) * rgb~1~
+
+Add
+: Brighten the background with the color values of the corresponding sprite pixels: rgb~0~ + rgb~1~
+
+Add Alpha (deprecated!)
+: Brighten the background with the corresponding visible sprite pixels: a~0~ * rgb~0~ + rgb~1~
+
+Multiply
+: Darken the background with values of the the corresponding sprite pixels: rgb~0~ * rgb~1~
+
+
+## Texture filtering and sampling
+
+You can control the filtering that is done during texture sampling. The filter method governs the visual result in cases when a _texel_ (a pixel in a texture) is not perfectly aligned with a screen pixel. This happens when you move a graphical element that contains the texture less than a pixel. The following filter methods are available:
+
+Nearest
+: The nearest texel will be picked to color the screen pixel. This sampling method should be chosen if you want a perfect one-to-one pixel mapping from your textures to what you see on screen. With nearest filtering everything will snap from pixel to pixel when moving. This may  look twitchy if the Sprite moves slowly.
+
+Linear
+: The texel will be averaged with its neighbors before coloring the screen pixel. This produces smooth appearances for slow, continuous motions as a Sprite will bleed into the pixels before fully coloring them--thus it is possible to move a Sprite less than a whole pixel.
+
+The setting for which filtering to use is stored in the [Project Settings](/manuals/project-settings) file. There are two settings:
+
+default_texture_min_filter
+: Minifying filtering applies whenever the texel is smaller than the screen pixel.
+
+default_texture_mag_filter
+: Magnifying filtering applies whenever the texel is larger than the screen pixel.
+
+Both settings accept the values `linear` or `nearest`. For example:
+
+```ini
+[graphics]
+default_texture_min_filter = nearest
+default_texture_mag_filter = nearest
+```
+
+If you don’t specify anything, both are set to `linear` by default.
+
+Note that the setting in "game.project" is used by in the default samplers. If you specify samplers in a custom material, you can set the filter method on each sampler specifically. See the [Materials manual](/manuals/material/) for details.
+
+## Materials and shaders
+
+The default material and shader files are located under "/builtins/materials/" in your project. The default shaders for sprites, tiles, spine models and models performs a texture lookup through a sampler with filtering set according to the settings in "game.project". The fragment shader also uses a fragment shader constant called `tint` that is multiplied with the texture color.
+
+You can set the `tint` and other shader constant while the game is running with the functions [`sprite.set_constant()`](/ref/sprite#sprite.set_constant) and [`sprite.reset_constant()`](/ref/sprite#sprite.reset_constant). Similar functions exist for other component types than sprites.
+
+The [Materials manual](/manuals/material/) explains how to create custom materials.

BIN
docs/en/manuals/images/2dgraphics/2dgraphics_animsheet.png


BIN
docs/en/manuals/images/2dgraphics/2dgraphics_atlas.png


BIN
docs/en/manuals/images/2dgraphics/2dgraphics_atlas_add.png


BIN
docs/en/manuals/images/2dgraphics/2dgraphics_component_position.png


BIN
docs/en/manuals/images/2dgraphics/2dgraphics_gameobject_position.png


BIN
docs/en/manuals/images/2dgraphics/2dgraphics_import1.png


BIN
docs/en/manuals/images/2dgraphics/2dgraphics_import2.png


BIN
docs/en/manuals/images/2dgraphics/2dgraphics_tilemap.png


BIN
docs/en/manuals/images/2dgraphics/2dgraphics_tilemap_go.png


BIN
docs/en/manuals/images/2dgraphics/2dgraphics_tiles_pick.png


BIN
docs/en/manuals/images/2dgraphics/2dgraphics_tilesource.png


BIN
docs/en/manuals/images/2dgraphics/2dgraphics_tilesource_add_animation.png


BIN
docs/en/manuals/images/2dgraphics/2dgraphics_tilesource_animation.png


BIN
docs/en/manuals/images/2dgraphics/2dgraphics_tilesource_collision.png


BIN
docs/en/manuals/images/atlas/add.png


BIN
docs/en/manuals/images/atlas/[email protected]


BIN
docs/en/manuals/images/atlas/add_animation.png


BIN
docs/en/manuals/images/atlas/[email protected]


BIN
docs/en/manuals/images/atlas/animation_group.png


BIN
docs/en/manuals/images/atlas/[email protected]


BIN
docs/en/manuals/images/atlas/atlas_properties.png


BIN
docs/en/manuals/images/atlas/[email protected]


BIN
docs/en/manuals/images/atlas/single_images.png


BIN
docs/en/manuals/images/atlas/[email protected]


BIN
docs/en/manuals/images/building_blocks/bean_collection.png


BIN
docs/en/manuals/images/building_blocks/[email protected]


BIN
docs/en/manuals/images/building_blocks/building_blocks.png


BIN
docs/en/manuals/images/building_blocks/[email protected]


BIN
docs/en/manuals/images/building_blocks/child_transform.png


BIN
docs/en/manuals/images/building_blocks/[email protected]


BIN
docs/en/manuals/images/building_blocks/childing.png


BIN
docs/en/manuals/images/building_blocks/[email protected]


BIN
docs/en/manuals/images/building_blocks/collection.png


BIN
docs/en/manuals/images/building_blocks/[email protected]


BIN
docs/en/manuals/images/building_blocks/components.png


BIN
docs/en/manuals/images/building_blocks/[email protected]


BIN
docs/en/manuals/images/building_blocks/go_instance.png


BIN
docs/en/manuals/images/building_blocks/go_instance2.png


BIN
docs/en/manuals/images/building_blocks/[email protected]


BIN
docs/en/manuals/images/building_blocks/[email protected]


BIN
docs/en/manuals/images/building_blocks/instance.png


BIN
docs/en/manuals/images/building_blocks/[email protected]


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


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


BIN
docs/en/manuals/images/editor/[email protected]


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


BIN
docs/en/manuals/images/editor/[email protected]


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


BIN
docs/en/manuals/images/editor/[email protected]


BIN
docs/en/manuals/images/graphics/atlas.png


BIN
docs/en/manuals/images/graphics/[email protected]


BIN
docs/en/manuals/images/graphics/gui.png


BIN
docs/en/manuals/images/graphics/[email protected]


BIN
docs/en/manuals/images/graphics/import.png


BIN
docs/en/manuals/images/graphics/[email protected]


BIN
docs/en/manuals/images/graphics/model.png


BIN
docs/en/manuals/images/graphics/[email protected]


BIN
docs/en/manuals/images/graphics/particles.png


BIN
docs/en/manuals/images/graphics/[email protected]


BIN
docs/en/manuals/images/graphics/spine.png


BIN
docs/en/manuals/images/graphics/[email protected]


BIN
docs/en/manuals/images/graphics/sprite.png


BIN
docs/en/manuals/images/graphics/[email protected]


BIN
docs/en/manuals/images/graphics/tilemap.png


BIN
docs/en/manuals/images/graphics/[email protected]


BIN
docs/en/manuals/images/graphics/tilesource.png


BIN
docs/en/manuals/images/graphics/[email protected]


BIN
docs/en/manuals/images/graphics/z-order.png


BIN
docs/en/manuals/images/graphics/[email protected]


BIN
docs/en/manuals/images/tilemap/animation.png


BIN
docs/en/manuals/images/tilemap/[email protected]


BIN
docs/en/manuals/images/tilemap/collision.png


BIN
docs/en/manuals/images/tilemap/[email protected]


BIN
docs/en/manuals/images/tilemap/paint_tiles.png


BIN
docs/en/manuals/images/tilemap/[email protected]


BIN
docs/en/manuals/images/tilemap/palette.png


BIN
docs/en/manuals/images/tilemap/[email protected]


BIN
docs/en/manuals/images/tilemap/pick_tiles.png


BIN
docs/en/manuals/images/tilemap/[email protected]


BIN
docs/en/manuals/images/tilemap/small_map.png


BIN
docs/en/manuals/images/tilemap/[email protected]


BIN
docs/en/manuals/images/tilemap/tilemap.png


BIN
docs/en/manuals/images/tilemap/[email protected]


BIN
docs/en/manuals/images/tilemap/tilesource.png


BIN
docs/en/manuals/images/tilemap/[email protected]


BIN
docs/en/manuals/images/tilemap/use_tilemap.png


BIN
docs/en/manuals/images/tilemap/[email protected]


+ 156 - 0
docs/en/manuals/tilemap.md

@@ -0,0 +1,156 @@
+---
+title: Defold tile map manual
+brief: This manual details Defold's support for tile maps.
+---
+
+# Tile map
+
+A *Tile Map* is a component that allows you to assemble, or paint, tiles from a *Tile Source* onto a large grid area. Tile maps are commonly used to build game level environments. You can also use the *Collision Shapes* from the tile source in your maps for collision detection and physics simulation.
+
+Before you can make a tile map you need to create a tile source.
+
+## Creating a tile source
+
+You need an image containing all the tiles. Each tile must have the exact same dimensions and be placed in a grid. Defold supports _spacing_ between the tiles and a _margin_ around each tile.
+
+![tile image](images/tilemap/small_map.png){srcset="images/tilemap/[email protected] 2x"}
+
+Once you have the source image created, you can create a Tile Source:
+
+- Import the image to your project by dragging it into a project location in the *Assets* browser.
+- Create a new tile source file (<kbd>right click</kbd> a location in the *Assets* browser, then select <kbd>New... ▸ Tile Source</kbd>).
+- Name the new file.
+- The file now opens in the tile source editor.
+- Click the browse-button next to the *Image* property and select your image. Now you should see the image displayed in the editor.
+- Adjust the *Properties* to match the source image. When everything is correct the tiles will line up perfectly.
+
+![Creating a Tile Source](images/tilemap/tilesource.png){srcset="images/tilemap/[email protected] 2x"}
+
+Size
+: The size of the source image.
+
+Tile Width
+: The width of each tile.
+
+Tile Height
+: The height of each tile.
+
+Tile Margin
+: The number of pixels surrounding each tile (orange in the image above).
+
+Tile Spacing
+: The number of pixels between each tile (blue in the image above).
+
+Inner Padding
+: Specifies how many empty pixels should be automatically added around the tile in the resulting texture used when the game is run.
+
+Extrude Border
+: Specifies how many times the edge pixels should be automatically replicated around the tile in the resulting texture used when the game is run.
+
+Collision
+: Specifies the image to use to automatically generate collision shapes for tiles.
+
+## Tile source flip-book animations
+
+To define an animation in a tile source the animation frame tiles must lie next to each other in a sequence left to right. The sequence can wrap from one row to the next. All newly created tile sources have a default animation named "anim". You can add new animations by <kbd>right clicking</kbd> the tile source root in the *Outline* and selecting <kbd>Add ▸ Animation</kbd>.
+
+Selecting an animation displays the animation *Properties*.
+
+![Tile Source animation](images/tilemap/animation.png){srcset="images/tilemap/[email protected] 2x"}
+
+Id
+: The identity of the animation. Must be unique for the tile source.
+
+Start Tile
+: The first tile of the animation. Numbering starts at 1 in the top left corner and goes to the right, line by line down to the bottom right corner.
+
+End Tile
+: The last tile of the animation.
+
+Playback
+: Specifies how the animation should play:
+
+  - `None` does not play back at all, the first image is displayed.
+  - `Once Forward` plays the animation one time from the first to the last image.
+  - `Once Backward` plays the animation one time from the last to the first image.
+  - `Once Ping Pong` plays the animation one time from the first to the last image and then back to the first image.
+  - `Loop Forward` plays the animation repeatedly from the first to the last image.
+  - `Loop Backward` plays the animation repeatedly from the last to the first image.
+  - `Loop Ping Pong` plays the animation repeatedly from the first to the last image and then back to the first image.
+
+Fps
+: The playback speed of the animation, expressed in frames per second (FPS).
+
+Flip horizontal
+: Flips the animation horizontally.
+
+Flip vertical
+: Flips the animation vertically.
+
+## Tile source collision shapes
+
+Defold uses an image specified in the *Collision* property to generate a _convex_ shape for each tile. The shape will outline the part of the tile that has color information, i.e. is not 100% transparent.
+
+Often it is sensible to use the same image for collision as the one containing the actual graphics, but you are free to specify a separate image if you want collision shapes that differ from the visuals. When you specify a collision image, the preview is updated with an outline on each tile indicating the generated collision shapes.
+
+The tile source outline lists collision groups that you have added to the tile source. New tile source files will get one "default" collision group added. You can add new groups by <kbd>right clicking</kbd> the tile source root in the *Outline* and selecting <kbd>Add ▸ Collision Group</kbd>.
+
+To select the tile shapes that should belong to a certain group, select the group in th *Outline*, then click each tile that you wish to assign to the group. The outline of the tile and shape is colored with the group's color. The color is automatically assigned to the group in the editor.
+
+![Collision Shapes](images/tilemap/collision.png){srcset="images/tilemap/[email protected] 2x"}
+
+To remove a tile from its collision group, select the tile source root element in the *Outline*, then click the tile.
+
+
+## Tile maps
+
+A *Tile Map* is a component that allows you to assemble, or _paint_, tiles from a tile source onto a grid area. Tile maps are commonly used to build game level environments. You can also use the *Collision Shapes* from the tile source in your maps for collision detection and physics simulation.
+
+To create a new tile map:
+
+- <kbd>right click</kbd> a location in the *Assets* browser, then select <kbd>New... ▸ Tile Map</kbd>).
+- Name the file.
+- The new tile map automatically opens in the tile map editor.
+
+  ![new tilemap](images/tilemap/tilemap.png){srcset="images/tilemap/[email protected] 2x"}
+
+- Set the *Tile Source* property to a tile source file that you have prepared.
+
+To paint tiles on your tile map:
+
+1. Select or create a *Layer* to paint on in the *Outline* view.
+2. Select a tile to use as brush (press <kbd>Space</kbd> to show the tile palette)
+
+   ![Palette](images/tilemap/palette.png){srcset="images/tilemap/[email protected] 2x"}
+
+3. Paint with the selected brush. To erase a tile, either pick an empty tile and use it as brush, or select the eraser (<kbd>Edit ▸ Select Eraser</kbd>).
+
+   ![Painting tiles](images/tilemap/paint_tiles.png){srcset="images/tilemap/[email protected] 2x"}
+
+You can pick tiles directly from a layer and use the selection as a brush. Hold <kbd>Shift</kbd> and click a tile to pick it up as the current brush. While holding <kbd>Shift</kbd> you can also click and drag to select a block of tiles to use as a larger brush.
+
+![Picking tiles](images/tilemap/pick_tiles.png){srcset="images/tilemap/[email protected] 2x"}
+
+## Adding a tile map to your game
+
+To add a tile map to your game:
+
+1. Create a game object to hold the tile map component. The game object can be in a file or created directly in a collection.
+2. Right-click the root of the game object and select <kbd>Add Component File</kbd>.
+3. Select the tile map file.
+
+![Use tile map](images/tilemap/use_tilemap.png){srcset="images/tilemap/[email protected] 2x"}
+
+## Changing tiles from script
+
+You can read and write the content of a tile map dynamically while your game is running. To do so, use the [`tilemap.get_tile()`](/ref/tilemap/#tilemap.get_tile) and [`tilemap.set_tile()`](/ref/tilemap/#tilemap.set_tile) functions:
+
+```lua
+local tile = tilemap.get_tile("/level#map", "ground", x, y)
+
+if tile == 2 then
+    -- Replace grass-tile (2) with dangerous hole tile (number 4).
+    tilemap.set_tile("/level#map", "ground", x, y, 4)
+end
+```
+