Libgdx Scene2d Actor System Overview Diagram

01-libgdx-sprite.md

• most basic way to display(draw) an image onscreen
• can be done with either Stateless(Texture, TextureRegion) or Stateful(Sprite)
• with the Stateless(Texture, TextureRegion) approach -> you need to specify the x,y coordinates on each draw call
• with the Stateful(Sprite) approach -> the needed x,y coordinates are saved into the Sprite object itself

01-libgdx-sprite.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.38.0 (20140413.2041)
 -->
<!-- Title: cfi Pages: 1 -->
<svg width="615pt" height="383pt"
 viewBox="0.00 0.00 615.29 383.40" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 379.4)">
<title>cfi</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-379.4 611.292,-379.4 611.292,4 -4,4"/>
<!-- FileSystem -->
<g id="node1" class="node"><title>FileSystem</title>
<ellipse fill="none" stroke="black" cx="436.539" cy="-357.4" rx="54.4874" ry="18"/>
<text text-anchor="middle" x="436.539" y="-353.2" font-family="Times,serif" font-size="14.00">FileSystem</text>
</g>
<!-- Image -->
<g id="node2" class="node"><title>Image</title>
<ellipse fill="none" stroke="black" cx="389.539" cy="-284.4" rx="35.3315" ry="18"/>
<text text-anchor="middle" x="389.539" y="-280.2" font-family="Times,serif" font-size="14.00">Image</text>
</g>
<!-- FileSystem&#45;&gt;Image -->
<g id="edge1" class="edge"><title>FileSystem&#45;&gt;Image</title>
<path fill="none" stroke="black" d="M425.401,-339.574C419.581,-330.783 412.348,-319.856 405.905,-310.124"/>
<polygon fill="black" stroke="black" points="408.712,-308.023 400.274,-301.617 402.875,-311.887 408.712,-308.023"/>
</g>
<!-- Json -->
<g id="node3" class="node"><title>Json</title>
<ellipse fill="none" stroke="black" cx="470.539" cy="-284.4" rx="28.4107" ry="18"/>
<text text-anchor="middle" x="470.539" y="-280.2" font-family="Times,serif" font-size="14.00">Json</text>
</g>
<!-- FileSystem&#45;&gt;Json -->
<g id="edge2" class="edge"><title>FileSystem&#45;&gt;Json</title>
<path fill="none" stroke="black" d="M444.596,-339.574C448.661,-331.086 453.68,-320.606 458.216,-311.132"/>
<polygon fill="black" stroke="black" points="461.377,-312.636 462.539,-302.105 455.063,-309.613 461.377,-312.636"/>
</g>
<!-- Texture -->
<g id="node4" class="node"><title>Texture</title>
<ellipse fill="none" stroke="black" cx="258.539" cy="-195.6" rx="41.1297" ry="18"/>
<text text-anchor="middle" x="258.539" y="-191.4" font-family="Times,serif" font-size="14.00">Texture</text>
</g>
<!-- Image&#45;&gt;Texture -->
<g id="edge3" class="edge"><title>Image&#45;&gt;Texture</title>
<path fill="none" stroke="black" d="M355.779,-279.262C320.305,-274.139 267.987,-264.115 255.857,-248.4 250.478,-241.432 249.598,-232.233 250.565,-223.522"/>
<polygon fill="black" stroke="black" points="254.007,-224.155 252.39,-213.684 247.125,-222.878 254.007,-224.155"/>
<text text-anchor="middle" x="338.38" y="-235.8" font-family="Times,serif" font-size="14.00">load/convert to opengl image</text>
</g>
<!-- TextureAtlas -->
<g id="node5" class="node"><title>TextureAtlas</title>
<ellipse fill="none" stroke="black" cx="462.539" cy="-195.6" rx="61.3916" ry="18"/>
<text text-anchor="middle" x="462.539" y="-191.4" font-family="Times,serif" font-size="14.00">TextureAtlas</text>
</g>
<!-- Image&#45;&gt;TextureAtlas -->
<g id="edge4" class="edge"><title>Image&#45;&gt;TextureAtlas</title>
<path fill="none" stroke="black" d="M405.204,-268.114C411.123,-262.123 417.809,-255.092 423.539,-248.4 430.787,-239.935 438.262,-230.27 444.704,-221.6"/>
<polygon fill="black" stroke="black" points="447.668,-223.477 450.755,-213.342 442.021,-219.34 447.668,-223.477"/>
</g>
<!-- Json&#45;&gt;TextureAtlas -->
<g id="edge5" class="edge"><title>Json&#45;&gt;TextureAtlas</title>
<path fill="none" stroke="black" d="M468.958,-266.251C467.841,-254.125 466.319,-237.619 465.038,-223.719"/>
<polygon fill="black" stroke="black" points="468.519,-223.35 464.116,-213.713 461.549,-223.992 468.519,-223.35"/>
<text text-anchor="middle" x="536.916" y="-235.8" font-family="Times,serif" font-size="14.00">how the image is divided</text>
</g>
<!-- Texture&#45;&gt;TextureAtlas -->
<g id="edge6" class="edge"><title>Texture&#45;&gt;TextureAtlas</title>
<path fill="none" stroke="black" d="M299.821,-195.6C325.867,-195.6 360.217,-195.6 390.642,-195.6"/>
<polygon fill="black" stroke="black" points="390.792,-199.1 400.792,-195.6 390.792,-192.1 390.792,-199.1"/>
<text text-anchor="middle" x="350.348" y="-202.8" font-family="Times,serif" font-size="14.00">packed version</text>
</g>
<!-- TextureRegion -->
<g id="node6" class="node"><title>TextureRegion</title>
<ellipse fill="none" stroke="black" cx="272.539" cy="-106.8" rx="68.9216" ry="18"/>
<text text-anchor="middle" x="272.539" y="-102.6" font-family="Times,serif" font-size="14.00">TextureRegion</text>
</g>
<!-- Texture&#45;&gt;TextureRegion -->
<g id="edge7" class="edge"><title>Texture&#45;&gt;TextureRegion</title>
<path fill="none" stroke="black" d="M257.211,-177.181C256.818,-167.058 256.963,-154.108 259.122,-142.8 259.642,-140.077 260.36,-137.292 261.197,-134.54"/>
<polygon fill="black" stroke="black" points="264.574,-135.485 264.599,-124.89 257.973,-133.157 264.574,-135.485"/>
<text text-anchor="middle" x="307.747" y="-147" font-family="Times,serif" font-size="14.00">(may) consists of</text>
</g>
<!-- Sprite -->
<g id="node8" class="node"><title>Sprite</title>
<ellipse fill="none" stroke="black" cx="305.539" cy="-18" rx="34.2045" ry="18"/>
<text text-anchor="middle" x="305.539" y="-13.8" font-family="Times,serif" font-size="14.00">Sprite</text>
</g>
<!-- Texture&#45;&gt;Sprite -->
<g id="edge10" class="edge"><title>Texture&#45;&gt;Sprite</title>
<path fill="none" stroke="black" d="M298.64,-190.872C319.249,-186.688 342.678,-177.914 355.539,-159.6 381.151,-123.13 349.767,-72.1884 326.42,-42.6907"/>
<polygon fill="black" stroke="black" points="328.849,-40.1329 319.803,-34.6168 323.435,-44.5699 328.849,-40.1329"/>
</g>
<!-- AtlasRegion -->
<g id="node7" class="node"><title>AtlasRegion</title>
<ellipse fill="none" stroke="black" cx="462.539" cy="-106.8" rx="59.1276" ry="18"/>
<text text-anchor="middle" x="462.539" y="-102.6" font-family="Times,serif" font-size="14.00">AtlasRegion</text>
</g>
<!-- TextureAtlas&#45;&gt;AtlasRegion -->
<g id="edge8" class="edge"><title>TextureAtlas&#45;&gt;AtlasRegion</title>
<path fill="none" stroke="black" d="M462.539,-177.451C462.539,-165.325 462.539,-148.819 462.539,-134.919"/>
<polygon fill="black" stroke="black" points="466.039,-134.913 462.539,-124.913 459.039,-134.913 466.039,-134.913"/>
<text text-anchor="middle" x="492.284" y="-147" font-family="Times,serif" font-size="14.00">consists of</text>
</g>
<!-- TextureRegion&#45;&gt;AtlasRegion -->
<g id="edge9" class="edge"><title>TextureRegion&#45;&gt;AtlasRegion</title>
<path fill="none" stroke="black" d="M341.671,-106.8C358.366,-106.8 376.214,-106.8 392.931,-106.8"/>
<polygon fill="black" stroke="black" points="393.173,-110.3 403.173,-106.8 393.173,-103.3 393.173,-110.3"/>
<text text-anchor="middle" x="372.363" y="-114" font-family="Times,serif" font-size="14.00">with entpacking info</text>
</g>
<!-- TextureRegion&#45;&gt;Sprite -->
<g id="edge11" class="edge"><title>TextureRegion&#45;&gt;Sprite</title>
<path fill="none" stroke="black" d="M279.059,-88.6511C283.744,-76.3265 290.15,-59.4778 295.487,-45.4389"/>
<polygon fill="black" stroke="black" points="298.863,-46.409 299.145,-35.8179 292.32,-43.9214 298.863,-46.409"/>
</g>
<!-- AtlasSprite -->
<g id="node9" class="node"><title>AtlasSprite</title>
<ellipse fill="none" stroke="black" cx="462.539" cy="-18" rx="54.4662" ry="18"/>
<text text-anchor="middle" x="462.539" y="-13.8" font-family="Times,serif" font-size="14.00">AtlasSprite</text>
</g>
<!-- AtlasRegion&#45;&gt;AtlasSprite -->
<g id="edge12" class="edge"><title>AtlasRegion&#45;&gt;AtlasSprite</title>
<path fill="none" stroke="black" d="M462.539,-88.6511C462.539,-76.5249 462.539,-60.019 462.539,-46.119"/>
<polygon fill="black" stroke="black" points="466.039,-46.1132 462.539,-36.1133 459.039,-46.1133 466.039,-46.1132"/>
</g>
<!-- Sprite&#45;&gt;AtlasSprite -->
<g id="edge13" class="edge"><title>Sprite&#45;&gt;AtlasSprite</title>
<path fill="none" stroke="black" d="M339.993,-18C356.904,-18 377.846,-18 397.606,-18"/>
<polygon fill="black" stroke="black" points="397.804,-21.5001 407.804,-18 397.804,-14.5001 397.804,-21.5001"/>
<text text-anchor="middle" x="373.848" y="-25.2" font-family="Times,serif" font-size="14.00">extended</text>
</g>
<!-- Functionality -->
<g id="node10" class="node"><title>Functionality</title>
<ellipse fill="none" stroke="black" cx="62.5389" cy="-195.6" rx="62.5779" ry="18"/>
<text text-anchor="middle" x="62.5389" y="-191.4" font-family="Times,serif" font-size="14.00">Functionality</text>
</g>
<!-- Stateless -->
<g id="node11" class="node"><title>Stateless</title>
<ellipse fill="none" stroke="black" cx="110.539" cy="-106.8" rx="44.6549" ry="18"/>
<text text-anchor="middle" x="110.539" y="-102.6" font-family="Times,serif" font-size="14.00">Stateless</text>
</g>
<!-- Functionality&#45;&gt;Stateless -->
<g id="edge14" class="edge"><title>Functionality&#45;&gt;Stateless</title>
<path fill="none" stroke="black" d="M72.0222,-177.451C78.97,-164.887 88.5177,-147.622 96.3688,-133.424"/>
<polygon fill="black" stroke="black" points="99.4622,-135.063 101.239,-124.618 93.3365,-131.675 99.4622,-135.063"/>
</g>
<!-- Stateful -->
<g id="node12" class="node"><title>Stateful</title>
<ellipse fill="none" stroke="black" cx="92.5389" cy="-18" rx="41.1451" ry="18"/>
<text text-anchor="middle" x="92.5389" y="-13.8" font-family="Times,serif" font-size="14.00">Stateful</text>
</g>
<!-- Functionality&#45;&gt;Stateful -->
<g id="edge15" class="edge"><title>Functionality&#45;&gt;Stateful</title>
<path fill="none" stroke="black" d="M58.5398,-177.465C54.2889,-156.308 49.1193,-119.372 56.5389,-88.8 60.3686,-73.0198 68.4262,-56.8157 75.9492,-43.9972"/>
<polygon fill="black" stroke="black" points="79.0275,-45.6722 81.2645,-35.3162 73.0577,-42.0169 79.0275,-45.6722"/>
</g>
<!-- Stateless&#45;&gt;Texture -->
<g id="edge17" class="edge"><title>Stateless&#45;&gt;Texture</title>
<path fill="none" stroke="black" d="M134.75,-122C159.58,-136.562 198.359,-159.306 225.891,-175.452"/>
<polygon fill="black" stroke="black" points="224.364,-178.614 234.76,-180.654 227.905,-172.576 224.364,-178.614"/>
<text text-anchor="middle" x="214.083" y="-147" font-family="Times,serif" font-size="14.00">Draw</text>
</g>
<!-- Stateless&#45;&gt;TextureRegion -->
<g id="edge16" class="edge"><title>Stateless&#45;&gt;TextureRegion</title>
<path fill="none" stroke="black" d="M155.665,-106.8C167.337,-106.8 180.254,-106.8 193.119,-106.8"/>
<polygon fill="black" stroke="black" points="193.4,-110.3 203.399,-106.8 193.399,-103.3 193.4,-110.3"/>
<text text-anchor="middle" x="179.472" y="-114" font-family="Times,serif" font-size="14.00">Draw</text>
</g>
<!-- Stateless&#45;&gt;Stateful -->
<g id="edge18" class="edge"><title>Stateless&#45;&gt;Stateful</title>
<path fill="none" stroke="black" d="M106.983,-88.6511C104.468,-76.5249 101.045,-60.019 98.1627,-46.119"/>
<polygon fill="black" stroke="black" points="101.545,-45.1942 96.0878,-36.1133 94.6913,-46.6157 101.545,-45.1942"/>
<text text-anchor="middle" x="119.083" y="-58.2" font-family="Times,serif" font-size="14.00">Draw</text>
</g>
<!-- Stateful&#45;&gt;Sprite -->
<g id="edge19" class="edge"><title>Stateful&#45;&gt;Sprite</title>
<path fill="none" stroke="black" d="M133.86,-18C170.463,-18 223.756,-18 261.232,-18"/>
<polygon fill="black" stroke="black" points="261.356,-21.5001 271.356,-18 261.356,-14.5001 261.356,-21.5001"/>
<text text-anchor="middle" x="202.524" y="-25.2" font-family="Times,serif" font-size="14.00">Position,Scale,Rotate</text>
</g>
</g>
</svg>

02-libgdx-actor.md

• Actor extends Sprite and allows for additional functionality like mouse hover/click
• the (optional) Skin can be used to modify the viewing part the Actor actor depending on the actors state. Example: Button class changes the image if it is hovered, clicked, disabled, etc and the ButtonStyle allows to define a different image for each state
• allows the usage of Actions -> to manipulate/animate(move,flip,etc..) Actors on the Stage

02-libgdx-actor.svg

03-libgdx-layout.md

• allows to put together different Widgets(Buttons,Labels,etc) into WidgetGroups(Table,VerticalGroup,Stack,etc) to define an UI

03-libgdx-layout.svg

04-libgdx-00-files.md

• the graphiz dot files
• can be easely edited for example with the atom editor and graphviz-preview-plus plugin

04-libgdx-01-sprite.dot

digraph "libgdx-sprite" {

FileSystem -> Image
FileSystem -> Json
Image -> Texture [label="load/convert to opengl image"]
Image -> TextureAtlas
Json -> TextureAtlas [label="how the image is divided"]
Texture -> TextureAtlas [label="packed version"]
Texture -> TextureRegion [label="(may) consists of"]
TextureAtlas -> AtlasRegion [label="consists of"]

TextureRegion -> AtlasRegion [label="with entpacking info"]

Texture -> Sprite
TextureRegion -> Sprite
AtlasRegion -> AtlasSprite
Sprite -> AtlasSprite [label="extended"]

Functionality -> Stateless, Stateful
Stateless -> TextureRegion [label="Draw"]
Stateless -> Texture [label="Draw"]
Stateless -> Stateful [label="Draw"]
Stateful -> Sprite [label="Position,Scale,Rotate"]

{ rank=same Image Json}
{ rank=same Functionality Texture TextureAtlas}
{ rank=same TextureRegion AtlasRegion Stateless}
{ rank=same Sprite AtlasSprite Stateful}
}

04-libgdx-02-actor.dot

digraph "libgdx-actor" {

FileSystem -> Image
FileSystem -> Json
FileSystem -> Font
Json, Font,TextureAtlas -> Skin
Image -> Texture [label="load/convert to opengl image"]
Image -> TextureAtlas [label="load"]
Json -> TextureAtlas [label="how the image\n is divided"]

Texture -> TextureAtlas [label="packed version"]
Texture -> TextureRegion [label="consists of"]
TextureAtlas -> AtlasRegion [label="consists of"]
TextureRegion -> AtlasRegion [label="with entpacking info"]

Texture -> Sprite
TextureRegion -> Sprite
AtlasRegion -> AtlasSprite
Sprite -> AtlasSprite [label="extended"]

Sprite -> SpriteDrawable
AtlasSprite -> SpriteDrawable
TextureRegion, AtlasRegion -> TextureRegionDrawable, NinePatchDrawable

TextureRegionDrawable -> Drawable
SpriteDrawable -> Drawable
NinePatchDrawable -> Drawable

Skin -> SkinStyle [label="consists of"]
Drawable -> SkinStyle -> Actor
Game -> Stage
Camera -> Viewpoint -> Stage
Group -> Stage
Stage -> Actor

Functionality -> Stateless, Stateful
Stateless -> TextureRegion [label="Draw"]
Stateless -> Texture [label="Draw"]
Stateful -> Sprite [label="Position,Scale,Rotate"]
Stateful -> Actor [label="mouseOver, onClick"]

{ rank=same Image Json Font}
{ rank=same Texture TextureAtlas Skin}
{ rank=same TextureRegion AtlasRegion }
{ rank=same Sprite AtlasSprite }
{ rank=same TextureRegionDrawable SpriteDrawable NinePatchDrawable }
}

04-libgdx-03-layout.dot

digraph "libgdx-layout" {

FileSystem -> Image
FileSystem -> Json
FileSystem -> Font
Json, Font,TextureAtlas -> Skin

Image -> Texture [label="load/convert to opengl image"]
Image -> TextureAtlas [label="load"]
Json -> TextureAtlas [label="how the image\n is divided"]

Texture -> TextureAtlas [label="packed version"]
Texture -> TextureRegion [label="consists of"]
TextureAtlas -> AtlasRegion [label="consists of"]
TextureRegion -> AtlasRegion [label="with entpacking info"]

Texture -> Sprite
TextureRegion -> Sprite
AtlasRegion -> AtlasSprite
Sprite -> AtlasSprite [label="extended"]

Sprite -> SpriteDrawable
AtlasSprite -> SpriteDrawable
TextureRegion, AtlasRegion -> TextureRegionDrawable, NinePatchDrawable

TextureRegionDrawable -> Drawable
SpriteDrawable -> Drawable
NinePatchDrawable -> Drawable# [label="better resizing"]

Skin -> SkinStyle [label="consists of"]
Drawable -> SkinStyle -> Actor
Actor -> Button,Label,TextField
Game -> Stage
Camera -> Viewpoint -> Stage
Group -> Stage
Group -> WidgetGroup

Functionality -> Stateless, Stateful
Stateless -> TextureRegion [label="Draw"]
Stateless -> Texture [label="Draw"]
Stateless -> Stateful [label="Draw"]
Stateful -> Sprite [label="Position,Scale,Rotate"]
Stateful -> Actor [label="mouseOver, onClick"]
Stateful -> WidgetGroup [label="layout"]

Stage -> WidgetGroup
Actor -> WidgetGroup [label="extended"]
WidgetGroup -> Table,VerticalGroup,Stack

Button,Label,TextField -> UI
Table,VerticalGroup,Stack -> UI

{ rank=same Image Json Font}
{ rank=same Texture TextureAtlas Skin}
{ rank=same TextureRegion AtlasRegion }
{ rank=same Sprite AtlasSprite }
{ rank=same TextureRegionDrawable SpriteDrawable NinePatchDrawable }
#{ rank=same WidgetGroup Actor}
{ rank=same Table,VerticalGroup,Stack Button,Label,TextField}
}