{"id":940,"date":"2012-06-03T13:29:32","date_gmt":"2012-06-03T11:29:32","guid":{"rendered":"https:\/\/porzelt.net\/?p=940"},"modified":"2019-10-04T16:12:00","modified_gmt":"2019-10-04T16:12:00","slug":"making-the-game-teil-11-das-storyboard","status":"publish","type":"post","link":"https:\/\/porzelt.net\/en\/making-the-game-teil-11-das-storyboard","title":{"rendered":"Making The Game \u2013 Teil 11: Das Storyboard"},"content":{"rendered":"<p>After the objectives of the application and conditions are set, the storyboard is created. This describes the general structure and flow of the game. Since this application is a complex trivia game with various mini-games, the planning of the storyboard is divided into two phases: the rough concept, in which the general sequence and basic structures are determined, and the detailed design, in which the different sections are discussed in detail.<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n<strong>Rough concept<\/strong><br \/>\nAs part of the rough concept, basic structure and procedures of the game are outlined. In addition, creative and media decisions for future action will be determined.<br \/>\n&nbsp;<br \/>\nAs an example of creating the rough draft here are the two pencil sketches of the menu and the multiple choice quiz game.<br \/>\n&nbsp;<\/p>\n<figure id=\"attachment_942\" style=\"width: 300px\"  class=\"wp-caption aligncenter\"><a href=\"http:\/\/cryptedchat.de\/wp-content\/uploads\/2012\/06\/Bildschirmfoto-2012-06-01-um-19.19.04.png\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/cryptedchat.de\/wp-content\/uploads\/2012\/06\/Bildschirmfoto-2012-06-01-um-19.19.04-300x167.png\" alt=\"First sketch of the menu (left), first sketch of the game (right)\" title=\"First sketch of the menu (left), first sketch of the game (right)\" width=\"300\" height=\"167\" class=\"size-medium wp-image-942\" srcset=\"https:\/\/porzelt.net\/wp-content\/uploads\/2012\/06\/Bildschirmfoto-2012-06-01-um-19.19.04-300x167.png 300w, https:\/\/porzelt.net\/wp-content\/uploads\/2012\/06\/Bildschirmfoto-2012-06-01-um-19.19.04-768x429.png 768w, https:\/\/porzelt.net\/wp-content\/uploads\/2012\/06\/Bildschirmfoto-2012-06-01-um-19.19.04-830x463.png 830w, https:\/\/porzelt.net\/wp-content\/uploads\/2012\/06\/Bildschirmfoto-2012-06-01-um-19.19.04-230x128.png 230w, https:\/\/porzelt.net\/wp-content\/uploads\/2012\/06\/Bildschirmfoto-2012-06-01-um-19.19.04-350x195.png 350w, https:\/\/porzelt.net\/wp-content\/uploads\/2012\/06\/Bildschirmfoto-2012-06-01-um-19.19.04-480x268.png 480w, https:\/\/porzelt.net\/wp-content\/uploads\/2012\/06\/Bildschirmfoto-2012-06-01-um-19.19.04.png 896w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><figcaption class=\"wp-caption-text\">First sketch of the menu (left), first sketch of the game (right)<\/figcaption><\/figure>\n<p>&nbsp;<br \/>\nBecause NUI applications spare on overloaded user interfaces and unnecessary navigation elements, including, among other things, the menu bar at the top of each window, one of the first and most important decisions is that the application will only be playable in full screen mode. This ensures that the player, when interactions take place at the top of the screen, does not accidentally close the program.<br \/>\nFurthermore, complex animated graphics and avatars are left out of the game as they may distract the players from the actual game content. Because the actual host of the quiz show is not represented visually, is stimulated beyond the imagination of the player how he might look like.<br \/>\n&nbsp;<br \/>\nAnother basic decision is that the game, in addition to the textual representation, has a fully operational speech output. This should also reflect not only all the texts of the game acoustically, but also provide further explanations of the correct answers. This decision has been made in terms of cognitive load theory, since it can lead to cognitive overload a perceptual channel when it becomes very stressed to read a lot of text.<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n<strong>Detailed concept<\/strong><br \/>\nHaving decided in the rough concept how the application is built around and how it has to look like, it&#8217;s time for the detailed concept, which describes the basic program as accurately as possible.<br \/>\n&nbsp;<\/p>\n<figure id=\"attachment_943\" style=\"width: 278px\"  class=\"wp-caption aligncenter\"><a href=\"http:\/\/cryptedchat.de\/wp-content\/uploads\/2012\/06\/Bildschirmfoto-2012-03-13-um-10.46.48.png\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/cryptedchat.de\/wp-content\/uploads\/2012\/06\/Bildschirmfoto-2012-03-13-um-10.46.48-278x300.png\" alt=\"Program without the trivia game rounds\" title=\"Program without the trivia game rounds\" width=\"278\" height=\"300\" class=\"size-medium wp-image-943\" srcset=\"https:\/\/porzelt.net\/wp-content\/uploads\/2012\/06\/Bildschirmfoto-2012-03-13-um-10.46.48-278x300.png 278w, https:\/\/porzelt.net\/wp-content\/uploads\/2012\/06\/Bildschirmfoto-2012-03-13-um-10.46.48-230x248.png 230w, https:\/\/porzelt.net\/wp-content\/uploads\/2012\/06\/Bildschirmfoto-2012-03-13-um-10.46.48-350x377.png 350w, https:\/\/porzelt.net\/wp-content\/uploads\/2012\/06\/Bildschirmfoto-2012-03-13-um-10.46.48.png 476w\" sizes=\"(max-width: 278px) 100vw, 278px\" \/><\/a><figcaption class=\"wp-caption-text\">Program without the trivia game rounds<\/figcaption><\/figure>\n<p>&nbsp;<br \/>\nDue to the previously defined objectives and specified conditions, the program flow is already planned in detail before the first iteration is made (see figure above).<br \/>\nIn addition to the flowchart of the program design sketches, which describe the different options and menue items, so they fit together. (see figure below)<br \/>\n&nbsp;<\/p>\n<figure id=\"attachment_944\" style=\"width: 300px\"  class=\"wp-caption aligncenter\"><a href=\"http:\/\/cryptedchat.de\/wp-content\/uploads\/2012\/06\/master_sketches001222.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/cryptedchat.de\/wp-content\/uploads\/2012\/06\/master_sketches001222-300x247.jpg\" alt=\"Scan of the detailed concept. (from top left to bottom right), device selection, working title, language selection, menu, player selection, options, training mode, Table with Different information, team mode\" title=\"Scan of the detailed concept. (from top left to bottom right), device selection, working title, language selection, menu, player selection, options, training mode, Table with Different information, team mode\" width=\"300\" height=\"247\" class=\"size-medium wp-image-944\"><\/a><figcaption class=\"wp-caption-text\">Scan of the detailed concept. (from top left to bottom right), device selection, working title, language selection, menu, player selection, options, training mode, Table with Different information, team mode<\/figcaption><\/figure>\n<p>&nbsp;<br \/>\nSince we have no detailed analyzes of the actual sequence of rounds, this procedure is defined in a later iteration, after the basic functions are created.<br \/>\n&nbsp;<br \/>\nBy the agile and iterative development of the application there must be, in addition to the concept and flowchart, a priority list, the so-called &#8220;product backlog&#8221; created. This includes are all necessary components and priorities. At the beginning of each iteration, a high-priority request is selected for implementation. The product backlog does not purport to be complete and may be altered or expanded during development.<br \/>\nA selection of the most important components of the program components and requirements are examined more closely in the coming entries.<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<\/p>\n<p>Upcoming blog entries<br \/>\nMaking The Game \u2013 Part 12: The Graphics Library<br \/>\nMaking The Game \u2013 Part 13: The Sound Management<br \/>\nMaking The Game \u2013 Part 14: Knowledge base and question selection \/ Working with XML<br \/>\nMaking The Game \u2013 Part 15: Game stages<br \/>\nMaking The Game \u2013 Part 16: Mini-Games<br \/>\nMaking The Game \u2013 Part 17: Evaluation and deployment of the application<br \/>\nMaking The Game \u2013 Part 18: Concept for school use and outlook<br \/>\n\u2026<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>After the objectives of the application and conditions are set, the storyboard is created. This describes the general structure and flow of the game. Since this application is a complex trivia game with various mini-games, the planning of the storyboard is divided into two phases: the rough concept, in which the general sequence and basic structures are determined, and the detailed design, in which the different sections are discussed in detail. &nbsp; &nbsp; Rough concept As part of the rough concept, basic structure and procedures of the game are outlined. In addition, creative and media decisions for future action will be determined. &nbsp; As an example of creating the rough [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":973,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,7],"tags":[21,30,74,77,88,104,109,122,126,135,136,151,163,170,175,189,200,201,226,227,230,231],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/posts\/940"}],"collection":[{"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/comments?post=940"}],"version-history":[{"count":1,"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/posts\/940\/revisions"}],"predecessor-version":[{"id":1238,"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/posts\/940\/revisions\/1238"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/media\/973"}],"wp:attachment":[{"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/media?parent=940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/categories?post=940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/tags?post=940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}