Added Importing 2D graphics manual

docs/en/en.json

@@ -228,6 +228,10 @@
                         "path": "/manuals/importing-assets",
                         "name": "Importing and editing assets"
                     },
+                    {
+                        "path": "/manuals/importing-graphics",
+                        "name": "Importing and using 2D graphics"
+                    },
                     {
                         "path": "/manuals/importing-models",
                         "name": "Importing and using 3D models"

docs/en/manuals/importing-assets.md

@@ -1,6 +1,6 @@
 ---
 title: Importing and editing assets
-brief: This manual covers how to import and edit assets in Defold using external editors.
+brief: This manual covers how to import and edit assets.
 ---
 
 # Importing and editing assets
@@ -8,9 +8,9 @@ brief: This manual covers how to import and edit assets in Defold using external
 A game project usually consists of a large number of external assets that are produced in various specialized programs for producing graphics, 3D models, sound files, animations and so forth. Defold is built for a workflow where you work in your external tools and then import the assets into Defold as they are finalized.
 
 
-## Importing Assets
+## Importing assets
 
-Defold needs all the assets used in your project to be located somewhere in the project hierarchy. You therefore need to import all assets before you can use them. To import 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_.
+Defold needs all the assets used in your project to be located somewhere in the project hierarchy. You therefore need to import all assets before you can use them. To import assets, simply drag the files from the file system on your computer and drop them in an appropriate place in the Defold editor *Assets pane*.
 
 ![Importing files](images/graphics/import.png){srcset="images/graphics/[email protected] 2x"}
 
@@ -18,23 +18,24 @@ Defold needs all the assets used in your project to be located somewhere in the
 Defold supports images in the PNG and JPEG image formats. Other image formats need to be converted before they can be used.
 :::
 
-## Using Assets
 
-When the assets are imported into Defold they can be used by the various component types to create flipbook animations, tilemaps, particle effects and many other things:
+## Using assets
 
-* Images can be used to create texture [atlases](/manuals/atlas) and tile sources which in turn can be used by visual components such as [sprites](/manuals/sprite), [tilemaps](/manuals/tilemap) and [particle effects](/manuals/particlefx). Read more about this in the [Graphics manual](/manuals/graphics/#importing-image-files).
+When the assets are imported into Defold they can be used by the various component types supported by Defold:
+
+* Images can be used to create many kinds of visual components frequently used in 2D games. Read more about [how to import and use 2D graphics here](/manuals/importing-graphics).
 * Sounds can be used by the [Sound component](/manuals/sound) to play sounds.
 * Spine animation data is used by the [Spine component](/manuals/spinemodel) to show and animate Spine models.
 * Fonts are used by the [Label component](/manuals/label) and by [text nodes](/manuals/gui-text) in a GUI.
-* Collada models can be used by the [Model component](/manuals/model) to show 3D models with animations. [Read more about importing 3D models here](/manuals/importing-models).
+* Collada models can be used by the [Model component](/manuals/model) to show 3D models with animations. Read more about [how to import and use 3D models here](/manuals/importing-models).
 
 
-## Editing external Assets
+## Editing external assets
 
-Defold does not provide editing tools for creating images, sound files, models or animations. Such assets need to be created outside of Defold in specialized tools and imported into Defold. Defold automatically detects changes to any asset in the project hierarchy and updates the editor view accordingly.
+Defold does not provide editing tools for images, sound files, models or animations. Such assets need to be created outside of Defold in specialized tools and imported into Defold. Defold automatically detects changes to any asset among your project files and updates the editor view accordingly.
 
 
-## Editing Defold Assets
+## Editing Defold assets
 
 The editor saves all Defold assets in text based files that are merge friendly. They are also easy to create and modify with simple scripts. See [this forum thread](https://forum.defold.com/t/deftree-a-python-module-for-editing-defold-files/15210) for more information. Note though that we do not publish our file format details since they do change once in a while. You can also use [Editor Scripts](/manuals/editor-scripts/) to hook into certain life-cycle events in the Editor to run scripts to generate or modify assets.
 

docs/en/manuals/importing-graphics.md

@@ -0,0 +1,88 @@
+---
+title: Importing and using 2D graphics
+brief: This manual covers how to import and use 2D graphics.
+---
+
+# Importing 2D graphics
+
+Defold supports many kinds of visual components frequently used in 2D games. Use can use Defold to create static and animated sprites, UI components, particle effects, tile maps, bitmap fonts and Spine animations. Before you can create any of these visual components you need to import image files with the graphics that you wish to use. To import image files you simply drag the files from the file system on your computer and drop them in an appropriate place in the Defold editor *Assets pane*.
+
+![Importing files](images/graphics/import.png){srcset="images/graphics/[email protected] 2x"}
+
+::: sidenote
+Defold supports images in the PNG and JPEG image formats. Other image formats need to be converted before they can be used.
+:::
+
+
+## Creating Defold assets
+
+When the images are imported into Defold they can be used to create Defold specific assets:
+
+![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"}
+
+Learn more about the atlas resource in the [Atlas manual](/manuals/atlas).
+
+![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"}
+
+Learn more about the tile source resource in the [Tile source manual](/manuals/tilesource).
+
+![bitmap font](images/icons/font.png){.icon} Bitmap Font
+: A bitmap font has its glyphs in a PNG font sheet. These types of fonts provide no performance improvement from fonts generated from TrueType or OpenType font files, but can include arbitrary graphics, coloring and shadows right in the image.
+
+Learn more about bitmap fonts in the [Fonts manual](/manuals/font/#bitmap-bmfonts).
+
+  ![BMfont](images/font/bm_font.png){srcset="images/font/[email protected] 2x"}
+
+
+ The atlas and tile source assets can in turn be used to create:
+
+* Images can be used to create texture [atlases](/manuals/atlas) and tile sources which in turn can be used by visual components such as [sprites](/manuals/sprite), [tilemaps](/manuals/tilemap) and [particle effects](/manuals/particlefx). Read more about this in the [Graphics manual](/manuals/graphics/#importing-image-files).
+
+
+## Using Defold assets
+
+When you have converted the images into Atlas and Tile Source files you can use these to create several different kinds of visual components:
+
+![sprite](images/icons/sprite.png){.icon}
+: A sprite is either a static image or flipbook animation that is displayed on screen.
+
+  ![sprite](images/graphics/sprite.png){srcset="images/graphics/[email protected] 2x"}
+
+Learn more about sprites in the [Sprite manual](/manuals/sprite).
+
+![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"}
+
+Learn more about tilemaps in the [Tilemap manual](/manuals/tilemap).
+
+![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"}
+
+Learn more about particle effects in the [Particle fx manual](/manuals/particlefx).
+
+![gui](images/icons/gui.png){.icon} GUI
+: GUI box nodes and pie nodes can use still images and flipbook animations from atlases and tile sources.
+
+  ![gui](images/graphics/gui.png){srcset="images/graphics/[email protected] 2x"}
+
+Learn more about GUIs in the [GUI manual](/manuals/gui).
+
+![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"}
+
+Learn more about Spine models in the [Spine model manual](/manuals/spinemodel).