Skip to content

Instantly share code, notes, and snippets.

@zeromancer
Last active February 20, 2017 21:15
Show Gist options
  • Save zeromancer/063c2d585246ff8702e95a81edaeb761 to your computer and use it in GitHub Desktop.
Save zeromancer/063c2d585246ff8702e95a81edaeb761 to your computer and use it in GitHub Desktop.
Libgdx Scene2d Actor System Overview Diagram
  • 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
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
  • 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
Display the source blob
Display the rendered blob
Raw
<?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="1305pt" height="711pt"
viewBox="0.00 0.00 1304.59 711.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 707.4)">
<title>cfi</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-707.4 1300.59,-707.4 1300.59,4 -4,4"/>
<!-- FileSystem -->
<g id="node1" class="node"><title>FileSystem</title>
<ellipse fill="none" stroke="black" cx="631" cy="-685.4" rx="54.4874" ry="18"/>
<text text-anchor="middle" x="631" y="-681.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="544" cy="-612.4" rx="35.3315" ry="18"/>
<text text-anchor="middle" x="544" y="-608.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="M611.258,-668.289C598.969,-658.26 583.031,-645.253 569.754,-634.418"/>
<polygon fill="black" stroke="black" points="571.849,-631.609 561.888,-627.998 567.423,-637.033 571.849,-631.609"/>
</g>
<!-- Json -->
<g id="node3" class="node"><title>Json</title>
<ellipse fill="none" stroke="black" cx="631" cy="-612.4" rx="28.4107" ry="18"/>
<text text-anchor="middle" x="631" y="-608.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="M631,-667.213C631,-659.189 631,-649.447 631,-640.469"/>
<polygon fill="black" stroke="black" points="634.5,-640.429 631,-630.429 627.5,-640.429 634.5,-640.429"/>
</g>
<!-- Font -->
<g id="node4" class="node"><title>Font</title>
<ellipse fill="none" stroke="black" cx="709" cy="-612.4" rx="28.9929" ry="18"/>
<text text-anchor="middle" x="709" y="-608.2" 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="M648.699,-668.289C659.687,-658.287 673.929,-645.324 685.812,-634.507"/>
<polygon fill="black" stroke="black" points="688.184,-637.081 693.223,-627.761 683.472,-631.904 688.184,-637.081"/>
</g>
<!-- TextureAtlas -->
<g id="node5" class="node"><title>TextureAtlas</title>
<ellipse fill="none" stroke="black" cx="587" cy="-506.8" rx="61.3916" ry="18"/>
<text text-anchor="middle" x="587" y="-502.6" 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="M540.42,-594.438C538.231,-579.983 537.15,-559.032 544.895,-542.8 547.034,-538.317 550.053,-534.207 553.505,-530.502"/>
<polygon fill="black" stroke="black" points="556.115,-532.855 561.054,-523.482 551.348,-527.729 556.115,-532.855"/>
<text text-anchor="middle" x="557.053" y="-555.4" 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="284" cy="-506.8" rx="41.1297" ry="18"/>
<text text-anchor="middle" x="284" y="-502.6" 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="M508.852,-610.332C427.004,-607.484 229.113,-598.374 209.318,-576.4 199.322,-565.305 201.306,-555.402 209.318,-542.8 216.039,-532.227 226.891,-524.792 238.264,-519.586"/>
<polygon fill="black" stroke="black" points="239.895,-522.703 247.861,-515.718 237.277,-516.21 239.895,-522.703"/>
<text text-anchor="middle" x="291.841" y="-555.4" 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="M611.482,-599.054C603.91,-593.174 596.008,-585.44 591.578,-576.4 585.422,-563.84 583.943,-548.404 584.148,-535.357"/>
<polygon fill="black" stroke="black" points="587.659,-535.234 584.652,-525.075 580.667,-534.892 587.659,-535.234"/>
<text text-anchor="middle" x="633.211" y="-563.8" font-family="Times,serif" font-size="14.00">how the image</text>
<text text-anchor="middle" x="633.211" y="-547" 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="713" cy="-506.8" rx="28.9929" ry="18"/>
<text text-anchor="middle" x="713" y="-502.6" 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="M649.471,-598.772C657.609,-592.633 666.912,-584.777 674,-576.4 684.895,-563.524 694.331,-547.167 701.192,-533.654"/>
<polygon fill="black" stroke="black" points="704.464,-534.929 705.716,-524.408 698.177,-531.852 704.464,-534.929"/>
</g>
<!-- Font&#45;&gt;Skin -->
<g id="edge5" class="edge"><title>Font&#45;&gt;Skin</title>
<path fill="none" stroke="black" d="M709.661,-594.293C710.283,-578.171 711.226,-553.753 711.951,-534.968"/>
<polygon fill="black" stroke="black" points="715.45,-535.06 712.339,-524.933 708.455,-534.79 715.45,-535.06"/>
</g>
<!-- TextureAtlas&#45;&gt;Skin -->
<g id="edge6" class="edge"><title>TextureAtlas&#45;&gt;Skin</title>
<path fill="none" stroke="black" d="M648.523,-506.8C656.939,-506.8 665.355,-506.8 673.771,-506.8"/>
<polygon fill="black" stroke="black" points="674.036,-510.3 684.036,-506.8 674.036,-503.3 674.036,-510.3"/>
</g>
<!-- AtlasRegion -->
<g id="node9" class="node"><title>AtlasRegion</title>
<ellipse fill="none" stroke="black" cx="587" cy="-398.8" rx="59.1276" ry="18"/>
<text text-anchor="middle" x="587" y="-394.6" 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="M587,-488.769C587,-472.178 587,-446.683 587,-427.231"/>
<polygon fill="black" stroke="black" points="590.5,-427.141 587,-417.141 583.5,-427.141 590.5,-427.141"/>
<text text-anchor="middle" x="616.745" y="-448.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="671" cy="-91" rx="48.6926" ry="18"/>
<text text-anchor="middle" x="671" 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="M717.467,-488.677C722.503,-467.832 730,-431.485 730,-399.8 730,-399.8 730,-399.8 730,-163 730,-143.257 716.338,-126.074 702.163,-113.559"/>
<polygon fill="black" stroke="black" points="704.263,-110.755 694.318,-107.1 699.814,-116.159 704.263,-110.755"/>
<text text-anchor="middle" x="759.745" y="-277.2" 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="M304.358,-522.666C322.296,-535.571 349.72,-552.784 376.823,-560 413.052,-569.646 424.434,-567.449 461.177,-560 491.957,-553.76 524.56,-539.741 548.865,-527.66"/>
<polygon fill="black" stroke="black" points="550.753,-530.626 558.081,-522.974 547.581,-524.387 550.753,-530.626"/>
<text text-anchor="middle" x="419" y="-555.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="325" cy="-398.8" rx="68.9216" ry="18"/>
<text text-anchor="middle" x="325" y="-394.6" 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="M290.587,-488.769C297.103,-471.925 307.168,-445.902 314.733,-426.344"/>
<polygon fill="black" stroke="black" points="318.086,-427.378 318.429,-416.788 311.557,-424.852 318.086,-427.378"/>
<text text-anchor="middle" x="341.745" y="-448.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="209" cy="-325.8" rx="34.2045" ry="18"/>
<text text-anchor="middle" x="209" y="-321.6" 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="M276.944,-488.96C263.845,-457.696 235.681,-390.477 220.039,-353.147"/>
<polygon fill="black" stroke="black" points="223.075,-351.335 215.982,-343.465 216.619,-354.04 223.075,-351.335"/>
</g>
<!-- TextureRegion&#45;&gt;AtlasRegion -->
<g id="edge13" class="edge"><title>TextureRegion&#45;&gt;AtlasRegion</title>
<path fill="none" stroke="black" d="M394.18,-398.8C432.151,-398.8 479.112,-398.8 517.182,-398.8"/>
<polygon fill="black" stroke="black" points="517.67,-402.3 527.67,-398.8 517.67,-395.3 517.67,-402.3"/>
<text text-anchor="middle" x="460.824" y="-406" 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="M299.256,-382.043C281.474,-371.159 257.761,-356.645 239.104,-345.225"/>
<polygon fill="black" stroke="black" points="240.755,-342.133 230.399,-339.897 237.101,-348.103 240.755,-342.133"/>
</g>
<!-- TextureRegionDrawable -->
<g id="node13" class="node"><title>TextureRegionDrawable</title>
<ellipse fill="none" stroke="black" cx="596" cy="-237" rx="106.481" ry="18"/>
<text text-anchor="middle" x="596" y="-232.8" 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="M336.74,-380.69C352.885,-357.577 381.577,-318.082 396,-307.8 432.716,-281.625 480.14,-264.512 519.592,-253.784"/>
<polygon fill="black" stroke="black" points="520.659,-257.122 529.439,-251.193 518.878,-250.353 520.659,-257.122"/>
</g>
<!-- NinePatchDrawable -->
<g id="node14" class="node"><title>NinePatchDrawable</title>
<ellipse fill="none" stroke="black" cx="383" cy="-237" rx="88.5812" ry="18"/>
<text text-anchor="middle" x="383" y="-232.8" 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="M331.207,-380.699C341.324,-352.825 361.438,-297.406 373.405,-264.435"/>
<polygon fill="black" stroke="black" points="376.716,-265.573 376.838,-254.978 370.136,-263.184 376.716,-265.573"/>
</g>
<!-- AtlasSprite -->
<g id="node11" class="node"><title>AtlasSprite</title>
<ellipse fill="none" stroke="black" cx="459" cy="-325.8" rx="54.4662" ry="18"/>
<text text-anchor="middle" x="459" y="-321.6" 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="M559.854,-382.743C540.805,-372.176 515.147,-357.944 494.478,-346.479"/>
<polygon fill="black" stroke="black" points="496.11,-343.382 485.667,-341.592 492.715,-349.503 496.11,-343.382"/>
</g>
<!-- AtlasRegion&#45;&gt;TextureRegionDrawable -->
<g id="edge22" class="edge"><title>AtlasRegion&#45;&gt;TextureRegionDrawable</title>
<path fill="none" stroke="black" d="M587.963,-380.699C589.511,-353.21 592.568,-298.932 594.434,-265.814"/>
<polygon fill="black" stroke="black" points="597.949,-265.644 595.016,-255.463 590.96,-265.25 597.949,-265.644"/>
</g>
<!-- AtlasRegion&#45;&gt;NinePatchDrawable -->
<g id="edge23" class="edge"><title>AtlasRegion&#45;&gt;NinePatchDrawable</title>
<path fill="none" stroke="black" d="M578.174,-380.998C567.184,-361.375 546.801,-328.917 522,-307.8 496.251,-285.876 462.431,-268.698 434.597,-256.87"/>
<polygon fill="black" stroke="black" points="435.603,-253.498 425.025,-252.91 432.928,-259.967 435.603,-253.498"/>
</g>
<!-- Sprite&#45;&gt;AtlasSprite -->
<g id="edge17" class="edge"><title>Sprite&#45;&gt;AtlasSprite</title>
<path fill="none" stroke="black" d="M243.237,-325.8C281.94,-325.8 345.829,-325.8 394.064,-325.8"/>
<polygon fill="black" stroke="black" points="394.105,-329.3 404.105,-325.8 394.105,-322.3 394.105,-329.3"/>
<text text-anchor="middle" x="323.81" y="-333" 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="205" cy="-237" rx="71.7641" ry="18"/>
<text text-anchor="middle" x="205" y="-232.8" 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="M208.21,-307.651C207.651,-295.525 206.89,-279.019 206.25,-265.119"/>
<polygon fill="black" stroke="black" points="209.745,-264.942 205.789,-255.113 202.753,-265.264 209.745,-264.942"/>
</g>
<!-- AtlasSprite&#45;&gt;SpriteDrawable -->
<g id="edge19" class="edge"><title>AtlasSprite&#45;&gt;SpriteDrawable</title>
<path fill="none" stroke="black" d="M422.608,-312.364C378.626,-297.334 304.394,-271.966 255.045,-255.102"/>
<polygon fill="black" stroke="black" points="256.118,-251.77 245.524,-251.848 253.854,-258.394 256.118,-251.77"/>
</g>
<!-- Drawable -->
<g id="node15" class="node"><title>Drawable</title>
<ellipse fill="none" stroke="black" cx="542" cy="-164" rx="48.6327" ry="18"/>
<text text-anchor="middle" x="542" 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="M257.926,-224.735C266.958,-222.818 276.248,-220.849 285,-219 356.302,-203.933 438.758,-186.629 490.641,-175.755"/>
<polygon fill="black" stroke="black" points="491.529,-179.146 500.598,-173.669 490.093,-172.294 491.529,-179.146"/>
</g>
<!-- TextureRegionDrawable&#45;&gt;Drawable -->
<g id="edge24" class="edge"><title>TextureRegionDrawable&#45;&gt;Drawable</title>
<path fill="none" stroke="black" d="M582.928,-218.813C576.265,-210.052 568.043,-199.242 560.721,-189.615"/>
<polygon fill="black" stroke="black" points="563.419,-187.381 554.58,-181.54 557.848,-191.618 563.419,-187.381"/>
</g>
<!-- NinePatchDrawable&#45;&gt;Drawable -->
<g id="edge26" class="edge"><title>NinePatchDrawable&#45;&gt;Drawable</title>
<path fill="none" stroke="black" d="M417.893,-220.419C443.051,-209.185 477.02,-194.016 503.059,-182.389"/>
<polygon fill="black" stroke="black" points="504.559,-185.552 512.263,-178.279 501.705,-179.16 504.559,-185.552"/>
</g>
<!-- Drawable&#45;&gt;SkinStyle -->
<g id="edge28" class="edge"><title>Drawable&#45;&gt;SkinStyle</title>
<path fill="none" stroke="black" d="M568.105,-148.632C587.688,-137.854 614.696,-122.989 636.128,-111.193"/>
<polygon fill="black" stroke="black" points="637.861,-114.235 644.934,-106.347 634.485,-108.102 637.861,-114.235"/>
</g>
<!-- Actor -->
<g id="node17" class="node"><title>Actor</title>
<ellipse fill="none" stroke="black" cx="671" cy="-18" rx="33.043" ry="18"/>
<text text-anchor="middle" x="671" 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="M671,-72.8129C671,-64.7895 671,-55.0475 671,-46.0691"/>
<polygon fill="black" stroke="black" points="674.5,-46.0288 671,-36.0288 667.5,-46.0289 674.5,-46.0288"/>
</g>
<!-- Game -->
<g id="node18" class="node"><title>Game</title>
<ellipse fill="none" stroke="black" cx="792" cy="-164" rx="34.1871" ry="18"/>
<text text-anchor="middle" x="792" 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="824" cy="-91" rx="32.4808" ry="18"/>
<text text-anchor="middle" x="824" 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="M799.584,-146.174C803.369,-137.774 808.034,-127.424 812.269,-118.029"/>
<polygon fill="black" stroke="black" points="815.553,-119.26 816.471,-108.705 809.171,-116.384 815.553,-119.26"/>
</g>
<!-- Stage&#45;&gt;Actor -->
<g id="edge34" class="edge"><title>Stage&#45;&gt;Actor</title>
<path fill="none" stroke="black" d="M799.757,-78.7498C774.093,-66.8406 733.4,-47.9569 704.64,-34.6106"/>
<polygon fill="black" stroke="black" points="705.927,-31.3495 695.383,-30.3149 702.98,-37.6991 705.927,-31.3495"/>
</g>
<!-- Camera -->
<g id="node20" class="node"><title>Camera</title>
<ellipse fill="none" stroke="black" cx="896" cy="-237" rx="41.1277" ry="18"/>
<text text-anchor="middle" x="896" y="-232.8" 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="896" cy="-164" rx="51.6054" ry="18"/>
<text text-anchor="middle" x="896" 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="M896,-218.813C896,-210.789 896,-201.047 896,-192.069"/>
<polygon fill="black" stroke="black" points="899.5,-192.029 896,-182.029 892.5,-192.029 899.5,-192.029"/>
</g>
<!-- Viewpoint&#45;&gt;Stage -->
<g id="edge32" class="edge"><title>Viewpoint&#45;&gt;Stage</title>
<path fill="none" stroke="black" d="M879.662,-146.889C869.913,-137.275 857.389,-124.925 846.691,-114.375"/>
<polygon fill="black" stroke="black" points="848.867,-111.606 839.289,-107.076 843.951,-116.59 848.867,-111.606"/>
</g>
<!-- Group -->
<g id="node22" class="node"><title>Group</title>
<ellipse fill="none" stroke="black" cx="1002" cy="-164" rx="35.9174" ry="18"/>
<text text-anchor="middle" x="1002" 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="M974.966,-152.217C943.984,-139.859 893.115,-119.568 859.099,-106"/>
<polygon fill="black" stroke="black" points="860.138,-102.647 849.553,-102.193 857.545,-109.149 860.138,-102.647"/>
</g>
<!-- Functionality -->
<g id="node23" class="node"><title>Functionality</title>
<ellipse fill="none" stroke="black" cx="81" cy="-685.4" rx="62.5779" ry="18"/>
<text text-anchor="middle" x="81" y="-681.2" 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="145" cy="-612.4" rx="44.6549" ry="18"/>
<text text-anchor="middle" x="145" y="-608.2" 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="M96.1671,-667.574C104.334,-658.514 114.546,-647.185 123.516,-637.233"/>
<polygon fill="black" stroke="black" points="126.287,-639.388 130.382,-629.617 121.087,-634.701 126.287,-639.388"/>
</g>
<!-- Stateful -->
<g id="node25" class="node"><title>Stateful</title>
<ellipse fill="none" stroke="black" cx="68" cy="-452.8" rx="41.1451" ry="18"/>
<text text-anchor="middle" x="68" y="-448.6" 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="M80.0229,-667.068C77.7823,-627.323 72.2594,-529.355 69.5498,-481.291"/>
<polygon fill="black" stroke="black" points="73.0281,-480.806 68.9707,-471.019 66.0392,-481.2 73.0281,-480.806"/>
</g>
<!-- Stateless&#45;&gt;Texture -->
<g id="edge38" class="edge"><title>Stateless&#45;&gt;Texture</title>
<path fill="none" stroke="black" d="M142.637,-594.312C141.521,-578.967 142.546,-556.764 154.912,-542.8 174.227,-520.988 205.618,-512.149 232.607,-508.807"/>
<polygon fill="black" stroke="black" points="233.108,-512.274 242.702,-507.779 232.399,-505.31 233.108,-512.274"/>
<text text-anchor="middle" x="170.544" y="-555.4" 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="M189.584,-609.714C272.609,-606.113 444.153,-596.326 462,-576.4 509.821,-523.008 417.305,-454.722 362.075,-420.833"/>
<polygon fill="black" stroke="black" points="363.599,-417.666 353.228,-415.502 359.986,-423.661 363.599,-417.666"/>
<text text-anchor="middle" x="487.544" y="-502.6" font-family="Times,serif" font-size="14.00">Draw</text>
</g>
<!-- Stateless&#45;&gt;Stateful -->
<g id="edge39" class="edge"><title>Stateless&#45;&gt;Stateful</title>
<path fill="none" stroke="black" d="M124.976,-595.889C118.811,-590.297 112.459,-583.58 107.912,-576.4 97.7435,-560.344 83.5047,-511.648 75.0689,-480.676"/>
<polygon fill="black" stroke="black" points="78.4232,-479.672 72.4448,-470.925 71.6637,-481.491 78.4232,-479.672"/>
<text text-anchor="middle" x="123.544" y="-555.4" font-family="Times,serif" font-size="14.00">Draw</text>
</g>
<!-- Stateful&#45;&gt;Sprite -->
<g id="edge40" class="edge"><title>Stateful&#45;&gt;Sprite</title>
<path fill="none" stroke="black" d="M68.2923,-434.691C69.4265,-418.989 73.3878,-395.935 86.237,-380.8 106.882,-356.483 140.588,-342.728 167.463,-335.194"/>
<polygon fill="black" stroke="black" points="168.597,-338.516 177.388,-332.602 166.828,-331.743 168.597,-338.516"/>
<text text-anchor="middle" x="146.881" y="-394.6" font-family="Times,serif" font-size="14.00">Position,Scale,Rotate</text>
</g>
<!-- Stateful&#45;&gt;Actor -->
<g id="edge41" class="edge"><title>Stateful&#45;&gt;Actor</title>
<path fill="none" stroke="black" d="M46.8571,-437.062C26.8956,-421.237 0,-394.107 0,-362.8 0,-362.8 0,-362.8 0,-90 0,-26.6522 479.06,-19.6661 627.612,-19.0226"/>
<polygon fill="black" stroke="black" points="627.738,-22.5223 637.725,-18.9865 627.713,-15.5223 627.738,-22.5223"/>
<text text-anchor="middle" x="57.932" y="-232.8" font-family="Times,serif" font-size="14.00">mouseOver, onClick</text>
</g>
<!-- Table -->
<g id="node26" class="node"><title>Table</title>
<ellipse fill="none" stroke="black" cx="737" cy="-685.4" rx="33.043" ry="18"/>
<text text-anchor="middle" x="737" y="-681.2" font-family="Times,serif" font-size="14.00">Table</text>
</g>
<!-- VerticalGroup -->
<g id="node27" class="node"><title>VerticalGroup</title>
<ellipse fill="none" stroke="black" cx="855" cy="-685.4" rx="66.6113" ry="18"/>
<text text-anchor="middle" x="855" y="-681.2" font-family="Times,serif" font-size="14.00">VerticalGroup</text>
</g>
<!-- Stack -->
<g id="node28" class="node"><title>Stack</title>
<ellipse fill="none" stroke="black" cx="972" cy="-685.4" rx="32.4808" ry="18"/>
<text text-anchor="middle" x="972" y="-681.2" font-family="Times,serif" font-size="14.00">Stack</text>
</g>
<!-- Button -->
<g id="node29" class="node"><title>Button</title>
<ellipse fill="none" stroke="black" cx="1060" cy="-685.4" rx="37.1597" ry="18"/>
<text text-anchor="middle" x="1060" y="-681.2" font-family="Times,serif" font-size="14.00">Button</text>
</g>
<!-- Label -->
<g id="node30" class="node"><title>Label</title>
<ellipse fill="none" stroke="black" cx="1148" cy="-685.4" rx="33.043" ry="18"/>
<text text-anchor="middle" x="1148" y="-681.2" font-family="Times,serif" font-size="14.00">Label</text>
</g>
<!-- TextField -->
<g id="node31" class="node"><title>TextField</title>
<ellipse fill="none" stroke="black" cx="1248" cy="-685.4" rx="48.6714" ry="18"/>
<text text-anchor="middle" x="1248" y="-681.2" font-family="Times,serif" font-size="14.00">TextField</text>
</g>
</g>
</svg>
  • allows to stick together Widgets(Buttons,Labels,etc) to define an UI
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment