docs: add caption to images

docs/getting_started/create_new_project.rst

@@ -8,11 +8,17 @@ After closing a project, or whenever starting the Editor, Crown displays the
 Projects List. From here, you can open/manage existing projects or create new
 ones:
 
-.. image:: images/empty_projects_list.png
+.. figure:: images/empty_projects_list.png
+   :align: center
+
+   The Projects List with no projects yet.
 
 Click the ``Create New`` button to start creating a New Project:
 
-.. image:: images/new_project.png
+.. figure:: images/new_project.png
+   :align: center
+
+   The New Project dialog.
 
 First, choose a ``Name`` for your project.  If ``Create Project Folder`` is
 enabled, Crown will automatically create a project folder in the specified
@@ -25,4 +31,7 @@ templates, or leave it to ``None`` to start with a new empty project.
 When you are ready, click ``Create`` button and Crown will create the project
 and open it automatically:
 
-.. image:: images/new_project_editor.png
+.. figure:: images/new_project_editor.png
+   :align: center
+
+   A newly created project opened in the Editor.

docs/getting_started/for_the_impatient.rst

@@ -6,7 +6,10 @@ When you first launch the Crown Editor and no projects exist, Crown
 automatically generates a temporary project and opens it. This lets you
 explore the graphical interface immediately without any extra steps.
 
-.. image:: images/temp_project.png
+.. figure:: images/temp_project.png
+   :align: center
+
+   The temporary project created on first launch.
 
 At this point you can either jump straight into the :ref:`level_editor` to get
 a feel for its features, or close the temporary project and create a new one
@@ -14,7 +17,10 @@ yourself, for example, starting from a featureful template.
 
 To close the temporary project, choose ``File`` -> ``Close Project``:
 
-.. image:: images/temp_project_close.png
+.. figure:: images/temp_project_close.png
+   :align: center
+
+   Closing the temporary project from the File menu.
 
 You will be asked whether to save or discard the temporary project. Choose
 ``Save`` to keep your work (the project will then appear in the Projects
@@ -22,7 +28,10 @@ List), or ``Close without Saving`` to discard it. After closing the temporary
 project, Crown opens the Projects List, where you can :ref:`create a new
 project <create_new_project>`.
 
-.. image:: images/temp_project_close_confirmation.png
+.. figure:: images/temp_project_close_confirmation.png
+   :align: center
+
+   Confirmation dialog asking whether to save the temporary project.
 
 Tip: If you plan to continue working on what you created during this session,
 save the temporary project before closing. If you were just experimenting,

docs/getting_started/import_existing_project.rst

@@ -5,15 +5,24 @@ Importing an existing project
 Crown projects are just regular folders. If you want to import an existing
 project, click the ``Import...`` button in the projects list:
 
-.. image:: images/empty_projects_list.png
+.. figure:: images/empty_projects_list.png
+   :align: center
+
+   The Projects List with no projects yet.
 
 Then, select the folder containing the project and click the ``Open`` button:
 
-.. image:: images/import_project_select_folder.png
+.. figure:: images/import_project_select_folder.png
+   :align: center
+
+   Selecting an existing project folder to import.
 
 If the project is correctly recognized, Crown will add it to the projects list:
 
-.. image:: images/import_project_projects_list.png
+.. figure:: images/import_project_projects_list.png
+   :align: center
+
+   An imported project listed in the Projects List.
 
 When you are ready, click the ``Open`` button on the newly imported project to
 start working on it.

docs/importing_resources/importing_fonts.rst

@@ -1,4 +1,7 @@
 Importing Fonts
 ===============
 
-.. image:: images/import_font.png
+.. figure:: images/import_font.png
+   :align: center
+
+   The font import dialog.

docs/importing_resources/importing_resources.rst

@@ -14,13 +14,19 @@ can fine-tune import options.
 Import via Project Browser
 --------------------------
 
-.. image:: images/project_browser_right_click_import.png
+.. figure:: images/project_browser_right_click_import.png
+   :align: center
+
+   Importing resources via the Project Browser context menu.
 
 You can also import files from the Project Browser. Navigate to the target
 folder, right-click the folder, and choose ``Import...`` from the context
 menu. Crown will present a file picker:
 
-.. image:: images/import_dialog.svg
+.. figure:: images/import_dialog.svg
+   :align: center
+
+   The Import dialog for picking files and choosing the resource type.
 
 This method is useful when you want more control: the Import dialog lets you
 choose how Crown should process the selected files. That matters because the
@@ -28,4 +34,7 @@ same file extension can sometimes map to different resource types
 (for example, ``.png`` files can be imported as textures or as sprites). Use
 the resource-type selector to pick the desired resource:
 
-.. image:: images/import_dialog_select_resource_type.svg
+.. figure:: images/import_dialog_select_resource_type.svg
+   :align: center
+
+   Selecting the resource type in the Import dialog.

docs/importing_resources/importing_scenes.rst

@@ -7,7 +7,10 @@ Crown can import most useful elements from 3D scenes saved in FBX format. When
 you import an FBX file, Crown opens a dialog where you can select import
 options and choose which parts of the scene to bring into your project:
 
-.. image:: images/import_fbx.png
+.. figure:: images/import_fbx.png
+   :align: center
+
+   The FBX import dialog.
 
 FBX import dialog
 -----------------
@@ -36,13 +39,19 @@ Start by importing the FBX that contains the geometry and skeleton. In the
 Project Browser create or select the target folder, make sure ``Import
 Animations`` is unchecked, then click ``Import`` to begin:
 
-.. image:: images/import_fbx_unchecked_animations.svg
+.. figure:: images/import_fbx_unchecked_animations.svg
+   :align: center
+
+   Disabling animation import when importing geometry and skeleton.
 
 When the import completes, the unit (geometry), the skeleton, and any other
 objects you selected in the Unit section will appear as separate items in the
 Project Browser:
 
-.. image:: images/project_browser_import_clips_unit_and_skeleton.svg
+.. figure:: images/project_browser_import_clips_unit_and_skeleton.svg
+   :align: center
+
+   Imported unit, skeleton, and related resources in the Project Browser.
 
 2) Importing animation clips
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@@ -56,10 +65,16 @@ dialog:
 * Uncheck ``New Skeleton`` to indicate that the skeleton already exists.
 * Set ``Target Skeleton`` to the skeleton you imported in the previous step.
 
-.. image:: images/import_fbx_select_skeleton.svg
+.. figure:: images/import_fbx_select_skeleton.svg
+   :align: center
+
+   Selecting the target skeleton when importing animation clips.
 
 When the importer finishes, it creates an ``animations`` folder and places the
 imported clips inside it, with correct references to the existing skeleton and
 geometry:
 
-.. image:: images/project_browser_imported_clips.svg
+.. figure:: images/project_browser_imported_clips.svg
+   :align: center
+
+   Imported animation clips in the dedicated ``animations`` folder.

docs/importing_resources/importing_sprites.rst

@@ -11,7 +11,10 @@ dedicated target folder first. The importer generates multiple output files
 (sprites, units, materials etc.), so keeping them together makes the project
 easier to manage.
 
-.. image:: images/import_sprite.png
+.. figure:: images/import_sprite.png
+   :align: center
+
+   The Sprite Importer window.
 
 Sprite Importer overview
 ------------------------
@@ -52,7 +55,10 @@ Choose the sprite origin with the ``Pivot`` combobox. The preview area shows
 the pivot position so you can pick the point that makes placement and
 rotation easier.
 
-.. image:: images/sprite_pivot.svg
+.. figure:: images/sprite_pivot.svg
+   :align: center
+
+   The sprite pivot in the preview area.
 
 Collision and physics
 ---------------------

docs/level_editor/console.rst

@@ -6,7 +6,10 @@ The Console displays information, warnings, errors, and debug output from the
 Level Editor, the running game, and other engine components. It also lets you
 interact with runtime instances by sending commands and Lua expressions.
 
-.. image:: images/console.png
+.. figure:: images/console.png
+   :align: center
+
+   The Console displaying messages from the editor and runtimes.
 
 Runtime connections
 ===================
@@ -18,7 +21,10 @@ start the game from the Level Editor, Crown switches the Console to
 communicate with the game runtime. You can also select manually which runtime
 the Console talks to using the runtime selector:
 
-.. image:: images/console_runtime_selector.svg
+.. figure:: images/console_runtime_selector.svg
+   :align: center
+
+   The runtime selector in the Console.
 
 Commands
 ========
@@ -39,7 +45,10 @@ expression and prints the result back to the Console. This is useful for
 inspecting state, calling engine APIs, or invoking game code while the game
 is running.
 
-.. image:: images/console_lua_expression.svg
+.. figure:: images/console_lua_expression.svg
+   :align: center
+
+   Evaluating a Lua expression in the Console.
 
 History navigation
 ==================
@@ -57,4 +66,7 @@ instead of plain-text strings. When the Console detects such numeric IDs, it
 attempts to resolve them back to readable names so logs are easier to
 understand:
 
-.. image:: images/console_id_lookup.svg
+.. figure:: images/console_id_lookup.svg
+   :align: center
+
+   Automatic resource ID lookup in the Console.

docs/level_editor/level_editor.rst

@@ -8,7 +8,10 @@ After opening a :ref:`project` Crown immediately starts compiling the
 resources it contains. Once the process is complete, the Level Editor is
 launched and should look similar to the image below:
 
-.. image:: images/editor_overview.svg
+.. figure:: images/editor_overview.svg
+   :align: center
+
+   The Level Editor interface in its default configuration.
 
 The Level Editor is split into several panels:
 

docs/level_editor/level_viewport.rst

@@ -52,13 +52,19 @@ Selecting objects is the primary way to focus edits and transformations on
 specific objects in the scene. Left-click an object to select it; a dim
 orange outline will be drawn around selected objects in the viewport:
 
-.. image:: images/selected_cube.png
+.. figure:: images/selected_cube.png
+   :align: center
+
+   A selected cube highlighted in the Level Viewport.
 
 If a selected object is occluded by unselected ones, Crown still highlights it
 with a slightly dimmed orange outline so you can keep working with it even
 when it is not fully visible:
 
-.. image:: images/selected_sphere_occluded.png
+.. figure:: images/selected_sphere_occluded.png
+   :align: center
+
+   A selected sphere with dimmed highlighting where occluded.
 
 To clear the current selection, just left-click an empty area or press
 ``Shift + Ctrl + A``.
@@ -73,7 +79,10 @@ remove it from the selection.
 To select multiple objects by area, left-click and drag to draw a selection
 rectangle; any object that intersects that rectangle will be selected.
 
-.. image:: images/box_selection.png
+.. figure:: images/box_selection.png
+   :align: center
+
+   Box selection in the Level Viewport.
 
 Framing objects
 ===============
@@ -120,7 +129,10 @@ When one or more objects are selected, Crown displays a transform gizmo at the
 origin of the selection. The gizmo provides axis handles, planar handles and
 a camera-aligned handle. Interact with the gizmo using left-click and drag.
 
-.. image:: images/move_rotate_scale.png
+.. figure:: images/move_rotate_scale.png
+   :align: center
+
+   Move, rotate, and scale gizmos in the Level Viewport.
 
 Move gizmo
 ----------
@@ -161,7 +173,10 @@ coordinate system regardless of the selected object's local transformations.
 
 Toggle axis mode using the Local/World Axis control in the toolbar:
 
-.. image:: images/local_world_axis.svg
+.. figure:: images/local_world_axis.svg
+   :align: center
+
+   Toggling between local and world axis modes.
 
 Snapping
 ========
@@ -171,7 +186,10 @@ precision, enable grid and angle snapping to constrain transforms to fixed
 increments. Toggle snapping by clicking the ``Snap To Grid`` button on the
 toolbar:
 
-.. image:: images/toolbar_snap_to_grid.svg
+.. figure:: images/toolbar_snap_to_grid.svg
+   :align: center
+
+   The Snap To Grid control in the toolbar.
 
 With snapping enabled, movement and rotation will snap to the configured grid
 size and snap angle. Hold ``Left Ctrl`` while performing a transform to
@@ -181,7 +199,10 @@ Change the grid cell size or the snap angle with ``Ctrl+G`` and ``Ctrl+H``
 respectively. These shortcuts open dialogs where you can type exact numeric
 values for the grid spacing and angle increment:
 
-.. image:: images/grid_size_dialog.png
+.. figure:: images/grid_size_dialog.png
+   :align: center
+
+   Configuring grid size and snap angle.
 
 Relative and Absolute snapping
 ------------------------------
@@ -197,4 +218,7 @@ which is useful for aligning multiple objects to a common global grid.
 Switch between the two modes using the ``Relative Snap`` and ``Absolute Snap``
 toolbar buttons.
 
-.. image:: images/relative_absolute_snap.svg
+.. figure:: images/relative_absolute_snap.svg
+   :align: center
+
+   Relative and absolute snapping controls.

docs/level_editor/project_browser.rst

@@ -6,7 +6,10 @@ The Project Browser is where you view and manage the files and resources that
 make up your project. From here you can create or import new resources, open
 them, organize folders, and pin favorites for quick access.
 
-.. image:: images/project_browser.png
+.. figure:: images/project_browser.png
+   :align: center
+
+   The Project Browser showing folders and resources.
 
 Overview
 ========
@@ -18,7 +21,10 @@ displays the contents of the currently selected folder.
 If you prefer a single unified view that shows files and folders together,
 click the small tree icon at the top-right to toggle the layout mode:
 
-.. image:: images/project_browser_tree_view.svg
+.. figure:: images/project_browser_tree_view.svg
+   :align: center
+
+   The layout toggle in the Project Browser.
 
 Folder View
 ===========
@@ -27,13 +33,19 @@ The Folder View presents the resources inside the selected folder. You can
 switch between a icon view and a compact list view using the button at the
 top-right of the Folder View:
 
-.. image:: images/project_browser_icon_list_view.svg
+.. figure:: images/project_browser_icon_list_view.svg
+   :align: center
+
+   Switching between icon and list views in the Folder View.
 
 Resources such as units, materials, textures and other graphical content use
 thumbnails that show how they will appear at runtime. Other resource types
 use a simple icon.
 
-.. image:: images/project_browser_thumbnails.png
+.. figure:: images/project_browser_thumbnails.png
+   :align: center
+
+   Thumbnail previews for graphical resources in the Project Browser.
 
 Thumbnails generated in Crown are saved in a dedicated OS location so they can
 be used by other programs such as the file manager.
@@ -50,7 +62,10 @@ texture resource on disk consists of the original image file plus a generated
 When you need to inspect the actual files on disk use the button immediately
 to the right of the Search Bar to toggle visibility options:
 
-.. image:: images/project_browser_sorting_filtering.svg
+.. figure:: images/project_browser_sorting_filtering.svg
+   :align: center
+
+   The visibility and sorting controls in the Project Browser.
 
 With the same popup you can also control how the items should be sorted.
 

docs/level_editor/texture_settings.rst

@@ -6,7 +6,10 @@ The Texture Settings dialog lets you customize how Crown processes a texture
 for each target platform. To open it, double-click a texture in the
 :ref:`Project Browser`; Crown will display a dialog similar to this:
 
-.. image:: images/texture_settings_dialog.png
+.. figure:: images/texture_settings_dialog.png
+   :align: center
+
+   The Texture Settings dialog.
 
 Overview
 --------
@@ -19,7 +22,10 @@ After selecting platforms, the settings on the right update to reflect the
 current values. If the selected platforms have different values for a given
 option, a dash symbol (—) appears to indicate the inconsistency:
 
-.. image:: images/texture_settings_inconsistent_format.svg
+.. figure:: images/texture_settings_inconsistent_format.svg
+   :align: center
+
+   Inconsistent format values indicated by a dash symbol.
 
 Output
 ------

docs/reference/console_commands.rst

@@ -7,7 +7,10 @@ The following are commands that can be typed in the Console tab. In order for a
 command to be interpreted as such, you must prefix it with a colon symbol when
 entering it in the command prompt:
 
-.. image:: images/console_command.png
+.. figure:: images/console_command.png
+   :align: center
+
+   Typing a console command with the ``:`` prefix.
 
 crash
 -----