mirror of
https://github.com/Insality/druid.git
synced 2025-06-27 10:27:47 +02:00
344 lines
16 KiB
HTML
344 lines
16 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
<head>
|
|
<title>Defold Druid UI Library</title>
|
|
<link rel="stylesheet" href="../ldoc_fixed.css" type="text/css" />
|
|
</head>
|
|
<body>
|
|
|
|
<div id="container">
|
|
|
|
<div id="product">
|
|
<div id="product_logo"></div>
|
|
<div id="product_name"><big><b></b></big></div>
|
|
<div id="product_description"></div>
|
|
</div> <!-- id="product" -->
|
|
|
|
|
|
<div id="main">
|
|
|
|
|
|
<!-- Menu -->
|
|
|
|
<div id="navigation">
|
|
<br/>
|
|
<h1>Druid</h1>
|
|
|
|
<ul>
|
|
<li><a href="../index.html">Index</a></li>
|
|
</ul>
|
|
|
|
<h2>Contents</h2>
|
|
<ul>
|
|
<li><a href="#Setup">Setup </a></li>
|
|
<li><a href="#Components">Components </a></li>
|
|
<li><a href="#Basic_usage">Basic usage </a></li>
|
|
<li><a href="#Druid_Events">Druid Events </a></li>
|
|
<li><a href="#Druid_lifecycle">Druid lifecycle </a></li>
|
|
<li><a href="#Features">Features </a></li>
|
|
<li><a href="#Examples">Examples </a></li>
|
|
<li><a href="#Documentation">Documentation </a></li>
|
|
<li><a href="#Games_powered_by_Druid">Games powered by Druid </a></li>
|
|
<li><a href="#License">License </a></li>
|
|
<li><a href="#Issues_and_suggestions">Issues and suggestions </a></li>
|
|
</ul>
|
|
|
|
|
|
<h2>Topics</h2>
|
|
<ul class="">
|
|
<li><a href="../topics/01-components.md.html">01-components</a></li>
|
|
<li><a href="../topics/02-creating_custom_components.md.html">Creating custom components</a></li>
|
|
<li><a href="../topics/03-styles.md.html">Styles</a></li>
|
|
<li><a href="../topics/04-druid_assets.md.html">Druid assets</a></li>
|
|
<li><a href="../topics/05-examples.md.html">Examples</a></li>
|
|
<li><a href="../topics/changelog.md.html">changelog</a></li>
|
|
<li><strong>README</strong></li>
|
|
</ul>
|
|
<h2>Modules</h2>
|
|
<ul class="nowrap">
|
|
<li><a href="../modules/druid.back_handler.html">druid.back_handler</a></li>
|
|
<li><a href="../modules/druid.blocker.html">druid.blocker</a></li>
|
|
<li><a href="../modules/druid.button.html">druid.button</a></li>
|
|
<li><a href="../modules/druid.checkbox.html">druid.checkbox</a></li>
|
|
<li><a href="../modules/druid.checkbox_group.html">druid.checkbox_group</a></li>
|
|
<li><a href="../modules/druid.grid.html">druid.grid</a></li>
|
|
<li><a href="../modules/druid.hover.html">druid.hover</a></li>
|
|
<li><a href="../modules/druid.input.html">druid.input</a></li>
|
|
<li><a href="../modules/druid.lang_text.html">druid.lang_text</a></li>
|
|
<li><a href="../modules/druid.progress.html">druid.progress</a></li>
|
|
<li><a href="../modules/druid.radio_group.html">druid.radio_group</a></li>
|
|
<li><a href="../modules/druid.scroll.html">druid.scroll</a></li>
|
|
<li><a href="../modules/druid.slider.html">druid.slider</a></li>
|
|
<li><a href="../modules/druid.swipe.html">druid.swipe</a></li>
|
|
<li><a href="../modules/druid.text.html">druid.text</a></li>
|
|
<li><a href="../modules/druid.timer.html">druid.timer</a></li>
|
|
<li><a href="../modules/component.html">component</a></li>
|
|
<li><a href="../modules/druid.html">druid</a></li>
|
|
<li><a href="../modules/druid_event.html">druid_event</a></li>
|
|
<li><a href="../modules/druid.helper.html">druid.helper</a></li>
|
|
<li><a href="../modules/druid_instance.html">druid_instance</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div id="content">
|
|
|
|
<a href="https://insality.github.io/druid/"><img src="media/druid_logo.png" alt=""/></a></p>
|
|
|
|
<p><a href="https://github.com/Insality/druid/releases"><img src="https://img.shields.io/github/v/release/insality/druid" alt="GitHub release (latest by date)"/></a></p>
|
|
|
|
<p><strong>Druid</strong> - powerful defold component UI library. Use basic <strong>Druid</strong> components or make your own game-specific components to make amazing GUI in your games.</p>
|
|
|
|
|
|
<p><a name="Setup"></a></p>
|
|
<h2>Setup</h2>
|
|
|
|
<h3>Dependency</h3>
|
|
|
|
<p>You can use the <strong>Druid</strong> extension in your own project by adding this project as a <a href="https://www.defold.com/manuals/libraries/">Defold library dependency</a>. Open your game.project file and in the dependencies field under project add:</p>
|
|
|
|
<blockquote>
|
|
<p><a href="https://github.com/Insality/druid/archive/master.zip">https://github.com/Insality/druid/archive/master.zip</a></p>
|
|
</blockquote>
|
|
|
|
<p>Or point to the ZIP file of a <a href="https://github.com/Insality/druid/releases">specific release</a>.</p>
|
|
|
|
<h3>Input bindings</h3>
|
|
|
|
<p>For <strong>Druid</strong> to work requires next input bindings:</p>
|
|
|
|
<ul>
|
|
<li>Mouse trigger - <code>Button 1</code> -> <code>touch</code> <em>For basic input components</em></li>
|
|
<li>Key trigger - <code>Backspace</code> -> <code>key_backspace</code> <em>For back</em>handler component, input component_</li>
|
|
<li>Key trigger - <code>Back</code> -> <code>key_back</code> <em>For back</em>handler component, Android back button, input component_</li>
|
|
<li>Key trigger - <code>Enter</code> -> <code>key_enter</code> <em>For input component, optional</em></li>
|
|
<li>Key trigger - <code>Esc</code> -> <code>key_esc</code> <em>For input component, optional</em></li>
|
|
</ul>
|
|
|
|
<p><img src="media/input_binding_2.png" alt=""/>
|
|
<img src="media/input_binding_1.png" alt=""/></p>
|
|
|
|
|
|
<h3>Input capturing [optional]</h3>
|
|
|
|
<p>By default, <strong>Druid</strong> will auto-capture input focus, if any input component will be created. So you don't need to call <code>msg.post(".", "acquire_input_focus)"</code></p>
|
|
|
|
<p>If you not need this behaviour, you can disable it by settings <code>druid.no_auto_input</code> field in <em>game.project</em>:</p>
|
|
<pre><code> [druid]
|
|
no_auto_input = 1
|
|
</code></pre>
|
|
|
|
|
|
<h3>Code [optional]</h3>
|
|
|
|
<p>Adjust <strong>Druid</strong> settings, if needed:</p>
|
|
|
|
<pre>
|
|
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
|
|
|
|
<span class="comment">-- Used for button component and custom components
|
|
</span><span class="comment">-- Callback should play sound by name
|
|
</span>druid.set_sound_function(callback)
|
|
|
|
<span class="comment">-- Used for lang_text component
|
|
</span><span class="comment">-- Callback should return localized string by locale id
|
|
</span>druid.set_text_function(callback)
|
|
|
|
<span class="comment">-- Used for change default druid style
|
|
</span>druid.set_default_style(your_style)
|
|
|
|
<span class="comment">-- Call this function on language changing in the game,
|
|
</span><span class="comment">-- to retranslate all lang_text components:
|
|
</span>druid.on_languge_change()
|
|
|
|
<span class="comment">-- Call this function on layout changing in the game,
|
|
</span><span class="comment">-- to reapply layouts
|
|
</span>druid.on_layout_change()
|
|
|
|
<span class="comment">-- Call this function inside window.set_listener
|
|
</span><span class="comment">-- to catch game focus lost/gained callbacks:
|
|
</span>druid.on_window_callback(event)
|
|
</pre>
|
|
|
|
|
|
|
|
<p><a name="Components"></a></p>
|
|
<h2>Components</h2>
|
|
|
|
<p><strong>Druid</strong> provides next basic components:</p>
|
|
|
|
<ul>
|
|
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#button">Button</a></strong> - Basic Druid input component</p></li>
|
|
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#text">Text</a></strong> - Basic Druid text component</p></li>
|
|
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#lang-text">Lang text</a></strong> - Wrap on Text component to handle localization</p></li>
|
|
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#scroll">Scroll</a></strong> - Basic Druid scroll component</p></li>
|
|
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#progress">Progress</a></strong> - Basic Druid progress bar component</p></li>
|
|
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#slider">Slider</a></strong> - Basic Druid slider component</p></li>
|
|
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#input">Input</a></strong> - Basic Druid text input component (unimplemented)</p></li>
|
|
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#checkbox">Checkbox</a></strong> - Basic Druid checkbox component</p></li>
|
|
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#checkbox-group">Checkbox group</a></strong> - Several checkboxes in one group</p></li>
|
|
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#radio-group">Radio group</a></strong> - Several checkboxes in one group with single choice</p></li>
|
|
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#blocker">Blocker</a></strong> - Block input in node zone component</p></li>
|
|
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#back-handler">Back Handler</a></strong> - Handle back button (Android back, backspace)</p></li>
|
|
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#timer">Timer</a></strong> - Handle timer work on gui text node</p></li>
|
|
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#grid">Grid</a></strong> - Component for manage node positions </p></li>
|
|
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#hover">Hover</a></strong> - System Druid component, handle hover node state</p></li>
|
|
<li><p><strong><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md#swipe">Swipe</a></strong> - System Druid component, handle swipe gestures on node</p></li>
|
|
</ul>
|
|
|
|
<p>Full info see on <em><a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md">components.md</a></em></p>
|
|
|
|
|
|
<p><a name="Basic_usage"></a></p>
|
|
<h2>Basic usage</h2>
|
|
|
|
<p>For using <strong>Druid</strong>, first you should create Druid instance to spawn components. Pass to new Druid instance main engine functions: <em>update</em>, *on<em>message* and *on</em>input*</p>
|
|
|
|
<p>All <strong>Druid</strong> components as arguments can apply node name string, you can don't do <code>gui.get_node()</code> before</p>
|
|
|
|
<p>All <strong>Druid</strong> and component methods calling with <code>:</code> like <code>self.druid:new_button()</code></p>
|
|
|
|
|
|
<pre>
|
|
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
|
|
|
|
<span class="keyword">local</span> <span class="keyword">function</span> button_callback(self)
|
|
<span class="global">print</span>(<span class="string">"Button was clicked!"</span>)
|
|
<span class="keyword">end</span>
|
|
|
|
<span class="keyword">function</span> init(self)
|
|
self.druid = druid.new(self)
|
|
self.druid:new_button(<span class="string">"button_node_name"</span>, button_callback)
|
|
<span class="keyword">end</span>
|
|
|
|
<span class="keyword">function</span> final(self)
|
|
self.druid:final()
|
|
<span class="keyword">end</span>
|
|
|
|
<span class="keyword">function</span> on_input(self, action_id, action)
|
|
<span class="keyword">return</span> self.druid:on_input(action_id, action)
|
|
<span class="keyword">end</span>
|
|
</pre>
|
|
|
|
|
|
<p><a name="Druid_Events"></a></p>
|
|
<h2>Druid Events</h2>
|
|
|
|
<p>Any <strong>Druid</strong> components as callbacks uses <a href="https://insality.github.io/druid/modules/druid_event.html">Druid Events</a>. In component API (<a href="https://insality.github.io/druid/modules/druid.button.html#Events">button example</a>) pointed list of component events. You can manually subscribe on this events by next API:</p>
|
|
|
|
<ul>
|
|
<li><p><strong>event:subscribe</strong>(callback)</p></li>
|
|
<li><p><strong>event:unsubscribe</strong>(callback)</p></li>
|
|
<li><p><strong>event:clear</strong>()</p></li>
|
|
</ul>
|
|
|
|
<p>Any events can handle several callbacks, if needed.</p>
|
|
|
|
|
|
<p><a name="Druid_lifecycle"></a></p>
|
|
<h2>Druid lifecycle</h2>
|
|
|
|
<p>Here is full druid lifecycle setup in your <strong>*.gui_script</strong> file:</p>
|
|
|
|
<pre>
|
|
<span class="keyword">local</span> druid = <span class="global">require</span>(<span class="string">"druid.druid"</span>)
|
|
|
|
<span class="keyword">function</span> init(self)
|
|
self.druid = druid.new(self)
|
|
<span class="keyword">end</span>
|
|
|
|
<span class="keyword">function</span> final(self)
|
|
self.druid:final()
|
|
<span class="keyword">end</span>
|
|
|
|
<span class="keyword">function</span> update(self, dt)
|
|
self.druid:update(dt)
|
|
<span class="keyword">end</span>
|
|
|
|
<span class="keyword">function</span> on_input(self, action_id, action)
|
|
<span class="keyword">return</span> self.druid:on_input(action_id, action)
|
|
<span class="keyword">end</span>
|
|
|
|
<span class="keyword">function</span> on_message(self, message_id, message, sender)
|
|
self.druid:on_message(message_id, message, sender)
|
|
<span class="keyword">end</span>
|
|
</pre>
|
|
|
|
|
|
<ul>
|
|
<li>*on_input* used for almost all basic druid components</li>
|
|
<li><em>update</em> used for progress bar, scroll and timer base components</li>
|
|
<li>*on_message* used for specific druid events, like language change or layout change (TODO: in future)</li>
|
|
<li><em>final</em> used for custom components, what have to do several action before destroy</li>
|
|
</ul>
|
|
|
|
<p>Recommended is fully integrate al druid lifecycles functions</p>
|
|
|
|
|
|
<p><a name="Features"></a></p>
|
|
<h2>Features</h2>
|
|
|
|
<ul>
|
|
<li>Druid input goes as stack. Last created button will checked first. So create your GUI from back</li>
|
|
<li>Don't forget about <code>return</code> in <code>on_input</code>: <code>return self.druid:on_input()</code>. It need, if you have more than 1 acquire inputs (several druid, other input system, etc)</li>
|
|
</ul>
|
|
|
|
|
|
<p><a name="Examples"></a></p>
|
|
<h2>Examples</h2>
|
|
|
|
<p>See the <a href="https://github.com/Insality/druid/tree/develop/example">example folder</a> for examples of how to use <strong>Druid</strong></p>
|
|
|
|
<p>See the <a href="https://github.com/insality/druid-assets">druid-assets repository</a> for examples of how to create custom components and styles</p>
|
|
|
|
<p>Try the <a href="https://insality.github.io/druid/druid/">HTML5 version</a> of the example app</p>
|
|
|
|
|
|
<p><a name="Documentation"></a></p>
|
|
<h2>Documentation</h2>
|
|
|
|
<p>To learn <strong>Druid</strong> better, read next documentation:
|
|
- <a href="https://github.com/Insality/druid/blob/master/docs_md/01-components.md">Druid components</a>
|
|
- <a href="https://github.com/Insality/druid/blob/master/docs_md/02-creating_custom_components.md">Create custom components</a>
|
|
- <a href="https://github.com/Insality/druid/blob/master/docs_md/03-styles.md">Druid styles</a>
|
|
- <a href="https://github.com/Insality/druid/blob/master/docs_md/04-druid_assets.md">Druid asset store</a></p>
|
|
|
|
<p>Full <strong>Druid</strong> documentation you can find here:
|
|
https://insality.github.io/druid/</p>
|
|
|
|
|
|
<p><a name="Games_powered_by_Druid"></a></p>
|
|
<h2>Games powered by Druid</h2>
|
|
|
|
<p><em>Will fill later</em></p>
|
|
|
|
|
|
<p><a name="License"></a></p>
|
|
<h2>License</h2>
|
|
|
|
<p>Original created by <a href="https://github.com/AGulev">AGulev</a></p>
|
|
|
|
<p>Developed and supporting by <a href="https://github.com/Insality">Insality</a></p>
|
|
|
|
<p>Assets from <a href="http://www.kenney.nl/">Kenney</a></p>
|
|
|
|
<p>MIT License</p>
|
|
|
|
|
|
<p><a name="Issues_and_suggestions"></a></p>
|
|
<h2>Issues and suggestions</h2>
|
|
|
|
<p>If you have any issues, questions or suggestions please <a href="https://github.com/Insality/druid/issues">create an issue</a> or contact me: <a href="mailto:insality@gmail.com">insality@gmail.com</a>
|
|
|
|
</div> <!-- id="content" -->
|
|
</div> <!-- id="main" -->
|
|
<div id="about">
|
|
<i>generated by <a href="http://github.com/stevedonovan/LDoc">LDoc 1.4.6</a></i>
|
|
<i style="float:right;">Last updated 2020-04-18 14:39:17 </i>
|
|
</div> <!-- id="about" -->
|
|
</div> <!-- id="container" -->
|
|
</body>
|
|
</html>
|