Browse Source

Updated BBCode tutorial with image size and vertical offset

PouleyKetchoupp 5 years ago
parent
commit
c04401213e
1 changed files with 13 additions and 0 deletions
  1. 13 0
      tutorials/gui/bbcode_in_richtextlabel.rst

+ 13 - 0
tutorials/gui/bbcode_in_richtextlabel.rst

@@ -74,6 +74,10 @@ Reference
 +-------------------+--------------------------------------------+--------------------------------------------------------------+
 +-------------------+--------------------------------------------+--------------------------------------------------------------+
 | **image**         | ``[img]{path}[/img]``                      | Insert image at resource {path}.                             |
 | **image**         | ``[img]{path}[/img]``                      | Insert image at resource {path}.                             |
 +-------------------+--------------------------------------------+--------------------------------------------------------------+
 +-------------------+--------------------------------------------+--------------------------------------------------------------+
+| **resized image** | ``[img=<width>]{path}[/img]``              | Insert image at resource {path} using <width> (keeps ratio). |
++-------------------+--------------------------------------------+--------------------------------------------------------------+
+| **resized image** | ``[img=<width>x<height>]{path}[/img]``     | Insert image at resource {path} using <width> & <height>.    |
++-------------------+--------------------------------------------+--------------------------------------------------------------+
 | **font**          | ``[font=<path>]{text}[/font]``             | Use custom font at <path> for {text}.                        |
 | **font**          | ``[font=<path>]{text}[/font]``             | Use custom font at <path> for {text}.                        |
 +-------------------+--------------------------------------------+--------------------------------------------------------------+
 +-------------------+--------------------------------------------+--------------------------------------------------------------+
 | **color**         | ``[color=<code/name>]{text}[/color]``      | Change {text} color; use name or # format, such as #ff00ff.  |
 | **color**         | ``[color=<code/name>]{text}[/color]``      | Change {text} color; use name or # format, such as #ff00ff.  |
@@ -108,6 +112,15 @@ For opaque RGB colors, any valid 6-digit hexadecimal code is supported, e.g. ``[
 For transparent RGB colors, any 8-digit hexadecimal code can be used, e.g. ``[color=#88ffffff]translucent white[/color]``.
 For transparent RGB colors, any 8-digit hexadecimal code can be used, e.g. ``[color=#88ffffff]translucent white[/color]``.
 In this case, note that the alpha channel is the **first** component of the color code, not the last one.
 In this case, note that the alpha channel is the **first** component of the color code, not the last one.
 
 
+Image vertical offset
+~~~~~~~~~~~~~~~~~~~~~
+
+You use a custom font for your image in order to align it vertically.
+
+1. Create a ``BitmapFont`` resource
+2. Set this bitmap font with a positive value for the ``ascent`` property, that's your height offset
+3. Set the BBCode tag this way: ``[font=<font-path>][img]{image-path}[/img][/font]``
+
 Animation effects
 Animation effects
 -----------------
 -----------------