![\"\"](\"https:\/\/erdbeerbeet.com\/wp-content\/uploads\/2021\/05\/bgsketch-1-1024x1024.png\")
Die Skizze meines Spiel-Hintergrunds<\/figcaption><\/figure><\/li> ![\"\"](\"https:\/\/erdbeerbeet.com\/wp-content\/uploads\/2021\/05\/bgdebug-1-1024x1024.png\")
F\u00fcr einfache Berechnungen werden die Seiten gedrittelt<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n Ich m\u00f6chte das Hintergrundbild so anpassen, dass der zentrale Quadrat immer in den Screen passt. Zus\u00e4tzlich etwas Hintergrund an den Seiten, je nach Gr\u00f6\u00dfe und Modus des Screens.<\/p>\n\n\n\n
Au\u00dferdem definiere ich hier ein gameRect, das von Screen und Bildgr\u00f6\u00dfe abh\u00e4ngt und die einzige Instanz ist, die ich f\u00fcr weitere Handhabung von Spiel-Elementen nutze. Alles innerhalb des zentralen Quadrats.<\/p>\n\n\n\n
Das Programmieren<\/h2>\n\n\n\n
Da wir uns in der Flame-Logik bewegen, findet alles innerhalb einer game Komponente statt. Ich werde all die anderen Klassen auslassen und mich nur auf Gr\u00f6\u00dfe, Position und Resize des Hintergrundes konzentrieren.<\/p>\n\n\n\n
mygame.dart <\/strong>erstellt eine neue Garten-Komponente und ruft die eigene resize Methode auf, um die Bildgr\u00f6\u00dfe entsprechend der Spielgr\u00f6\u00dfe zu berechnen.<\/p>\n\n\n\n
class MyGame extends BaseGame {\n\nGarden garden;\n @override\n Future<void> onLoad() async {\n garden = new Garden(this);\n garden.resize(this.size);\n }\n\n @override\n void render(Canvas canvas) {\n if(garden != null) garden.render(canvas);\n }\n\n @override\n void onResize(Vector2 canvasSize) {\n super.onResize(canvasSize);\n if (canvasSize != null && garden != null) garden.resize(canvasSize);\n }\n}<\/code><\/pre>\n\n\n\nIn meinem Falle ist garden.dart<\/strong> eine Super-Klasse f\u00fcr verschiedene G\u00e4rten, die sich sehr \u00e4hnlich verhalten. Die wichtigste Information ist das gameRect, das f\u00fcr weitere Berechnungen der Spiele-Komponenten genutzt wird (was nicht in diesem Blog-Beitrag enthalten ist).<\/p>\n\n\n\n
Zun\u00e4chst \u00fcberpr\u00fcfen wir, ob der Screen breiter oder h\u00f6her ist (Landschaft oder Portr\u00e4t). Die kleinere Gr\u00f6\u00dfe entspricht dann der Seitenl\u00e4nge unseres zentralen Quadrats im Hintergrundbild. Die scaleValue wird ben\u00f6tigt, damit das Hintergrundbild an den Screen angepasst wird, unabh\u00e4ngig von der jeweiligen Aufl\u00f6sung.<\/p>\n\n\n\n
Beim rendern muss das \u00dcberbleibsel der gr\u00f6\u00dferen Screen-Seite in die Berechnung der Hintergrund-Position einbezogen werden, damit wir mehr Hintergrund anzeigen und trotzdem alles zentriert behalten.<\/p>\n\n\n\n
class Garden {\n final MyGame game;\n Sprite _bgSprite;\n Image bgImage;\n double gameBaseSize;\n Rect gameRect;\n double scaleValue = 1;\n\n Garden(this.game);\n\n Future<void> onLoad() async {\n _bgSprite = Sprite(bgImage);\n }\n\n Future<void> resize(Vector2 canvasSize) async {\n if (game.hasLayout && _bgSprite != null) {\n gameBaseSize = min(canvasSize.x, canvasSize.y);\n scaleValue = gameBaseSize \/ (_bgSprite.srcSize[0] \/ 3);\n\n gameRect = Rect.fromCenter(\n center: Offset(\n canvasSize.x \/ 2 \/ scaleValue,\n canvasSize.y \/ 2 \/ scaleValue,\n ),\n width: gameBaseSize \/ scaleValue,\n height: gameBaseSize \/ scaleValue\n );\n }\n return;\n }\n\n void render(Canvas c) {\n c.scale(scaleValue);\n\n if(_bgSprite != null) {\n Vector2 bgOffset = Vector2(\n _bgSprite.srcPosition.x - (_bgSprite.image.width \/ 3) + (game.size[0] - gameBaseSize) \/ 2,\n _bgSprite.srcPosition.y - (_bgSprite.image.height \/ 3) + (game.size[1] - gameBaseSize) \/ 2,\n );\n _bgSprite.render(\n c,\n position: bgOffset\n );\n }\n }\n}<\/code><\/pre>\n\n\n\nEine Subklasse von garden ist ledgegarden.dart<\/strong>. Der wichtigste Teil ist, dass wir abwarten m\u00fcssen, bis super.resize beendet wurde, um mit dem neu berechneten gameRect weiter arbeiten zu k\u00f6nnen.<\/p>\n\n\n\n
class LedgeGarden extends Garden {\n LedgeGarden(game) : super(game) {\n onLoad();\n }\n\n @override\n Future<void> onLoad() async {\n bgImage = await Flame.images.load('backgrounds\/bgdebug.png');\n super.onLoad();\n }\n\n @override\n Future<void> resize(Vector2 canvasSize) async {\n await super.resize(canvasSize).then((value) {\n if (game.hasLayout && gameRect != null) {\n \/\/ calculate placement of further components\n }\n\n return;\n }\n}<\/span><\/code><\/pre>\n\n\n\nDas Ergebnis<\/h2>\n\n\n\n
Ich muss sagen, dass es sehr fluffig funktioniert. Und der n\u00f6tige Code ist auch nicht sonderlich umfangreich. Ich habe mit der Flutter-Webversion herum gespielt und kann es nun kaum abwarten, die anderen Komponenten meinem Spiel hinzu zu f\u00fcgen.<\/p>\n\n\n\n
![\"\"](\"https:\/\/erdbeerbeet.com\/wp-content\/uploads\/2021\/05\/Bildschirmfoto-2021-05-06-um-16.30.53-171x300.png\")
Portr\u00e4t Modus<\/figcaption><\/figure><\/li> ![\"\"](\"https:\/\/erdbeerbeet.com\/wp-content\/uploads\/2021\/05\/Bildschirmfoto-2021-05-06-um-16.31.12-300x200.png\")
Landschafts Modus<\/figcaption><\/figure><\/li> ![\"\"](\"https:\/\/erdbeerbeet.com\/wp-content\/uploads\/2021\/05\/Bildschirmfoto-2021-05-06-um-16.31.58-300x122.png\")
Sehr extremer Landschafts Modus<\/figcaption><\/figure><\/li><\/ul><\/figure>\n\n\n\n Im moment ist die L\u00f6sung noch nicht ideal f\u00fcr gro\u00dfe Screens, wo wir neben dem zentralen Quadrat noch genug Platz f\u00fcr schm\u00fcckenden Hintergrund h\u00e4tten. Das das bleibt vorerst ein sekund\u00e4res Problem.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ich m\u00f6chte, dass mein Spiel im Portr\u00e4t- UND Landschafts-Modus spielbar ist. Und so hab ich das angestellt.<\/p>\n","protected":false},"author":1,"featured_media":384,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,13,50,12],"tags":[27,14,28],"class_list":["post-250","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flame","category-flutter","category-grow_greens","category-programming","tag-flame","tag-flutter","tag-grow-greens"],"translation":{"provider":"WPGlobus","version":"3.0.0","language":"de","enabled_languages":["en","de"],"languages":{"en":{"title":true,"content":true,"excerpt":true},"de":{"title":true,"content":true,"excerpt":true}}},"_links":{"self":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/comments?post=250"}],"version-history":[{"count":6,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/250\/revisions"}],"predecessor-version":[{"id":264,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/posts\/250\/revisions\/264"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/media\/384"}],"wp:attachment":[{"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/media?parent=250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/categories?post=250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/erdbeerbeet.com\/de\/wp-json\/wp\/v2\/tags?post=250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}