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

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

<?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: libgdx&#45;actor Pages: 1 -->
<svg width="969pt" height="724pt"
 viewBox="0.00 0.00 968.78 723.80" 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 719.8)">
<title>libgdx&#45;actor</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-719.8 964.781,-719.8 964.781,4 -4,4"/>
<!-- FileSystem -->
<g id="node1" class="node"><title>FileSystem</title>
<ellipse fill="none" stroke="black" cx="517.073" cy="-697.8" rx="54.4874" ry="18"/>
<text text-anchor="middle" x="517.073" y="-693.6" 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="430.073" cy="-624.8" rx="35.3315" ry="18"/>
<text text-anchor="middle" x="430.073" y="-620.6" 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="M497.331,-680.689C485.042,-670.66 469.103,-657.653 455.827,-646.818"/>
<polygon fill="black" stroke="black" points="457.921,-644.009 447.961,-640.398 453.495,-649.433 457.921,-644.009"/>
</g>
<!-- Json -->
<g id="node3" class="node"><title>Json</title>
<ellipse fill="none" stroke="black" cx="517.073" cy="-624.8" rx="28.4107" ry="18"/>
<text text-anchor="middle" x="517.073" y="-620.6" 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="M517.073,-679.613C517.073,-671.589 517.073,-661.847 517.073,-652.869"/>
<polygon fill="black" stroke="black" points="520.573,-652.829 517.073,-642.829 513.573,-652.829 520.573,-652.829"/>
</g>
<!-- Font -->
<g id="node4" class="node"><title>Font</title>
<ellipse fill="none" stroke="black" cx="595.073" cy="-624.8" rx="28.9929" ry="18"/>
<text text-anchor="middle" x="595.073" y="-620.6" font-family="Times,serif" font-size="14.00">Font</text>
</g>
<!-- FileSystem&#45;&gt;Font -->
<g id="edge3" class="edge"><title>FileSystem&#45;&gt;Font</title>
<path fill="none" stroke="black" d="M534.772,-680.689C545.76,-670.687 560.001,-657.724 571.885,-646.907"/>
<polygon fill="black" stroke="black" points="574.256,-649.481 579.295,-640.161 569.544,-644.304 574.256,-649.481"/>
</g>
<!-- TextureAtlas -->
<g id="node5" class="node"><title>TextureAtlas</title>
<ellipse fill="none" stroke="black" cx="447.073" cy="-519.2" rx="61.3916" ry="18"/>
<text text-anchor="middle" x="447.073" y="-515" font-family="Times,serif" font-size="14.00">TextureAtlas</text>
</g>
<!-- Image&#45;&gt;TextureAtlas -->
<g id="edge8" class="edge"><title>Image&#45;&gt;TextureAtlas</title>
<path fill="none" stroke="black" d="M428.342,-606.654C427.391,-592.636 427.083,-572.395 430.967,-555.2 431.617,-552.325 432.52,-549.403 433.57,-546.535"/>
<polygon fill="black" stroke="black" points="436.871,-547.714 437.551,-537.141 430.426,-544.982 436.871,-547.714"/>
<text text-anchor="middle" x="443.125" y="-567.8" font-family="Times,serif" font-size="14.00">load</text>
</g>
<!-- Texture -->
<g id="node7" class="node"><title>Texture</title>
<ellipse fill="none" stroke="black" cx="243.073" cy="-519.2" rx="41.1297" ry="18"/>
<text text-anchor="middle" x="243.073" y="-515" font-family="Times,serif" font-size="14.00">Texture</text>
</g>
<!-- Image&#45;&gt;Texture -->
<g id="edge7" class="edge"><title>Image&#45;&gt;Texture</title>
<path fill="none" stroke="black" d="M395.571,-620.971C351.715,-616.671 279.404,-606.998 260.39,-588.8 249.359,-578.242 244.957,-561.762 243.348,-547.601"/>
<polygon fill="black" stroke="black" points="246.819,-547.078 242.598,-537.36 239.838,-547.589 246.819,-547.078"/>
<text text-anchor="middle" x="342.914" y="-567.8" font-family="Times,serif" font-size="14.00">load/convert to opengl image</text>
</g>
<!-- Json&#45;&gt;TextureAtlas -->
<g id="edge9" class="edge"><title>Json&#45;&gt;TextureAtlas</title>
<path fill="none" stroke="black" d="M497.385,-611.347C489.159,-605.35 480.048,-597.556 473.65,-588.8 464.523,-576.309 458.083,-560.28 453.831,-546.859"/>
<polygon fill="black" stroke="black" points="457.172,-545.814 450.997,-537.205 450.455,-547.786 457.172,-545.814"/>
<text text-anchor="middle" x="515.284" y="-576.2" font-family="Times,serif" font-size="14.00">how the image</text>
<text text-anchor="middle" x="515.284" y="-559.4" font-family="Times,serif" font-size="14.00"> is divided</text>
</g>
<!-- Skin -->
<g id="node6" class="node"><title>Skin</title>
<ellipse fill="none" stroke="black" cx="587.073" cy="-519.2" rx="28.9929" ry="18"/>
<text text-anchor="middle" x="587.073" y="-515" font-family="Times,serif" font-size="14.00">Skin</text>
</g>
<!-- Json&#45;&gt;Skin -->
<g id="edge4" class="edge"><title>Json&#45;&gt;Skin</title>
<path fill="none" stroke="black" d="M536.543,-611.297C544.684,-605.29 553.71,-597.503 560.073,-588.8 569.222,-576.285 575.758,-560.256 580.105,-546.839"/>
<polygon fill="black" stroke="black" points="583.478,-547.775 583.01,-537.19 576.776,-545.757 583.478,-547.775"/>
</g>
<!-- Font&#45;&gt;Skin -->
<g id="edge5" class="edge"><title>Font&#45;&gt;Skin</title>
<path fill="none" stroke="black" d="M593.751,-606.693C592.507,-590.571 590.621,-566.153 589.17,-547.368"/>
<polygon fill="black" stroke="black" points="592.655,-547.034 588.396,-537.333 585.676,-547.573 592.655,-547.034"/>
</g>
<!-- TextureAtlas&#45;&gt;Skin -->
<g id="edge6" class="edge"><title>TextureAtlas&#45;&gt;Skin</title>
<path fill="none" stroke="black" d="M508.596,-519.2C521.787,-519.2 534.978,-519.2 548.17,-519.2"/>
<polygon fill="black" stroke="black" points="548.257,-522.7 558.257,-519.2 548.257,-515.7 548.257,-522.7"/>
</g>
<!-- AtlasRegion -->
<g id="node9" class="node"><title>AtlasRegion</title>
<ellipse fill="none" stroke="black" cx="427.073" cy="-430.4" rx="59.1276" ry="18"/>
<text text-anchor="middle" x="427.073" y="-426.2" font-family="Times,serif" font-size="14.00">AtlasRegion</text>
</g>
<!-- TextureAtlas&#45;&gt;AtlasRegion -->
<g id="edge12" class="edge"><title>TextureAtlas&#45;&gt;AtlasRegion</title>
<path fill="none" stroke="black" d="M443.121,-501.051C440.327,-488.925 436.524,-472.419 433.321,-458.519"/>
<polygon fill="black" stroke="black" points="436.672,-457.472 431.016,-448.513 429.85,-459.044 436.672,-457.472"/>
<text text-anchor="middle" x="468.818" y="-470.6" font-family="Times,serif" font-size="14.00">consists of</text>
</g>
<!-- SkinStyle -->
<g id="node16" class="node"><title>SkinStyle</title>
<ellipse fill="none" stroke="black" cx="588.073" cy="-91" rx="48.6926" ry="18"/>
<text text-anchor="middle" x="588.073" y="-86.8" font-family="Times,serif" font-size="14.00">SkinStyle</text>
</g>
<!-- Skin&#45;&gt;SkinStyle -->
<g id="edge27" class="edge"><title>Skin&#45;&gt;SkinStyle</title>
<path fill="none" stroke="black" d="M605.809,-505.211C625.321,-489.993 653.073,-462.825 653.073,-431.4 653.073,-431.4 653.073,-431.4 653.073,-163 653.073,-142.223 637.741,-124.88 621.971,-112.537"/>
<polygon fill="black" stroke="black" points="623.903,-109.615 613.762,-106.546 619.776,-115.269 623.903,-109.615"/>
<text text-anchor="middle" x="682.818" y="-293" font-family="Times,serif" font-size="14.00">consists of</text>
</g>
<!-- Texture&#45;&gt;TextureAtlas -->
<g id="edge10" class="edge"><title>Texture&#45;&gt;TextureAtlas</title>
<path fill="none" stroke="black" d="M284.355,-519.2C310.4,-519.2 344.75,-519.2 375.175,-519.2"/>
<polygon fill="black" stroke="black" points="375.325,-522.7 385.325,-519.2 375.325,-515.7 375.325,-522.7"/>
<text text-anchor="middle" x="334.882" y="-526.4" font-family="Times,serif" font-size="14.00">packed version</text>
</g>
<!-- TextureRegion -->
<g id="node8" class="node"><title>TextureRegion</title>
<ellipse fill="none" stroke="black" cx="176.073" cy="-430.4" rx="68.9216" ry="18"/>
<text text-anchor="middle" x="176.073" y="-426.2" font-family="Times,serif" font-size="14.00">TextureRegion</text>
</g>
<!-- Texture&#45;&gt;TextureRegion -->
<g id="edge11" class="edge"><title>Texture&#45;&gt;TextureRegion</title>
<path fill="none" stroke="black" d="M220.922,-503.581C213.457,-497.875 205.521,-490.859 199.582,-483.2 193.69,-475.602 188.879,-466.291 185.18,-457.669"/>
<polygon fill="black" stroke="black" points="188.423,-456.354 181.476,-448.355 181.919,-458.941 188.423,-456.354"/>
<text text-anchor="middle" x="229.818" y="-470.6" font-family="Times,serif" font-size="14.00">consists of</text>
</g>
<!-- Sprite -->
<g id="node10" class="node"><title>Sprite</title>
<ellipse fill="none" stroke="black" cx="238.073" cy="-341.6" rx="34.2045" ry="18"/>
<text text-anchor="middle" x="238.073" y="-337.4" font-family="Times,serif" font-size="14.00">Sprite</text>
</g>
<!-- Texture&#45;&gt;Sprite -->
<g id="edge14" class="edge"><title>Texture&#45;&gt;Sprite</title>
<path fill="none" stroke="black" d="M252.411,-501.619C255.117,-495.956 257.708,-489.467 259.073,-483.2 267.63,-443.896 256.779,-397.648 247.764,-369.23"/>
<polygon fill="black" stroke="black" points="251.043,-367.997 244.565,-359.613 244.401,-370.206 251.043,-367.997"/>
</g>
<!-- TextureRegion&#45;&gt;AtlasRegion -->
<g id="edge13" class="edge"><title>TextureRegion&#45;&gt;AtlasRegion</title>
<path fill="none" stroke="black" d="M245.324,-430.4C280.19,-430.4 322.36,-430.4 357.299,-430.4"/>
<polygon fill="black" stroke="black" points="357.42,-433.9 367.42,-430.4 357.42,-426.9 357.42,-433.9"/>
<text text-anchor="middle" x="306.396" y="-437.6" font-family="Times,serif" font-size="14.00">with entpacking info</text>
</g>
<!-- TextureRegion&#45;&gt;Sprite -->
<g id="edge15" class="edge"><title>TextureRegion&#45;&gt;Sprite</title>
<path fill="none" stroke="black" d="M188.027,-412.664C197.235,-399.772 210.104,-381.756 220.486,-367.221"/>
<polygon fill="black" stroke="black" points="223.61,-368.869 226.574,-358.698 217.914,-364.801 223.61,-368.869"/>
</g>
<!-- TextureRegionDrawable -->
<g id="node13" class="node"><title>TextureRegionDrawable</title>
<ellipse fill="none" stroke="black" cx="519.073" cy="-252.8" rx="106.481" ry="18"/>
<text text-anchor="middle" x="519.073" y="-248.6" font-family="Times,serif" font-size="14.00">TextureRegionDrawable</text>
</g>
<!-- TextureRegion&#45;&gt;TextureRegionDrawable -->
<g id="edge20" class="edge"><title>TextureRegion&#45;&gt;TextureRegionDrawable</title>
<path fill="none" stroke="black" d="M243.227,-426.069C302.785,-420.128 389.615,-403.853 451.073,-359.6 478.793,-339.639 498.028,-304.563 508.796,-280.3"/>
<polygon fill="black" stroke="black" points="512.078,-281.528 512.765,-270.955 505.635,-278.792 512.078,-281.528"/>
</g>
<!-- NinePatchDrawable -->
<g id="node14" class="node"><title>NinePatchDrawable</title>
<ellipse fill="none" stroke="black" cx="145.073" cy="-252.8" rx="88.5812" ry="18"/>
<text text-anchor="middle" x="145.073" y="-248.6" font-family="Times,serif" font-size="14.00">NinePatchDrawable</text>
</g>
<!-- TextureRegion&#45;&gt;NinePatchDrawable -->
<g id="edge21" class="edge"><title>TextureRegion&#45;&gt;NinePatchDrawable</title>
<path fill="none" stroke="black" d="M173.044,-412.243C167.65,-381.688 156.34,-317.627 149.876,-281.01"/>
<polygon fill="black" stroke="black" points="153.299,-280.266 148.114,-271.027 146.406,-281.483 153.299,-280.266"/>
</g>
<!-- AtlasSprite -->
<g id="node11" class="node"><title>AtlasSprite</title>
<ellipse fill="none" stroke="black" cx="388.073" cy="-341.6" rx="54.4662" ry="18"/>
<text text-anchor="middle" x="388.073" y="-337.4" font-family="Times,serif" font-size="14.00">AtlasSprite</text>
</g>
<!-- AtlasRegion&#45;&gt;AtlasSprite -->
<g id="edge16" class="edge"><title>AtlasRegion&#45;&gt;AtlasSprite</title>
<path fill="none" stroke="black" d="M419.367,-412.251C413.812,-399.887 406.211,-382.97 399.891,-368.904"/>
<polygon fill="black" stroke="black" points="403.053,-367.4 395.762,-359.713 396.668,-370.269 403.053,-367.4"/>
</g>
<!-- AtlasRegion&#45;&gt;TextureRegionDrawable -->
<g id="edge22" class="edge"><title>AtlasRegion&#45;&gt;TextureRegionDrawable</title>
<path fill="none" stroke="black" d="M463.45,-415.96C473.423,-410.651 483.332,-403.576 490.073,-394.4 514.515,-361.125 519.468,-312.041 519.919,-281.54"/>
<polygon fill="black" stroke="black" points="523.419,-281.205 519.909,-271.208 516.419,-281.211 523.419,-281.205"/>
</g>
<!-- AtlasRegion&#45;&gt;NinePatchDrawable -->
<g id="edge23" class="edge"><title>AtlasRegion&#45;&gt;NinePatchDrawable</title>
<path fill="none" stroke="black" d="M403.173,-413.882C382.241,-400.095 351.176,-379.154 325.073,-359.6 304.85,-344.451 302.208,-337.446 281.073,-323.6 251.881,-304.476 216.795,-286.582 189.573,-273.701"/>
<polygon fill="black" stroke="black" points="190.836,-270.427 180.295,-269.359 187.869,-276.767 190.836,-270.427"/>
</g>
<!-- Sprite&#45;&gt;AtlasSprite -->
<g id="edge17" class="edge"><title>Sprite&#45;&gt;AtlasSprite</title>
<path fill="none" stroke="black" d="M272.486,-341.6C287.597,-341.6 305.854,-341.6 323.351,-341.6"/>
<polygon fill="black" stroke="black" points="323.535,-345.1 333.535,-341.6 323.535,-338.1 323.535,-345.1"/>
<text text-anchor="middle" x="302.882" y="-348.8" font-family="Times,serif" font-size="14.00">extended</text>
</g>
<!-- SpriteDrawable -->
<g id="node12" class="node"><title>SpriteDrawable</title>
<ellipse fill="none" stroke="black" cx="323.073" cy="-252.8" rx="71.7641" ry="18"/>
<text text-anchor="middle" x="323.073" y="-248.6" font-family="Times,serif" font-size="14.00">SpriteDrawable</text>
</g>
<!-- Sprite&#45;&gt;SpriteDrawable -->
<g id="edge18" class="edge"><title>Sprite&#45;&gt;SpriteDrawable</title>
<path fill="none" stroke="black" d="M253.269,-325.082C266.119,-311.96 284.743,-292.941 299.523,-277.848"/>
<polygon fill="black" stroke="black" points="302.354,-279.96 306.85,-270.366 297.353,-275.062 302.354,-279.96"/>
</g>
<!-- AtlasSprite&#45;&gt;SpriteDrawable -->
<g id="edge19" class="edge"><title>AtlasSprite&#45;&gt;SpriteDrawable</title>
<path fill="none" stroke="black" d="M375.54,-323.864C365.98,-311.098 352.657,-293.306 341.828,-278.846"/>
<polygon fill="black" stroke="black" points="344.584,-276.687 335.788,-270.781 338.981,-280.883 344.584,-276.687"/>
</g>
<!-- Drawable -->
<g id="node15" class="node"><title>Drawable</title>
<ellipse fill="none" stroke="black" cx="442.073" cy="-164" rx="48.6327" ry="18"/>
<text text-anchor="middle" x="442.073" y="-159.8" font-family="Times,serif" font-size="14.00">Drawable</text>
</g>
<!-- SpriteDrawable&#45;&gt;Drawable -->
<g id="edge25" class="edge"><title>SpriteDrawable&#45;&gt;Drawable</title>
<path fill="none" stroke="black" d="M345.177,-235.677C364.199,-221.802 391.797,-201.672 412.678,-186.441"/>
<polygon fill="black" stroke="black" points="414.87,-189.174 420.887,-180.453 410.745,-183.519 414.87,-189.174"/>
</g>
<!-- TextureRegionDrawable&#45;&gt;Drawable -->
<g id="edge24" class="edge"><title>TextureRegionDrawable&#45;&gt;Drawable</title>
<path fill="none" stroke="black" d="M503.86,-234.651C492.248,-221.561 476.109,-203.369 463.238,-188.859"/>
<polygon fill="black" stroke="black" points="465.727,-186.391 456.472,-181.233 460.49,-191.036 465.727,-186.391"/>
</g>
<!-- NinePatchDrawable&#45;&gt;Drawable -->
<g id="edge26" class="edge"><title>NinePatchDrawable&#45;&gt;Drawable</title>
<path fill="none" stroke="black" d="M193.452,-237.661C249.158,-221.38 340.05,-194.817 395.139,-178.717"/>
<polygon fill="black" stroke="black" points="396.376,-182.002 404.992,-175.837 394.412,-175.283 396.376,-182.002"/>
</g>
<!-- Drawable&#45;&gt;SkinStyle -->
<g id="edge28" class="edge"><title>Drawable&#45;&gt;SkinStyle</title>
<path fill="none" stroke="black" d="M470.223,-149.31C493.074,-138.198 525.498,-122.43 550.553,-110.246"/>
<polygon fill="black" stroke="black" points="552.298,-113.289 559.76,-105.768 549.236,-106.994 552.298,-113.289"/>
</g>
<!-- Actor -->
<g id="node17" class="node"><title>Actor</title>
<ellipse fill="none" stroke="black" cx="588.073" cy="-18" rx="33.043" ry="18"/>
<text text-anchor="middle" x="588.073" y="-13.8" font-family="Times,serif" font-size="14.00">Actor</text>
</g>
<!-- SkinStyle&#45;&gt;Actor -->
<g id="edge29" class="edge"><title>SkinStyle&#45;&gt;Actor</title>
<path fill="none" stroke="black" d="M588.073,-72.8129C588.073,-64.7895 588.073,-55.0475 588.073,-46.0691"/>
<polygon fill="black" stroke="black" points="591.573,-46.0288 588.073,-36.0288 584.573,-46.0289 591.573,-46.0288"/>
</g>
<!-- Game -->
<g id="node18" class="node"><title>Game</title>
<ellipse fill="none" stroke="black" cx="715.073" cy="-164" rx="34.1871" ry="18"/>
<text text-anchor="middle" x="715.073" y="-159.8" font-family="Times,serif" font-size="14.00">Game</text>
</g>
<!-- Stage -->
<g id="node19" class="node"><title>Stage</title>
<ellipse fill="none" stroke="black" cx="747.073" cy="-91" rx="32.4808" ry="18"/>
<text text-anchor="middle" x="747.073" y="-86.8" font-family="Times,serif" font-size="14.00">Stage</text>
</g>
<!-- Game&#45;&gt;Stage -->
<g id="edge30" class="edge"><title>Game&#45;&gt;Stage</title>
<path fill="none" stroke="black" d="M722.656,-146.174C726.442,-137.774 731.107,-127.424 735.341,-118.029"/>
<polygon fill="black" stroke="black" points="738.625,-119.26 739.543,-108.705 732.243,-116.384 738.625,-119.26"/>
</g>
<!-- Stage&#45;&gt;Actor -->
<g id="edge34" class="edge"><title>Stage&#45;&gt;Actor</title>
<path fill="none" stroke="black" d="M722.577,-79.0618C695.695,-67.0577 652.354,-47.7042 622.161,-34.2219"/>
<polygon fill="black" stroke="black" points="623.416,-30.9491 612.858,-30.0676 620.562,-37.3408 623.416,-30.9491"/>
</g>
<!-- Camera -->
<g id="node20" class="node"><title>Camera</title>
<ellipse fill="none" stroke="black" cx="819.073" cy="-252.8" rx="41.1277" ry="18"/>
<text text-anchor="middle" x="819.073" y="-248.6" font-family="Times,serif" font-size="14.00">Camera</text>
</g>
<!-- Viewpoint -->
<g id="node21" class="node"><title>Viewpoint</title>
<ellipse fill="none" stroke="black" cx="819.073" cy="-164" rx="51.6054" ry="18"/>
<text text-anchor="middle" x="819.073" y="-159.8" font-family="Times,serif" font-size="14.00">Viewpoint</text>
</g>
<!-- Camera&#45;&gt;Viewpoint -->
<g id="edge31" class="edge"><title>Camera&#45;&gt;Viewpoint</title>
<path fill="none" stroke="black" d="M819.073,-234.651C819.073,-222.525 819.073,-206.019 819.073,-192.119"/>
<polygon fill="black" stroke="black" points="822.573,-192.113 819.073,-182.113 815.573,-192.113 822.573,-192.113"/>
</g>
<!-- Viewpoint&#45;&gt;Stage -->
<g id="edge32" class="edge"><title>Viewpoint&#45;&gt;Stage</title>
<path fill="none" stroke="black" d="M802.735,-146.889C792.986,-137.275 780.462,-124.925 769.763,-114.375"/>
<polygon fill="black" stroke="black" points="771.939,-111.606 762.361,-107.076 767.024,-116.59 771.939,-111.606"/>
</g>
<!-- Group -->
<g id="node22" class="node"><title>Group</title>
<ellipse fill="none" stroke="black" cx="925.073" cy="-164" rx="35.9174" ry="18"/>
<text text-anchor="middle" x="925.073" y="-159.8" font-family="Times,serif" font-size="14.00">Group</text>
</g>
<!-- Group&#45;&gt;Stage -->
<g id="edge33" class="edge"><title>Group&#45;&gt;Stage</title>
<path fill="none" stroke="black" d="M898.038,-152.217C867.057,-139.859 816.188,-119.568 782.171,-106"/>
<polygon fill="black" stroke="black" points="783.211,-102.647 772.626,-102.193 780.617,-109.149 783.211,-102.647"/>
</g>
<!-- Functionality -->
<g id="node23" class="node"><title>Functionality</title>
<ellipse fill="none" stroke="black" cx="99.0725" cy="-697.8" rx="62.5779" ry="18"/>
<text text-anchor="middle" x="99.0725" y="-693.6" font-family="Times,serif" font-size="14.00">Functionality</text>
</g>
<!-- Stateless -->
<g id="node24" class="node"><title>Stateless</title>
<ellipse fill="none" stroke="black" cx="153.073" cy="-624.8" rx="44.6549" ry="18"/>
<text text-anchor="middle" x="153.073" y="-620.6" font-family="Times,serif" font-size="14.00">Stateless</text>
</g>
<!-- Functionality&#45;&gt;Stateless -->
<g id="edge35" class="edge"><title>Functionality&#45;&gt;Stateless</title>
<path fill="none" stroke="black" d="M111.87,-679.974C118.528,-671.22 126.796,-660.349 134.175,-650.647"/>
<polygon fill="black" stroke="black" points="137.099,-652.584 140.367,-642.505 131.528,-648.346 137.099,-652.584"/>
</g>
<!-- Stateful -->
<g id="node25" class="node"><title>Stateful</title>
<ellipse fill="none" stroke="black" cx="41.0725" cy="-430.4" rx="41.1451" ry="18"/>
<text text-anchor="middle" x="41.0725" y="-426.2" font-family="Times,serif" font-size="14.00">Stateful</text>
</g>
<!-- Functionality&#45;&gt;Stateful -->
<g id="edge36" class="edge"><title>Functionality&#45;&gt;Stateful</title>
<path fill="none" stroke="black" d="M95.3561,-679.794C85.5583,-634.961 58.9588,-513.245 47.0167,-458.6"/>
<polygon fill="black" stroke="black" points="50.3874,-457.63 44.833,-448.608 43.5488,-459.124 50.3874,-457.63"/>
</g>
<!-- Stateless&#45;&gt;Texture -->
<g id="edge38" class="edge"><title>Stateless&#45;&gt;Texture</title>
<path fill="none" stroke="black" d="M159.408,-606.837C165.563,-591.991 176.02,-570.47 189.984,-555.2 195.484,-549.186 202.228,-543.729 209.039,-539.009"/>
<polygon fill="black" stroke="black" points="211.136,-541.821 217.616,-533.438 207.323,-535.951 211.136,-541.821"/>
<text text-anchor="middle" x="205.617" y="-567.8" font-family="Times,serif" font-size="14.00">Draw</text>
</g>
<!-- Stateless&#45;&gt;TextureRegion -->
<g id="edge37" class="edge"><title>Stateless&#45;&gt;TextureRegion</title>
<path fill="none" stroke="black" d="M153.633,-606.672C154.566,-582.906 156.868,-538.625 161.984,-501.2 163.92,-487.038 166.981,-471.429 169.756,-458.571"/>
<polygon fill="black" stroke="black" points="173.24,-459.029 171.989,-448.508 166.406,-457.512 173.24,-459.029"/>
<text text-anchor="middle" x="177.617" y="-515" font-family="Times,serif" font-size="14.00">Draw</text>
</g>
<!-- Stateful&#45;&gt;Sprite -->
<g id="edge39" class="edge"><title>Stateful&#45;&gt;Sprite</title>
<path fill="none" stroke="black" d="M49.0997,-412.378C55.4312,-400.812 65.3531,-386.118 78.3095,-377.6 112.82,-354.911 159.69,-346.706 193.733,-343.85"/>
<polygon fill="black" stroke="black" points="194.134,-347.331 203.859,-343.126 193.635,-340.349 194.134,-347.331"/>
<text text-anchor="middle" x="138.954" y="-381.8" font-family="Times,serif" font-size="14.00">Position,Scale,Rotate</text>
</g>
<!-- Stateful&#45;&gt;Actor -->
<g id="edge40" class="edge"><title>Stateful&#45;&gt;Actor</title>
<path fill="none" stroke="black" d="M30.6311,-412.818C20.9631,-395.852 8.0725,-368.395 8.0725,-342.6 8.0725,-342.6 8.0725,-342.6 8.0725,-90 8.0725,-35.9845 409.525,-22.7033 544.444,-19.765"/>
<polygon fill="black" stroke="black" points="544.881,-23.2567 554.806,-19.5484 544.735,-16.2582 544.881,-23.2567"/>
<text text-anchor="middle" x="66.0045" y="-204.2" font-family="Times,serif" font-size="14.00">mouseOver, onClick</text>
</g>
</g>
</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}
}