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

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

<?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="1091pt" height="959pt"
 viewBox="0.00 0.00 1090.58 958.60" 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 954.6)">
<title>cfi</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-954.6 1086.58,-954.6 1086.58,4 -4,4"/>
<!-- FileSystem -->
<g id="node1" class="node"><title>FileSystem</title>
<ellipse fill="none" stroke="black" cx="938.093" cy="-932.6" rx="54.4874" ry="18"/>
<text text-anchor="middle" x="938.093" y="-928.4" 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="851.093" cy="-859.6" rx="35.3315" ry="18"/>
<text text-anchor="middle" x="851.093" y="-855.4" 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="M918.352,-915.489C906.063,-905.46 890.124,-892.453 876.848,-881.618"/>
<polygon fill="black" stroke="black" points="878.942,-878.809 868.981,-875.198 874.516,-884.233 878.942,-878.809"/>
</g>
<!-- Json -->
<g id="node3" class="node"><title>Json</title>
<ellipse fill="none" stroke="black" cx="938.093" cy="-859.6" rx="28.4107" ry="18"/>
<text text-anchor="middle" x="938.093" y="-855.4" 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="M938.093,-914.413C938.093,-906.389 938.093,-896.647 938.093,-887.669"/>
<polygon fill="black" stroke="black" points="941.594,-887.629 938.093,-877.629 934.594,-887.629 941.594,-887.629"/>
</g>
<!-- Font -->
<g id="node4" class="node"><title>Font</title>
<ellipse fill="none" stroke="black" cx="1016.09" cy="-859.6" rx="28.9929" ry="18"/>
<text text-anchor="middle" x="1016.09" y="-855.4" 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="M955.793,-915.489C966.78,-905.487 981.022,-892.524 992.906,-881.707"/>
<polygon fill="black" stroke="black" points="995.277,-884.281 1000.32,-874.961 990.565,-879.104 995.277,-884.281"/>
</g>
<!-- TextureAtlas -->
<g id="node5" class="node"><title>TextureAtlas</title>
<ellipse fill="none" stroke="black" cx="894.093" cy="-754" rx="61.3916" ry="18"/>
<text text-anchor="middle" x="894.093" y="-749.8" 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="M847.513,-841.638C845.324,-827.183 844.244,-806.232 851.988,-790 854.127,-785.517 857.147,-781.407 860.599,-777.702"/>
<polygon fill="black" stroke="black" points="863.208,-780.055 868.147,-770.682 858.441,-774.929 863.208,-780.055"/>
<text text-anchor="middle" x="864.146" y="-802.6" 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="654.093" cy="-754" rx="41.1297" ry="18"/>
<text text-anchor="middle" x="654.093" y="-749.8" 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="M816.619,-855.615C772.314,-851.117 698.678,-841.199 678.411,-823.6 666.358,-813.133 660.278,-796.29 657.213,-781.913"/>
<polygon fill="black" stroke="black" points="660.65,-781.25 655.47,-772.007 653.756,-782.462 660.65,-781.25"/>
<text text-anchor="middle" x="760.935" y="-802.6" 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="M918.575,-846.254C911.003,-840.374 903.102,-832.64 898.671,-823.6 892.515,-811.04 891.036,-795.604 891.242,-782.557"/>
<polygon fill="black" stroke="black" points="894.752,-782.434 891.745,-772.275 887.76,-782.092 894.752,-782.434"/>
<text text-anchor="middle" x="940.305" y="-811" font-family="Times,serif" font-size="14.00">how the image</text>
<text text-anchor="middle" x="940.305" y="-794.2" 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="1020.09" cy="-754" rx="28.9929" ry="18"/>
<text text-anchor="middle" x="1020.09" y="-749.8" 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="M956.564,-845.972C964.703,-839.833 974.005,-831.977 981.093,-823.6 991.989,-810.724 1001.42,-794.367 1008.28,-780.854"/>
<polygon fill="black" stroke="black" points="1011.56,-782.129 1012.81,-771.608 1005.27,-779.052 1011.56,-782.129"/>
</g>
<!-- Font&#45;&gt;Skin -->
<g id="edge5" class="edge"><title>Font&#45;&gt;Skin</title>
<path fill="none" stroke="black" d="M1016.75,-841.493C1017.38,-825.371 1018.32,-800.953 1019.04,-782.168"/>
<polygon fill="black" stroke="black" points="1022.54,-782.26 1019.43,-772.133 1015.55,-781.99 1022.54,-782.26"/>
</g>
<!-- TextureAtlas&#45;&gt;Skin -->
<g id="edge6" class="edge"><title>TextureAtlas&#45;&gt;Skin</title>
<path fill="none" stroke="black" d="M955.617,-754C964.033,-754 972.448,-754 980.864,-754"/>
<polygon fill="black" stroke="black" points="981.129,-757.5 991.129,-754 981.129,-750.5 981.129,-757.5"/>
</g>
<!-- AtlasRegion -->
<g id="node9" class="node"><title>AtlasRegion</title>
<ellipse fill="none" stroke="black" cx="898.093" cy="-665.2" rx="59.1276" ry="18"/>
<text text-anchor="middle" x="898.093" y="-661" 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="M894.884,-735.851C895.443,-723.725 896.203,-707.219 896.844,-693.319"/>
<polygon fill="black" stroke="black" points="900.341,-693.464 897.305,-683.313 893.348,-693.142 900.341,-693.464"/>
<text text-anchor="middle" x="926.839" y="-705.4" 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="676.093" cy="-325.8" rx="48.6926" ry="18"/>
<text text-anchor="middle" x="676.093" y="-321.6" 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="M1021.04,-735.714C1021.92,-718.2 1023.09,-690.326 1023.09,-666.2 1023.09,-666.2 1023.09,-666.2 1023.09,-397.8 1023.09,-339.673 833.839,-328.677 734.864,-326.902"/>
<polygon fill="black" stroke="black" points="734.76,-323.4 724.708,-326.746 734.653,-330.399 734.76,-323.4"/>
<text text-anchor="middle" x="1052.84" y="-527.8" 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="M695.351,-754C730.143,-754 780.745,-754 822.182,-754"/>
<polygon fill="black" stroke="black" points="822.23,-757.5 832.23,-754 822.23,-750.5 822.23,-757.5"/>
<text text-anchor="middle" x="763.903" y="-761.2" 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="636.093" cy="-665.2" rx="68.9216" ry="18"/>
<text text-anchor="middle" x="636.093" y="-661" 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="M650.537,-735.851C648.023,-723.725 644.6,-707.219 641.717,-693.319"/>
<polygon fill="black" stroke="black" points="645.1,-692.394 639.642,-683.313 638.246,-693.816 645.1,-692.394"/>
<text text-anchor="middle" x="676.839" y="-705.4" 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="519.093" cy="-576.4" rx="34.2045" ry="18"/>
<text text-anchor="middle" x="519.093" y="-572.2" 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="M628.366,-739.929C606.893,-727.841 576.866,-708.015 558.093,-683.2 540.353,-659.749 530.004,-627.392 524.48,-604.655"/>
<polygon fill="black" stroke="black" points="527.836,-603.627 522.209,-594.65 521.01,-605.177 527.836,-603.627"/>
</g>
<!-- TextureRegion&#45;&gt;AtlasRegion -->
<g id="edge13" class="edge"><title>TextureRegion&#45;&gt;AtlasRegion</title>
<path fill="none" stroke="black" d="M705.274,-665.2C743.244,-665.2 790.205,-665.2 828.276,-665.2"/>
<polygon fill="black" stroke="black" points="828.763,-668.7 838.763,-665.2 828.763,-661.7 828.763,-668.7"/>
<text text-anchor="middle" x="771.917" y="-672.4" 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="M614.361,-648.077C595.077,-633.771 566.831,-612.815 546.101,-597.436"/>
<polygon fill="black" stroke="black" points="548.12,-594.576 538.003,-591.429 543.949,-600.198 548.12,-594.576"/>
</g>
<!-- TextureRegionDrawable -->
<g id="node13" class="node"><title>TextureRegionDrawable</title>
<ellipse fill="none" stroke="black" cx="889.093" cy="-487.6" rx="106.481" ry="18"/>
<text text-anchor="middle" x="889.093" y="-483.4" 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="M647.967,-647.214C651.884,-641.524 656.226,-635.122 660.093,-629.2 680.352,-598.181 675.467,-581.919 704.093,-558.4 735.733,-532.406 778.054,-515.481 814.232,-504.818"/>
<polygon fill="black" stroke="black" points="815.594,-508.07 824.259,-501.974 813.684,-501.335 815.594,-508.07"/>
</g>
<!-- NinePatchDrawable -->
<g id="node14" class="node"><title>NinePatchDrawable</title>
<ellipse fill="none" stroke="black" cx="676.093" cy="-487.6" rx="88.5812" ry="18"/>
<text text-anchor="middle" x="676.093" y="-483.4" 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="M640.002,-647.043C646.962,-616.488 661.554,-552.427 669.895,-515.81"/>
<polygon fill="black" stroke="black" points="673.361,-516.354 672.169,-505.827 666.536,-514.799 673.361,-516.354"/>
</g>
<!-- AtlasSprite -->
<g id="node11" class="node"><title>AtlasSprite</title>
<ellipse fill="none" stroke="black" cx="767.093" cy="-576.4" rx="54.4662" ry="18"/>
<text text-anchor="middle" x="767.093" y="-572.2" 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="M869.357,-649.367C858.424,-643.432 845.985,-636.321 835.093,-629.2 821.267,-620.16 806.608,-609.188 794.455,-599.673"/>
<polygon fill="black" stroke="black" points="796.495,-596.824 786.482,-593.361 792.149,-602.312 796.495,-596.824"/>
</g>
<!-- AtlasRegion&#45;&gt;TextureRegionDrawable -->
<g id="edge22" class="edge"><title>AtlasRegion&#45;&gt;TextureRegionDrawable</title>
<path fill="none" stroke="black" d="M897.214,-647.043C895.655,-616.62 892.393,-552.976 890.512,-516.283"/>
<polygon fill="black" stroke="black" points="893.984,-515.634 889.976,-505.827 886.993,-515.993 893.984,-515.634"/>
</g>
<!-- AtlasRegion&#45;&gt;NinePatchDrawable -->
<g id="edge23" class="edge"><title>AtlasRegion&#45;&gt;NinePatchDrawable</title>
<path fill="none" stroke="black" d="M890.841,-647.022C880.409,-624.109 859.173,-583.524 830.093,-558.4 802.534,-534.59 765.515,-517.463 734.679,-506.135"/>
<polygon fill="black" stroke="black" points="735.499,-502.712 724.905,-502.66 733.154,-509.308 735.499,-502.712"/>
</g>
<!-- Sprite&#45;&gt;AtlasSprite -->
<g id="edge17" class="edge"><title>Sprite&#45;&gt;AtlasSprite</title>
<path fill="none" stroke="black" d="M553.316,-576.4C591.569,-576.4 654.388,-576.4 702.056,-576.4"/>
<polygon fill="black" stroke="black" points="702.288,-579.9 712.288,-576.4 702.288,-572.9 702.288,-579.9"/>
<text text-anchor="middle" x="632.903" y="-583.6" 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="498.093" cy="-487.6" rx="71.7641" ry="18"/>
<text text-anchor="middle" x="498.093" y="-483.4" 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="M514.945,-558.251C512.011,-546.125 508.017,-529.619 504.654,-515.719"/>
<polygon fill="black" stroke="black" points="507.987,-514.61 502.234,-505.713 501.183,-516.256 507.987,-514.61"/>
</g>
<!-- AtlasSprite&#45;&gt;SpriteDrawable -->
<g id="edge19" class="edge"><title>AtlasSprite&#45;&gt;SpriteDrawable</title>
<path fill="none" stroke="black" d="M729.407,-563.239C682.678,-548.161 602.782,-522.381 550.206,-505.416"/>
<polygon fill="black" stroke="black" points="550.989,-501.991 540.397,-502.251 548.839,-508.652 550.989,-501.991"/>
</g>
<!-- Drawable -->
<g id="node15" class="node"><title>Drawable</title>
<ellipse fill="none" stroke="black" cx="676.093" cy="-398.8" rx="48.6327" ry="18"/>
<text text-anchor="middle" x="676.093" y="-394.6" 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="M529.507,-471.282C560.028,-456.398 606.385,-433.793 638.772,-418"/>
<polygon fill="black" stroke="black" points="640.471,-421.065 647.926,-413.536 637.403,-414.773 640.471,-421.065"/>
</g>
<!-- TextureRegionDrawable&#45;&gt;Drawable -->
<g id="edge24" class="edge"><title>TextureRegionDrawable&#45;&gt;Drawable</title>
<path fill="none" stroke="black" d="M850.026,-470.68C812.271,-455.294 755.31,-432.082 716.959,-416.453"/>
<polygon fill="black" stroke="black" points="718.215,-413.186 707.633,-412.653 715.573,-419.668 718.215,-413.186"/>
</g>
<!-- NinePatchDrawable&#45;&gt;Drawable -->
<g id="edge26" class="edge"><title>NinePatchDrawable&#45;&gt;Drawable</title>
<path fill="none" stroke="black" d="M676.093,-469.451C676.093,-457.325 676.093,-440.819 676.093,-426.919"/>
<polygon fill="black" stroke="black" points="679.594,-426.913 676.093,-416.913 672.594,-426.913 679.594,-426.913"/>
</g>
<!-- Drawable&#45;&gt;SkinStyle -->
<g id="edge28" class="edge"><title>Drawable&#45;&gt;SkinStyle</title>
<path fill="none" stroke="black" d="M676.093,-380.613C676.093,-372.589 676.093,-362.847 676.093,-353.869"/>
<polygon fill="black" stroke="black" points="679.594,-353.829 676.093,-343.829 672.594,-353.829 679.594,-353.829"/>
</g>
<!-- Actor -->
<g id="node17" class="node"><title>Actor</title>
<ellipse fill="none" stroke="black" cx="443.093" cy="-252.8" rx="33.043" ry="18"/>
<text text-anchor="middle" x="443.093" y="-248.6" 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="M639.687,-313.706C596.465,-300.536 524.736,-278.678 480.906,-265.322"/>
<polygon fill="black" stroke="black" points="481.785,-261.931 471.199,-262.364 479.744,-268.627 481.785,-261.931"/>
</g>
<!-- Button -->
<g id="node18" class="node"><title>Button</title>
<ellipse fill="none" stroke="black" cx="512.093" cy="-91" rx="37.1597" ry="18"/>
<text text-anchor="middle" x="512.093" y="-86.8" font-family="Times,serif" font-size="14.00">Button</text>
</g>
<!-- Actor&#45;&gt;Button -->
<g id="edge30" class="edge"><title>Actor&#45;&gt;Button</title>
<path fill="none" stroke="black" d="M450.347,-235.001C462.326,-207.26 486.334,-151.656 500.629,-118.551"/>
<polygon fill="black" stroke="black" points="503.978,-119.623 504.729,-109.055 497.552,-116.849 503.978,-119.623"/>
</g>
<!-- Label -->
<g id="node19" class="node"><title>Label</title>
<ellipse fill="none" stroke="black" cx="600.093" cy="-91" rx="33.043" ry="18"/>
<text text-anchor="middle" x="600.093" y="-86.8" font-family="Times,serif" font-size="14.00">Label</text>
</g>
<!-- Actor&#45;&gt;Label -->
<g id="edge31" class="edge"><title>Actor&#45;&gt;Label</title>
<path fill="none" stroke="black" d="M458.147,-236.478C485.858,-208.273 545.074,-148 577.581,-114.914"/>
<polygon fill="black" stroke="black" points="580.343,-117.097 584.854,-107.511 575.35,-112.191 580.343,-117.097"/>
</g>
<!-- TextField -->
<g id="node20" class="node"><title>TextField</title>
<ellipse fill="none" stroke="black" cx="408.093" cy="-91" rx="48.6714" ry="18"/>
<text text-anchor="middle" x="408.093" y="-86.8" font-family="Times,serif" font-size="14.00">TextField</text>
</g>
<!-- Actor&#45;&gt;TextField -->
<g id="edge32" class="edge"><title>Actor&#45;&gt;TextField</title>
<path fill="none" stroke="black" d="M439.348,-234.699C433.269,-206.945 421.209,-151.884 413.977,-118.863"/>
<polygon fill="black" stroke="black" points="417.371,-117.998 411.812,-108.978 410.533,-119.496 417.371,-117.998"/>
</g>
<!-- WidgetGroup -->
<g id="node26" class="node"><title>WidgetGroup</title>
<ellipse fill="none" stroke="black" cx="244.093" cy="-164" rx="64.2688" ry="18"/>
<text text-anchor="middle" x="244.093" y="-159.8" font-family="Times,serif" font-size="14.00">WidgetGroup</text>
</g>
<!-- Actor&#45;&gt;WidgetGroup -->
<g id="edge47" class="edge"><title>Actor&#45;&gt;WidgetGroup</title>
<path fill="none" stroke="black" d="M417.431,-241.242C400.871,-234.381 378.889,-225.184 359.559,-216.8 357.667,-215.979 318.26,-198.296 286.003,-183.816"/>
<polygon fill="black" stroke="black" points="287.259,-180.543 276.703,-179.641 284.392,-186.929 287.259,-180.543"/>
<text text-anchor="middle" x="385.361" y="-204.2" font-family="Times,serif" font-size="14.00">extended</text>
</g>
<!-- UI -->
<g id="node33" class="node"><title>UI</title>
<ellipse fill="none" stroke="black" cx="358.093" cy="-18" rx="27" ry="18"/>
<text text-anchor="middle" x="358.093" y="-13.8" font-family="Times,serif" font-size="14.00">UI</text>
</g>
<!-- Button&#45;&gt;UI -->
<g id="edge51" class="edge"><title>Button&#45;&gt;UI</title>
<path fill="none" stroke="black" d="M485.969,-77.9558C459.139,-65.586 417.392,-46.3389 388.951,-33.2265"/>
<polygon fill="black" stroke="black" points="390.403,-30.0421 379.857,-29.0337 387.473,-36.3991 390.403,-30.0421"/>
</g>
<!-- Label&#45;&gt;UI -->
<g id="edge52" class="edge"><title>Label&#45;&gt;UI</title>
<path fill="none" stroke="black" d="M574.96,-79.2515C569.449,-77.0567 563.611,-74.8541 558.093,-73 501.171,-53.8733 433.423,-36.7255 393.185,-27.1113"/>
<polygon fill="black" stroke="black" points="393.865,-23.6756 383.328,-24.7755 392.251,-30.487 393.865,-23.6756"/>
</g>
<!-- TextField&#45;&gt;UI -->
<g id="edge53" class="edge"><title>TextField&#45;&gt;UI</title>
<path fill="none" stroke="black" d="M396.244,-73.174C389.901,-64.1665 381.978,-52.9168 374.999,-43.0065"/>
<polygon fill="black" stroke="black" points="377.792,-40.8933 369.173,-34.7324 372.069,-44.9237 377.792,-40.8933"/>
</g>
<!-- Game -->
<g id="node21" class="node"><title>Game</title>
<ellipse fill="none" stroke="black" cx="34.0934" cy="-325.8" rx="34.1871" ry="18"/>
<text text-anchor="middle" x="34.0934" y="-321.6" font-family="Times,serif" font-size="14.00">Game</text>
</g>
<!-- Stage -->
<g id="node22" class="node"><title>Stage</title>
<ellipse fill="none" stroke="black" cx="168.093" cy="-252.8" rx="32.4808" ry="18"/>
<text text-anchor="middle" x="168.093" y="-248.6" font-family="Times,serif" font-size="14.00">Stage</text>
</g>
<!-- Game&#45;&gt;Stage -->
<g id="edge33" class="edge"><title>Game&#45;&gt;Stage</title>
<path fill="none" stroke="black" d="M57.4344,-312.433C79.2794,-300.858 112.092,-283.472 136.318,-270.636"/>
<polygon fill="black" stroke="black" points="138.269,-273.564 145.466,-265.789 134.991,-267.378 138.269,-273.564"/>
</g>
<!-- Stage&#45;&gt;WidgetGroup -->
<g id="edge46" class="edge"><title>Stage&#45;&gt;WidgetGroup</title>
<path fill="none" stroke="black" d="M181.681,-236.282C193.064,-223.28 209.517,-204.49 222.673,-189.465"/>
<polygon fill="black" stroke="black" points="225.634,-191.395 229.589,-181.566 220.368,-186.784 225.634,-191.395"/>
</g>
<!-- Camera -->
<g id="node23" class="node"><title>Camera</title>
<ellipse fill="none" stroke="black" cx="138.093" cy="-398.8" rx="41.1277" ry="18"/>
<text text-anchor="middle" x="138.093" y="-394.6" font-family="Times,serif" font-size="14.00">Camera</text>
</g>
<!-- Viewpoint -->
<g id="node24" class="node"><title>Viewpoint</title>
<ellipse fill="none" stroke="black" cx="138.093" cy="-325.8" rx="51.6054" ry="18"/>
<text text-anchor="middle" x="138.093" y="-321.6" font-family="Times,serif" font-size="14.00">Viewpoint</text>
</g>
<!-- Camera&#45;&gt;Viewpoint -->
<g id="edge34" class="edge"><title>Camera&#45;&gt;Viewpoint</title>
<path fill="none" stroke="black" d="M138.093,-380.613C138.093,-372.589 138.093,-362.847 138.093,-353.869"/>
<polygon fill="black" stroke="black" points="141.594,-353.829 138.093,-343.829 134.594,-353.829 141.594,-353.829"/>
</g>
<!-- Viewpoint&#45;&gt;Stage -->
<g id="edge35" class="edge"><title>Viewpoint&#45;&gt;Stage</title>
<path fill="none" stroke="black" d="M145.356,-307.613C148.819,-299.415 153.041,-289.423 156.903,-280.285"/>
<polygon fill="black" stroke="black" points="160.23,-281.403 160.898,-270.829 153.782,-278.678 160.23,-281.403"/>
</g>
<!-- Group -->
<g id="node25" class="node"><title>Group</title>
<ellipse fill="none" stroke="black" cx="244.093" cy="-325.8" rx="35.9174" ry="18"/>
<text text-anchor="middle" x="244.093" y="-321.6" font-family="Times,serif" font-size="14.00">Group</text>
</g>
<!-- Group&#45;&gt;Stage -->
<g id="edge36" class="edge"><title>Group&#45;&gt;Stage</title>
<path fill="none" stroke="black" d="M227.603,-309.394C217.002,-299.491 203.072,-286.477 191.355,-275.531"/>
<polygon fill="black" stroke="black" points="193.728,-272.958 184.031,-268.689 188.949,-278.074 193.728,-272.958"/>
</g>
<!-- Group&#45;&gt;WidgetGroup -->
<g id="edge37" class="edge"><title>Group&#45;&gt;WidgetGroup</title>
<path fill="none" stroke="black" d="M244.093,-307.699C244.093,-280.21 244.093,-225.932 244.093,-192.814"/>
<polygon fill="black" stroke="black" points="247.594,-192.463 244.093,-182.463 240.594,-192.463 247.594,-192.463"/>
</g>
<!-- Table -->
<g id="node30" class="node"><title>Table</title>
<ellipse fill="none" stroke="black" cx="308.093" cy="-91" rx="33.043" ry="18"/>
<text text-anchor="middle" x="308.093" y="-86.8" font-family="Times,serif" font-size="14.00">Table</text>
</g>
<!-- WidgetGroup&#45;&gt;Table -->
<g id="edge48" class="edge"><title>WidgetGroup&#45;&gt;Table</title>
<path fill="none" stroke="black" d="M259.261,-146.174C267.544,-136.985 277.931,-125.461 286.994,-115.408"/>
<polygon fill="black" stroke="black" points="289.816,-117.504 293.912,-107.732 284.617,-112.817 289.816,-117.504"/>
</g>
<!-- VerticalGroup -->
<g id="node31" class="node"><title>VerticalGroup</title>
<ellipse fill="none" stroke="black" cx="107.093" cy="-91" rx="66.6113" ry="18"/>
<text text-anchor="middle" x="107.093" y="-86.8" font-family="Times,serif" font-size="14.00">VerticalGroup</text>
</g>
<!-- WidgetGroup&#45;&gt;VerticalGroup -->
<g id="edge49" class="edge"><title>WidgetGroup&#45;&gt;VerticalGroup</title>
<path fill="none" stroke="black" d="M215.039,-147.943C194.834,-137.471 167.682,-123.4 145.664,-111.989"/>
<polygon fill="black" stroke="black" points="147.067,-108.774 136.578,-107.28 143.846,-114.989 147.067,-108.774"/>
</g>
<!-- Stack -->
<g id="node32" class="node"><title>Stack</title>
<ellipse fill="none" stroke="black" cx="224.093" cy="-91" rx="32.4808" ry="18"/>
<text text-anchor="middle" x="224.093" y="-86.8" font-family="Times,serif" font-size="14.00">Stack</text>
</g>
<!-- WidgetGroup&#45;&gt;Stack -->
<g id="edge50" class="edge"><title>WidgetGroup&#45;&gt;Stack</title>
<path fill="none" stroke="black" d="M239.252,-145.813C236.967,-137.702 234.188,-127.836 231.636,-118.777"/>
<polygon fill="black" stroke="black" points="234.971,-117.705 228.89,-109.029 228.233,-119.603 234.971,-117.705"/>
</g>
<!-- Functionality -->
<g id="node27" class="node"><title>Functionality</title>
<ellipse fill="none" stroke="black" cx="466.093" cy="-932.6" rx="62.5779" ry="18"/>
<text text-anchor="middle" x="466.093" y="-928.4" font-family="Times,serif" font-size="14.00">Functionality</text>
</g>
<!-- Stateless -->
<g id="node28" class="node"><title>Stateless</title>
<ellipse fill="none" stroke="black" cx="550.093" cy="-859.6" rx="44.6549" ry="18"/>
<text text-anchor="middle" x="550.093" y="-855.4" font-family="Times,serif" font-size="14.00">Stateless</text>
</g>
<!-- Functionality&#45;&gt;Stateless -->
<g id="edge38" class="edge"><title>Functionality&#45;&gt;Stateless</title>
<path fill="none" stroke="black" d="M485.576,-915.133C496.946,-905.522 511.443,-893.269 523.813,-882.813"/>
<polygon fill="black" stroke="black" points="526.203,-885.376 531.581,-876.247 521.685,-880.029 526.203,-885.376"/>
</g>
<!-- Stateful -->
<g id="node29" class="node"><title>Stateful</title>
<ellipse fill="none" stroke="black" cx="404.093" cy="-665.2" rx="41.1451" ry="18"/>
<text text-anchor="middle" x="404.093" y="-661" font-family="Times,serif" font-size="14.00">Stateful</text>
</g>
<!-- Functionality&#45;&gt;Stateful -->
<g id="edge39" class="edge"><title>Functionality&#45;&gt;Stateful</title>
<path fill="none" stroke="black" d="M462.121,-914.594C451.647,-869.761 423.213,-748.045 410.448,-693.4"/>
<polygon fill="black" stroke="black" points="413.796,-692.349 408.113,-683.408 406.98,-693.942 413.796,-692.349"/>
</g>
<!-- Stateless&#45;&gt;Texture -->
<g id="edge41" class="edge"><title>Stateless&#45;&gt;Texture</title>
<path fill="none" stroke="black" d="M563.259,-842.267C567.963,-836.399 573.287,-829.719 578.093,-823.6 589.742,-808.77 590.361,-803.018 604.005,-790 609.599,-784.663 616.067,-779.529 622.458,-774.914"/>
<polygon fill="black" stroke="black" points="624.808,-777.543 631.036,-768.972 620.823,-771.789 624.808,-777.543"/>
<text text-anchor="middle" x="619.638" y="-802.6" font-family="Times,serif" font-size="14.00">Draw</text>
</g>
<!-- Stateless&#45;&gt;TextureRegion -->
<g id="edge40" class="edge"><title>Stateless&#45;&gt;TextureRegion</title>
<path fill="none" stroke="black" d="M550.396,-841.424C551.456,-816.834 555.803,-770.733 573.005,-736 581.731,-718.38 596.2,-701.897 609.082,-689.378"/>
<polygon fill="black" stroke="black" points="611.529,-691.882 616.427,-682.487 606.74,-686.777 611.529,-691.882"/>
<text text-anchor="middle" x="588.638" y="-749.8" font-family="Times,serif" font-size="14.00">Draw</text>
</g>
<!-- Stateless&#45;&gt;Stateful -->
<g id="edge42" class="edge"><title>Stateless&#45;&gt;Stateful</title>
<path fill="none" stroke="black" d="M537.646,-842.196C511.948,-808.331 452.908,-730.528 422.675,-690.687"/>
<polygon fill="black" stroke="black" points="425.343,-688.413 416.51,-682.562 419.767,-692.644 425.343,-688.413"/>
<text text-anchor="middle" x="497.638" y="-749.8" font-family="Times,serif" font-size="14.00">Draw</text>
</g>
<!-- Stateful&#45;&gt;Sprite -->
<g id="edge43" class="edge"><title>Stateful&#45;&gt;Sprite</title>
<path fill="none" stroke="black" d="M399.786,-647.154C398.058,-636.163 397.945,-622.153 405.33,-612.4 421.43,-591.138 450.211,-582.419 474.795,-578.999"/>
<polygon fill="black" stroke="black" points="475.484,-582.444 485.025,-577.837 474.694,-575.488 475.484,-582.444"/>
<text text-anchor="middle" x="465.975" y="-616.6" font-family="Times,serif" font-size="14.00">Position,Scale,Rotate</text>
</g>
<!-- Stateful&#45;&gt;Actor -->
<g id="edge44" class="edge"><title>Stateful&#45;&gt;Actor</title>
<path fill="none" stroke="black" d="M393.652,-647.618C383.984,-630.652 371.093,-603.195 371.093,-577.4 371.093,-577.4 371.093,-577.4 371.093,-324.8 371.093,-301.158 391.019,-282.742 409.906,-270.596"/>
<polygon fill="black" stroke="black" points="411.948,-273.451 418.718,-265.301 408.343,-267.451 411.948,-273.451"/>
<text text-anchor="middle" x="429.025" y="-439" font-family="Times,serif" font-size="14.00">mouseOver, onClick</text>
</g>
<!-- Stateful&#45;&gt;WidgetGroup -->
<g id="edge45" class="edge"><title>Stateful&#45;&gt;WidgetGroup</title>
<path fill="none" stroke="black" d="M374.769,-652.409C346.537,-638.891 308.093,-613.8 308.093,-577.4 308.093,-577.4 308.093,-577.4 308.093,-251.8 308.093,-226.472 290.221,-203.673 273.366,-187.804"/>
<polygon fill="black" stroke="black" points="275.552,-185.064 265.761,-181.016 270.891,-190.286 275.552,-185.064"/>
<text text-anchor="middle" x="325.591" y="-394.6" font-family="Times,serif" font-size="14.00">layout</text>
</g>
<!-- Table&#45;&gt;UI -->
<g id="edge54" class="edge"><title>Table&#45;&gt;UI</title>
<path fill="none" stroke="black" d="M319.439,-73.889C325.857,-64.7754 334.007,-53.2025 341.167,-43.0352"/>
<polygon fill="black" stroke="black" points="344.24,-44.7506 347.136,-34.5593 338.517,-40.7201 344.24,-44.7506"/>
</g>
<!-- VerticalGroup&#45;&gt;UI -->
<g id="edge55" class="edge"><title>VerticalGroup&#45;&gt;UI</title>
<path fill="none" stroke="black" d="M151.389,-77.4701C200.613,-63.5463 279.044,-41.3607 323.808,-28.6983"/>
<polygon fill="black" stroke="black" points="324.956,-32.0109 333.626,-25.9211 323.051,-25.2752 324.956,-32.0109"/>
</g>
<!-- Stack&#45;&gt;UI -->
<g id="edge56" class="edge"><title>Stack&#45;&gt;UI</title>
<path fill="none" stroke="black" d="M246.825,-77.9558C269.336,-66.028 303.917,-47.7056 328.547,-34.655"/>
<polygon fill="black" stroke="black" points="330.257,-37.7104 337.454,-29.9357 326.979,-31.525 330.257,-37.7104"/>
</g>
</g>
</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}
}