Σήμανση εμπλουτισμένου κειμένου

Χρησιμοποιήστε σήμανση σε στοιχεία Label και κόμβους κειμένου GUI για να εφαρμόσετε ένθετα οπτικά στυλ και εφέ και να εξετάσετε συνδέσμους και sprite από τη Lua.

go.set("#label", "text", "Score: <color=#69D2E7>1200</color>")

Εναλλακτικά, ορίστε στη γραμματοσειρά ένα επαναχρησιμοποιήσιμο στυλ αντικειμένου με όνομα και επιλέξτε το από έναν σύνδεσμο:

local fontpath = "/fonts/ui.fontc"
font.set_style(fontpath, "menu_link", "<color=#69D2E7>")
go.set("#label", "text", "Open <link style=menu_link src=inventory>inventory</link>")

Αναφορά ετικετών

Ετικέτα	Σκοπός	Παράδειγμα
color	Ορισμός του χρώματος γεμίσματος των γλύφων.
size	Αλλαγή της διαμόρφωσης των γλύφων και του μεγέθους της διάταξης.
gradient	Εφαρμογή στατικής ή κινούμενης χρωματικής διαβάθμισης.
ul	Υπογράμμιση κειμένου.
strike	Προσθήκη γραμμής διαγραφής στο κείμενο.
outline	Ορισμός του πλάτους και του χρώματος περιγράμματος των γλύφων.
shadow	Προσθήκη σκιάς στο κείμενο.
shake	Εφαρμογή κινούμενης τυχαίας μετατόπισης.
wave	Μετακίνηση κειμένου σε κινούμενο ημιτονοειδές κύμα.
sprite	Προσθήκη αντικειμένου sprite μέσα στο κείμενο.
link	Προσθήκη διαδραστικού αντικειμένου συνδέσμου.

Σύνταξη

Στις ετικέτες και στα ονόματα γνωρισμάτων γίνεται διάκριση πεζών και κεφαλαίων. Μια ετικέτα με αντίστοιχη ετικέτα κλεισίματος εφαρμόζεται στο ορατό κείμενο UTF-32 που περικλείει. Τα αντικείμενα sprite χρησιμοποιούν αυτοκλειόμενες ετικέτες.

<color=#69D2E7>colored text</color>
<ul pattern=dashed>underlined text</ul>
<outline size=2 color=#000000>outlined text</outline>
<shadow x=2 y=-2 color=#00000080>shadowed text</shadow>
<sprite src=images/icon.png width=2em/>

Γνωρίσματα

Τα γνωρίσματα μπορούν να γράφονται χωρίς εισαγωγικά όταν δεν περιέχουν κενά διαστήματα ή να περικλείονται σε μονά ή διπλά εισαγωγικά. Τα color και size υποστηρίζουν μια σύντομη πρώτη τιμή, καθώς και τη μορφή με το όνομα value.

<color=#FF8800>Orange</color>
<color value="#FF8800">Orange</color>
<size='120%'>Larger</size>

Ένθεση

Οι ετικέτες πρέπει να κλείνουν με αντίστροφη σειρά από εκείνη με την οποία ανοίγουν. Οι τιμές ενός εσωτερικού στυλ αντικαθιστούν την ίδια ιδιότητα ενός εξωτερικού στυλ. Διαφορετικές ιδιότητες συνδυάζονται. Τα εφέ των τμημάτων κειμένου παραμένουν ενεργά ανεξάρτητα, οπότε οι ένθετες χρωματικές διαβαθμίσεις πολλαπλασιάζουν τα χρώματα και τα ένθετα εφέ θέσης προσθέτουν τις μετατοπίσεις τους.

<color=#FFCC00>
    Gold <outline size=2 color=#000000>with a black outline</outline>
</color>

Οντότητες χαρακτήρων

Χρησιμοποιήστε τα &, ', >, < και " για δεσμευμένους χαρακτήρες στο ορατό κείμενο. Προς το παρόν δεν υποστηρίζονται αριθμητικές οντότητες.

Ετικέτες

Οι ετικέτες εμπλουτισμένου κειμένου είτε μορφοποιούν ένα τμήμα κειμένου που περικλείουν είτε περιγράφουν ένα αντικείμενο που μπορεί να εξεταστεί από τη Lua. Οι ετικέτες στυλ χρησιμοποιούν μια αντίστοιχη ετικέτα κλεισίματος. Το αντικείμενο sprite είναι αυτοκλειόμενο, ενώ το link περικλείει το κείμενο του συνδέσμου.

color

Ορίζει το χρώμα γεμίσματος των γλύφων. Τα χρώματα χρησιμοποιούν τη μορφή #RRGGBB ή #RRGGBBAA. Το πρόθεμα της δίεσης είναι υποχρεωτικό· τα 0xFF0000 και FF0000 δεν είναι έγκυρα. Το αποτέλεσμα πολλαπλασιάζει το βασικό χρώμα του label ή του μηχανισμού απόδοσης.

<color=#00FF00>Opaque green</color>
<color=#00FF0080>Half-alpha green</color>

size

Αλλάζει τη διαμόρφωση των γλύφων και το μέγεθος της διάταξης, όχι μόνο την κλίμακα των κορυφών. Οι σχετικές τιμές χρησιμοποιούν πάντα το βασικό μέγεθος γραμματοσειράς της διάταξης. Δεν συσσωρεύονται με τις τιμές μιας εξωτερικής ετικέτας size.

<size=24px>Exactly 24 pixels</size>
<size=120%>120% of the layout base size</size>
<size=2em>Twice the layout base size</size>

gradient

Μια χρωματική διαβάθμιση δέχεται ακριβώς ένα πλήρες σύνολο γνωρισμάτων. Ο συνδυασμός διαφορετικών συνόλων ή η παράλειψη ενός γνωρίσματος δεν είναι έγκυρα.

Όταν παραλείπεται το fit, το fit=span κατανέμει τη διαβάθμιση σε ολόκληρο το κείμενο που περικλείεται στην ετικέτα. Το fit=glyph δειγματοληπτεί κάθε θέση του διαμορφωμένου κειμένου ανεξάρτητα. Το προαιρετικό hz καθορίζει τους πλήρεις κύκλους της κινούμενης ροής ανά δευτερόλεπτο· η προεπιλεγμένη τιμή μηδέν διατηρεί τη διαβάθμιση στατική. Η επαναλαμβανόμενη χρωματική κλίμακα με κατοπτρική συμμετρία ρέει συνεχώς και επανέρχεται στην αρχή χωρίς απότομη αλλαγή χρώματος. Η προεπιλογή είναι direction=forward· χρησιμοποιήστε direction=reverse για να αντιστρέψετε τη ροή.

<gradient left=#FF00FF right=#FFFFFF>Horizontal Gradient</gradient>

<gradient hz=0.25 fit=glyph bottom=#182848 top=#4B6CB7>Animated vertical glyphs</gradient>

<gradient hz=0.25 direction=reverse left=#FF0000 right=#0000FF>Reverse flow</gradient>

<gradient hz=0.25 direction=reverse fit=span left=#FF0000 right=#0000FF>One animated span color</gradient>

<gradient fit=glyph tl=#FF0000 tr=#00FF00 bl=#0000FF br=#FFFFFF>
    Four corners
</gradient>

Τεσσάρων γωνιών

Με κίνηση

Τα χρώματα της διαβάθμισης πολλαπλασιάζουν το τρέχον χρώμα γεμίσματος. Συνεπώς, μια διαβάθμιση μέσα σε color=#808080 δεν μπορεί να παράγει κανάλι φωτεινότερο από αυτόν τον βασικό πολλαπλασιαστή.

ul

Σχεδιάζει υπογράμμιση χρησιμοποιώντας τις μετρικές υπογράμμισης της γραμματοσειράς, όταν είναι διαθέσιμες. Η ετικέτα δεν έχει ανεξάρτητο χρώμα: η γραμμή κληρονομεί το τελικό χρώμα γεμίσματος, συμπεριλαμβανομένων των οριζόντιων, κατακόρυφων και τεσσάρων γωνιών διαβαθμίσεων.

<ul>Solid underline</ul>
<ul pattern=dashed>Dashed underline</ul>
<ul><gradient left=#FF00FF right=#FFFFFF>Gradient line</gradient></ul>

strike

Σχεδιάζει μια γραμμή διαγραφής μέσα στο κείμενο που περικλείει. Δέχεται τις ίδιες τιμές pattern με το ul και επίσης κληρονομεί το τελικό χρώμα γεμίσματος.

<strike>No longer available</strike>
<strike pattern=dashed>Dashed strikethrough</strike>

outline

Ορίζει το πλάτος του περιγράμματος, το χρώμα του ή και τα δύο. Απαιτείται τουλάχιστον ένα γνώρισμα. Το μηδενικό πλάτος απενεργοποιεί ρητά το περίγραμμα για το τμήμα κειμένου.

<outline size=3 color=#000000>Black outline</outline>
<outline color=#FF0000>Keep inherited width, change color</outline>
<outline size=0>Disable inherited outline</outline>

shadow

Προσθέτει σκιά με σκληρά άκρα στο κείμενο που περικλείει. Απαιτείται τουλάχιστον ένα γνώρισμα. Τα γνωρίσματα που παραλείπονται από μια ένθετη ετικέτα διατηρούν την τιμή της εξωτερικής σκιάς· όσα παραλείπονται από την πιο εξωτερική ετικέτα διατηρούν τη βασική τιμή σκιάς της γραμματοσειράς.

<shadow x=6 y=-6 blur=4 color=#000000A0>Shadow</shadow>
<shadow x=-2>Override only the horizontal offset</shadow>

shake

Εφαρμόζει μια ντετερμινιστική κινούμενη τυχαία μετατόπιση χωρίς να αλλάζει την αναδίπλωση γραμμών ή τα όρια της διάταξης. Το εφέ παρακολουθεί τον χρόνο εσωτερικά· τα script δεν χρειάζεται να τροποποιούν το κείμενο του label σε κάθε καρέ της κίνησης.

<shake>Default shake</shake>
<shake hz=12 amplitude=0.8 fit=glyph>Glyph shake</shake>
<shake hz=12 amplitude=0.8 fit=span>Rigid span shake</shake>

wave

Μετακινεί τους χαρακτήρες πάνω και κάτω με κινούμενο ημιτονοειδές κύμα, χωρίς να αλλάζει την αναδίπλωση γραμμών ή τα όρια της διάταξης. Η διάταξη συσσωρεύει τον χρόνο κίνησης όταν ενημερώνεται.

<wave>Animated character wave</wave>
<wave amplitude=4 hz=3 wavelength=8 fit=glyph>Travelling wave</wave>
<wave amplitude=4 hz=3 wavelength=8 fit=glyph direction=reverse>Reverse travelling wave</wave>
<wave amplitude=4 hz=1 fit=span>Whole span moves together</wave>

sprite

Προσθέτει ένα αυτοκλειόμενο αντικείμενο sprite στην τρέχουσα θέση του ορατού κειμένου. Τα γνωρίσματά του διατηρούνται ως μεταδεδομένα για τις label.get_layout_objects() και gui.get_layout_objects().

A <sprite src=engine/engine/content/builtins/assets/images/logo/logo_256.png/> logo
<sprite src=images/banner.png width=4em height=2em/>
<sprite src=images/icons.atlas animation=coin width=2em/>

Οι διαστάσεις δέχονται θετικές τιμές σε μονάδες διάταξης χωρίς επίθημα ή με px, em ή %. Τόσο το em όσο και το % χρησιμοποιούν το βασικό μέγεθος γραμματοσειράς της διάταξης κειμένου.

Κάθε διάσταση που παραλείπεται παίρνει ανεξάρτητα την προεπιλεγμένη τιμή 1em. Η παράλειψη και των δύο παράγει ένα αντικείμενο 1em × 1em· αν ορίσετε μόνο το πλάτος, το ύψος δεν προκύπτει αυτόματα από την αναλογία διαστάσεων ενός πόρου.

link

Περιγράφει ένα εύρος ορατού κειμένου ως αντικείμενο συνδέσμου. Το κείμενο που περικλείει διατάσσεται κανονικά και λαμβάνει από προεπιλογή το στυλ με όνομα link. Τα στοιχεία Label και GUI επιλέγουν τα link:hover και link:active ως απόκριση στην είσοδο, χωρίς να διαμορφώνουν ξανά το κείμενο. Δείτε τα Μηνύματα αλληλεπίδρασης για τα μηνύματα που παράγονται από την είσοδο σε συνδέσμους.

<ul><link id=website src=https://www.defold.com>www.defold.com</link></ul>
<link id=inventory style=menu_link action=open_inventory item=sword>Iron sword</link>

Το στοιχείο παρακολουθεί την κατάσταση του δείκτη για κάθε σύνδεσμο. Εφαρμόζει το link:hover όσο ο δείκτης βρίσκεται πάνω στον σύνδεσμο και το link:active όσο το κουμπί του δείκτη παραμένει πατημένο. Όταν δεν ισχύει καμία από τις δύο καταστάσεις, το στοιχείο επαναφέρει το στυλ που ονομάζεται στο γνώρισμα style του συνδέσμου ή το link όταν το γνώρισμα απουσιάζει.

Μηνύματα αλληλεπίδρασης

Η αλληλεπίδραση με συνδέσμους χρησιμοποιεί το κανονικό σύστημα εισόδου του Defold. Προσθέστε μια σύνδεση Mouse Trigger για το MOUSE_BUTTON_LEFT, η οποία ενεργοποιεί και την είσοδο με μία αφή, και αποκτήστε εστίαση εισόδου στο script του αντικειμένου παιχνιδιού ή στο script GUI:

function init(self)
    msg.post(".", "acquire_input_focus")
end

Δείτε την Εστίαση εισόδου και την Είσοδο ποντικιού και αφής για λεπτομέρειες ρύθμισης.

Όταν ένα στοιχείο label ή GUI λαμβάνει είσοδο δείκτη, οι σύνδεσμοι παράγουν τα ακόλουθα μηνύματα. Τα μηνύματα label αποστέλλονται στο αντικείμενο παιχνιδιού στο οποίο ανήκει το στοιχείο· τα μηνύματα GUI αποστέλλονται στο script GUI.

Κάθε μήνυμα περιέχει τα εξής πεδία:

function on_message(self, message_id, message)
    if message_id == hash("text_object_clicked") then
        assert(message.type == hash("link"))
        print(message.id, message.src)
    end
end

Στυλ με όνομα

Κάθε συλλογή γραμματοσειρών περιέχει στυλ αντικειμένων με όνομα που επηρεάζουν μόνο την απόδοση. Ένας σύνδεσμος χρησιμοποιεί το στυλ που ονομάζεται στο γνώρισμα style του ή το link όταν το γνώρισμα απουσιάζει. Δεν υπάρχει γενική ετικέτα <style> για τμήματα κειμένου.

Το Defold παρέχει τις ακόλουθες προεπιλογές:

Ορίστε ένα στυλ με μια συμβολοσειρά κειμένου που περιέχει ετικέτες ανοίγματος. Οι ετικέτες κλείνουν έμμεσα με αντίστροφη σειρά, επομένως δεν επιτρέπονται ετικέτες κλεισίματος ούτε ορατό κείμενο.

font.set_style("/fonts/ui.fontc", "link",
    "<color=#2673ff><outline color=#000000 size=1>")

font.set_style("/fonts/ui.fontc", "link:hover",
    "<color=#66b3ff><shake amplitude=0.2 hz=20>")

Οι ετικέτες εφαρμόζονται από αριστερά προς τα δεξιά, σαν να ήταν ένθετες γύρω από το κείμενο του αντικειμένου. Ένα στυλ αντικειμένου που επιλέγει ο καλών εφαρμόζεται μετά το προεπιλεγμένο στυλ. Όταν πολλές ετικέτες ορίζουν την ίδια ιδιότητα απόδοσης, η τιμή που εφαρμόζεται αργότερα αντικαθιστά τις προηγούμενες. Τα εφέ προστίθενται με σειρά από αριστερά προς τα δεξιά.

API αντικειμένων διάταξης

Χρησιμοποιήστε τη label.get_layout_objects() ή τη gui.get_layout_objects() για να ανακτήσετε τα αντικείμενα sprite και link από κείμενο του οποίου η διάταξη έχει υπολογιστεί.

label.get_layout_objects()

objects = label.get_layout_objects(url)

gui.get_layout_objects()

objects = gui.get_layout_objects(node)

Και οι δύο συναρτήσεις επιστρέφουν έναν νέο πίνακα που περιέχει τα τρέχοντα αντικείμενα διάταξης με τη σειρά εμφάνισής τους στο αρχικό κείμενο. Επιστρέφουν κενό πίνακα όταν το κείμενο δεν περιέχει ετικέτες αντικειμένων. Επειδή τα αντικείμενα και τα γνωρίσματά τους αντιγράφονται στη Lua σε κάθε κλήση, αποθηκεύστε προσωρινά το αποτέλεσμα και επαναλάβετε το ερώτημα αφού αλλάξετε το κείμενο ή κάποια άλλη ιδιότητα που αλλάζει τη διάταξή του.

Πεδία επιστρεφόμενων αντικειμένων

Παράδειγμα Lua

local text = [[
Read the <link src=https://defold.com/manuals/ id=manual>manual</link>
or inspect <sprite src=images/info.png width=2em/> for more information.
]]

go.set("#label", "text", text)

local objects = label.get_layout_objects("#label")
for _, object in ipairs(objects) do
    if object.type == "link" then
        print("link", object.attributes.src)
        print("visible range", object.text_offset, object.text_length)
        print("position", object.x, object.y)
    elseif object.type == "sprite" then
        print("sprite", object.x, object.y, object.width, object.height)
        pprint(object.attributes)
    end
end

local gui_objects = gui.get_layout_objects(gui.get_node("rich_text"))

Χρήσιμοι συνδυασμοί

Έγχρωμο περίγραμμα με οριζόντια διαβάθμιση

<outline size=2 color=#101820>
    <gradient left=#FEE715 right=#FF6F61>Gradient title</gradient>
</outline>

Η διαβάθμιση πολλαπλασιάζει μόνο το χρώμα γεμίσματος· το περίγραμμα διατηρεί το δικό του χρώμα.

Τρέμουλο σε μια πρόταση, διαβάθμιση σε μία λέξη

<shake hz=20 amplitude=0.5>
    This <gradient left=#FF00FF right=#FFFFFF>whole</gradient> text shakes!
</shake>

Το εξωτερικό εφέ θέσης εφαρμόζεται σε κάθε γλύφο. Το ένθετο εφέ χρώματος εφαρμόζεται μόνο στη λέξη «whole».

Αντικατάσταση μίας ιδιότητας με διατήρηση των υπόλοιπων

<color=#FFFFFF><outline size=2 color=#000000>
    Normal <color=#FF4040>warning</color> normal
</outline></color>

Το εσωτερικό χρώμα αλλάζει το γέμισμα διατηρώντας το κληρονομημένο πλάτος και χρώμα περιγράμματος.