Added support for images

README.md

@@ -1,13 +1,15 @@
 # Defold-RichText
 Defold-RichText is a system to create styled text based on an HTML inspired markup language.
 
+
 # Installation
 You can use RichText in your own project by adding this project as a [Defold library dependency](http://www.defold.com/manuals/libraries/). Open your game.project file and in the dependencies field under project add:
 
 https://github.com/britzl/defold-richtext/archive/master.zip
 
 Or point to the ZIP file of a [specific release](https://github.com/britzl/defold-richtext/releases).
 
+
 # Markup format
 The markup format is HTML inspired, but not intended to be fully compatible with standard HTML. Just like in HTML the idea is that sections of text can be enclosed in matching start and end tags:
 
@@ -43,6 +45,7 @@ The following tags are supported:
 |       |                                                | `<color=1.0,0.5,0,1.0>Foobar</color>` |
 |       |                                                | `<color=#ff00ffff>Foobar</color>`     |
 | font  | Change font                                    | `<font=MyCoolFont>Foobar</font>`      |
+| img   | Display image                                  | `<img=texture:image></img>`           |
 
 ### Named colors
 The following named colors are supported:
@@ -92,19 +95,20 @@ The RichText library will create gui text nodes representing the markup in the t
 		},
 		width = 400,
 		position = vmath.vector3(0, 0, 0),
-		parent = gui.get_node("parent"),
+		parent = gui.get_node("bg"),
 		color = vmath.vector4(0.95, 0.95, 1.0, 1.0),
 	}
 
-	local text = "<size=3>RichText</size>Lorem <color=0,0.5,0,1>ipsum </color>dolor <color=red>sit </color><color=#ff00ffff>amet, </color><size=1.15><font=Nanum>consectetur </font></size>adipiscing elit. <b>Nunc </b>tincidunt <b><i>mattis</i> libero</b> <i>non viverra</i>.\n\nNullam ornare accumsan rhoncus.\n\nNunc placerat nibh a purus auctor, id scelerisque massa <size=2>rutrum.</size>"
+	local text = "<size=3>RichText</size>Lorem <color=0,0.5,0,1>ipsum </color><img=smileys:zombie></img> dolor <color=red>sit </color><color=#ff00ffff>amet, </color><size=1.15><font=Nanum>consectetur </font></size>adipiscing elit. <b>Nunc </b>tincidunt <b><i>mattis</i> libero</b> <i>non viverra</i>.\n\nNullam ornare <img=smileys:hungry></img>accumsan rhoncus.\n\nNunc placerat nibh a purus auctor, id scelerisque massa <size=2>rutrum.</size>"
 
 	richtext.create(text, "Roboto", settings)
 
 This would result in the following output:
 
 ![](docs/example.png)
 
-## API
+
+# API
 ### richtext.create(text, settings)
 Creates rich text gui nodes from a text containing markup.
 
@@ -134,3 +138,7 @@ Get all words with a specific tag.
 
 **RETURNS**
 * `words` (table) - A table with all the words that matches the tag.
+
+
+# Credits
+* Smiley icons in example app from [Flaticons](https://www.flaticon.com/packs/smileys-3)

example/assets/smileys.atlas

@@ -0,0 +1,192 @@
+images {
+  image: "/example/assets/images/smileys/angel.png"
+}
+images {
+  image: "/example/assets/images/smileys/angry.png"
+}
+images {
+  image: "/example/assets/images/smileys/baby.png"
+}
+images {
+  image: "/example/assets/images/smileys/bang.png"
+}
+images {
+  image: "/example/assets/images/smileys/book.png"
+}
+images {
+  image: "/example/assets/images/smileys/bored.png"
+}
+images {
+  image: "/example/assets/images/smileys/cheering.png"
+}
+images {
+  image: "/example/assets/images/smileys/confused.png"
+}
+images {
+  image: "/example/assets/images/smileys/cool.png"
+}
+images {
+  image: "/example/assets/images/smileys/crying.png"
+}
+images {
+  image: "/example/assets/images/smileys/cyclops.png"
+}
+images {
+  image: "/example/assets/images/smileys/dead.png"
+}
+images {
+  image: "/example/assets/images/smileys/drool.png"
+}
+images {
+  image: "/example/assets/images/smileys/dubious.png"
+}
+images {
+  image: "/example/assets/images/smileys/easter.png"
+}
+images {
+  image: "/example/assets/images/smileys/father.png"
+}
+images {
+  image: "/example/assets/images/smileys/flower.png"
+}
+images {
+  image: "/example/assets/images/smileys/furious.png"
+}
+images {
+  image: "/example/assets/images/smileys/graduated.png"
+}
+images {
+  image: "/example/assets/images/smileys/greed.png"
+}
+images {
+  image: "/example/assets/images/smileys/happy.png"
+}
+images {
+  image: "/example/assets/images/smileys/heart.png"
+}
+images {
+  image: "/example/assets/images/smileys/hungry.png"
+}
+images {
+  image: "/example/assets/images/smileys/hypnotized.png"
+}
+images {
+  image: "/example/assets/images/smileys/injury.png"
+}
+images {
+  image: "/example/assets/images/smileys/kiss.png"
+}
+images {
+  image: "/example/assets/images/smileys/late.png"
+}
+images {
+  image: "/example/assets/images/smileys/laughing.png"
+}
+images {
+  image: "/example/assets/images/smileys/moon.png"
+}
+images {
+  image: "/example/assets/images/smileys/music.png"
+}
+images {
+  image: "/example/assets/images/smileys/muted.png"
+}
+images {
+  image: "/example/assets/images/smileys/nerd.png"
+}
+images {
+  image: "/example/assets/images/smileys/nervous.png"
+}
+images {
+  image: "/example/assets/images/smileys/nurse.png"
+}
+images {
+  image: "/example/assets/images/smileys/outrage.png"
+}
+images {
+  image: "/example/assets/images/smileys/pain.png"
+}
+images {
+  image: "/example/assets/images/smileys/pirate.png"
+}
+images {
+  image: "/example/assets/images/smileys/police.png"
+}
+images {
+  image: "/example/assets/images/smileys/popcorn.png"
+}
+images {
+  image: "/example/assets/images/smileys/rich.png"
+}
+images {
+  image: "/example/assets/images/smileys/robot.png"
+}
+images {
+  image: "/example/assets/images/smileys/sad.png"
+}
+images {
+  image: "/example/assets/images/smileys/scared.png"
+}
+images {
+  image: "/example/assets/images/smileys/selfie.png"
+}
+images {
+  image: "/example/assets/images/smileys/shocked.png"
+}
+images {
+  image: "/example/assets/images/smileys/sick.png"
+}
+images {
+  image: "/example/assets/images/smileys/sleeping.png"
+}
+images {
+  image: "/example/assets/images/smileys/sleepy.png"
+}
+images {
+  image: "/example/assets/images/smileys/smart.png"
+}
+images {
+  image: "/example/assets/images/smileys/smile.png"
+}
+images {
+  image: "/example/assets/images/smileys/star.png"
+}
+images {
+  image: "/example/assets/images/smileys/sun.png"
+}
+images {
+  image: "/example/assets/images/smileys/surprised.png"
+}
+images {
+  image: "/example/assets/images/smileys/sweat.png"
+}
+images {
+  image: "/example/assets/images/smileys/thief.png"
+}
+images {
+  image: "/example/assets/images/smileys/thinking.png"
+}
+images {
+  image: "/example/assets/images/smileys/tired.png"
+}
+images {
+  image: "/example/assets/images/smileys/tongue.png"
+}
+images {
+  image: "/example/assets/images/smileys/ugly.png"
+}
+images {
+  image: "/example/assets/images/smileys/vampire.png"
+}
+images {
+  image: "/example/assets/images/smileys/whistle.png"
+}
+images {
+  image: "/example/assets/images/smileys/wink.png"
+}
+images {
+  image: "/example/assets/images/smileys/zombie.png"
+}
+margin: 0
+extrude_borders: 1
+inner_padding: 0

example/example.gui

@@ -27,6 +27,10 @@ fonts {
   name: "Roboto-Regular"
   font: "/example/assets/fonts/Roboto-Regular.font"
 }
+textures {
+  name: "smileys"
+  texture: "/example/assets/smileys.atlas"
+}
 background_color {
   x: 0.0
   y: 0.0

example/example.gui_script

@@ -1,6 +1,6 @@
 local richtext = require "richtext.richtext"
 
-local TEXT = "<size=3>RichText</size>Lorem <color=0,0.5,0,1>ipsum </color>dolor <color=red>sit </color><color=#ff00ffff>amet, </color><size=1.15><font=Nanum>consectetur </font></size>adipiscing elit. <b>Nunc </b>tincidunt <b><i>mattis</i> libero</b> <i>non viverra</i>.\n\nNullam ornare accumsan rhoncus.\n\nNunc placerat nibh a purus auctor, id scelerisque massa <size=2>rutrum.</size>"
+local TEXT = "<size=3>RichText</size>Lorem <color=0,0.5,0,1>ipsum </color><img=smileys:zombie></img> dolor <color=red>sit </color><color=#ff00ffff>amet, </color><size=1.15><font=Nanum>consectetur </font></size>adipiscing elit. <b>Nunc </b>tincidunt <b><i>mattis</i> libero</b> <i>non viverra</i>.\n\nNullam ornare <img=smileys:hungry></img>accumsan rhoncus.\n\nNunc placerat nibh a purus auctor, id scelerisque massa <size=2>rutrum.</size>"
 
 function init(self)
 	local settings = {

richtext/parse.lua

@@ -14,6 +14,12 @@ local function parse_tag(tag, params)
 		settings.bold = true
 	elseif tag == "i" then
 		settings.italic = true
+	elseif tag == "img" then
+		local texture, anim = params:match("(.-):(.*)")
+		settings.image = {
+			texture = texture,
+			anim = anim
+		}
 	end
 
 	return settings

richtext/richtext.lua

@@ -2,6 +2,8 @@ local parser = require "richtext.parse"
 
 local M = {}
 
+local V3_ZERO = vmath.vector3(0)
+local V3_ONE = vmath.vector3(1)
 
 local function get_trailing_whitespace(text)
 	return text:match("^.-(%s*)$") or ""
@@ -62,34 +64,50 @@ function M.create(text, font, settings)
 	}
 	local position = vmath.vector3(settings.position)
 	for _,word in pairs(words) do
+		--print("word: [" .. word.text .. "]")
+
 		-- get font to use based on word tags
 		local font = get_font(word, settings.fonts)
-
-		-- create and configure text node
-		local node = gui.new_text_node(vmath.vector3(0), word.text)
-		word.node = node
-		if settings.parent then
-			gui.set_parent(node, settings.parent)
-		end
-		gui.set_font(node, font)
-		gui.set_pivot(node, gui.PIVOT_NW)
-		gui.set_color(node, word.color)
-		gui.set_scale(node, vmath.vector3(1) * (word.size or 1))
-
 		-- cache some font measurements for the current font
 		if not font_sizes[font] then
 			font_sizes[font] = {
 				space = gui.get_text_metrics(font, " _").width - gui.get_text_metrics(font, "_").width,
 				height = gui.get_text_metrics(font, "Ij").height,
 			}
 		end
-
-		-- get metrics of node with and without trailing whitespace
-		word.metrics = gui.get_text_metrics_from_node(node)
-		word.metrics.total_width = (word.metrics.width + #get_trailing_whitespace(word.text) * font_sizes[font].space) * word.size
-		word.metrics.width = word.metrics.width * word.size
-		word.metrics.height = word.metrics.height * word.size
-
+
+		-- create and configure node
+		local node
+		if word.image then
+			node = gui.new_box_node(V3_ZERO, V3_ZERO)
+			gui.set_size_mode(node, gui.SIZE_MODE_AUTO)
+			gui.set_texture(node, word.image.texture)
+			gui.play_flipbook(node, hash(word.image.anim))
+
+			-- get metrics of node based on image size
+			local image_size = gui.get_size(node)
+			word.metrics = {}
+			word.metrics.total_width = image_size.x
+			word.metrics.width = image_size.x
+			word.metrics.height = image_size.y
+		else
+			node = gui.new_text_node(V3_ZERO, word.text)
+			gui.set_font(node, font)
+			gui.set_color(node, word.color)
+			gui.set_scale(node, V3_ONE * (word.size or 1))
+
+			-- get metrics of node with and without trailing whitespace
+			word.metrics = gui.get_text_metrics_from_node(node)
+			word.metrics.total_width = (word.metrics.width + #get_trailing_whitespace(word.text) * font_sizes[font].space) * word.size
+			word.metrics.width = word.metrics.width * word.size
+			word.metrics.height = word.metrics.height * word.size
+		end
+
+		word.node = node
+		if settings.parent then
+			gui.set_parent(node, settings.parent)
+		end
+		gui.set_pivot(node, gui.PIVOT_NW)
 
 		-- move word to next row if it overflows the width
 		local current_width = position.x - settings.position.x