{"id":920,"date":"2024-10-14T00:34:50","date_gmt":"2024-10-13T22:34:50","guid":{"rendered":"https:\/\/wesleydegraaf.com\/?page_id=920"},"modified":"2024-10-14T00:41:17","modified_gmt":"2024-10-13T22:41:17","slug":"hku-game-blitz","status":"publish","type":"page","link":"https:\/\/wesleydegraaf.com\/en\/hku-game-blitz\/","title":{"rendered":"HKU Game Blitz"},"content":{"rendered":"\n<div class=\"wp-block-cover\" style=\"min-height:280px;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-palette-color-1-background-color has-background-dim-100 has-background-dim\"><\/span><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-x-large-font-size wp-block-paragraph\"><strong>HKU Game Blitz<\/strong><\/p>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-embed alignright is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"HKU Game Blitz Trailer\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/Qmjo9Qm93Jw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Voor project Context moesten we een game maken voor de opendag van HKU. De game moest te maken hebben met de studie ervaring op HKU. Wij kozen ervoor om de 3 richtingen van de opleidingen te representeren en ook de tijdsdruk die aanwezig is op HKU. De game moest door de toekomstige student gespeeld worden en door een van z&#8217;n ouders. We weten allemaal dat ouders vaak moeite hebben met controlls, daarom hadden wij besloten om de Wiimote te gebruiken als input. De Wii is een console die gemaakt is voor familie. Dit was dus een logische keuze. <br><br>We hadden voor de Art minigame een painting game gemaakt waar beide spelers moesten verven. Voor de design minigame moest de ene speler een level bouwen en de andere speler dat level halen. Bij de develop minigame moesten beide spelers een instructie set schrijven om een robot naar de finish te krijgen.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-palette-color-1-color\">Project Info:<\/mark><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Teamleden: Floris Koelemaij, Lloyd Belterman, Arman Aryob, ELL Visser<br>Project tijd: HKU Jaar 1 Periode 3 (2024)<br>Engine: Unity<br>Code Languages: C#<br>Design Patterns: Singleton &amp; FlyWeight<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/wesleydegraaf.com\/wp-content\/uploads\/2024\/10\/image-14.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"893\" height=\"504\" data-id=\"1059\" src=\"https:\/\/wesleydegraaf.com\/wp-content\/uploads\/2024\/10\/image-14.png\" alt=\"\" class=\"wp-image-1059\" srcset=\"https:\/\/wesleydegraaf.com\/wp-content\/uploads\/2024\/10\/image-14.png 893w, https:\/\/wesleydegraaf.com\/wp-content\/uploads\/2024\/10\/image-14-300x169.png 300w, https:\/\/wesleydegraaf.com\/wp-content\/uploads\/2024\/10\/image-14-768x433.png 768w, https:\/\/wesleydegraaf.com\/wp-content\/uploads\/2024\/10\/image-14-18x10.png 18w\" sizes=\"auto, (max-width: 893px) 100vw, 893px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/wesleydegraaf.com\/wp-content\/uploads\/2024\/10\/image-16.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"893\" height=\"499\" data-id=\"1061\" src=\"https:\/\/wesleydegraaf.com\/wp-content\/uploads\/2024\/10\/image-16.png\" alt=\"\" class=\"wp-image-1061\" srcset=\"https:\/\/wesleydegraaf.com\/wp-content\/uploads\/2024\/10\/image-16.png 893w, https:\/\/wesleydegraaf.com\/wp-content\/uploads\/2024\/10\/image-16-300x168.png 300w, https:\/\/wesleydegraaf.com\/wp-content\/uploads\/2024\/10\/image-16-768x429.png 768w, https:\/\/wesleydegraaf.com\/wp-content\/uploads\/2024\/10\/image-16-18x10.png 18w\" sizes=\"auto, (max-width: 893px) 100vw, 893px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/wesleydegraaf.com\/wp-content\/uploads\/2024\/10\/image-15.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"895\" height=\"500\" data-id=\"1060\" src=\"https:\/\/wesleydegraaf.com\/wp-content\/uploads\/2024\/10\/image-15.png\" alt=\"\" class=\"wp-image-1060\" srcset=\"https:\/\/wesleydegraaf.com\/wp-content\/uploads\/2024\/10\/image-15.png 895w, https:\/\/wesleydegraaf.com\/wp-content\/uploads\/2024\/10\/image-15-300x168.png 300w, https:\/\/wesleydegraaf.com\/wp-content\/uploads\/2024\/10\/image-15-768x429.png 768w, https:\/\/wesleydegraaf.com\/wp-content\/uploads\/2024\/10\/image-15-18x10.png 18w\" sizes=\"auto, (max-width: 895px) 100vw, 895px\" \/><\/a><\/figure>\n<figcaption class=\"blocks-gallery-caption wp-element-caption\">De verschillende minigames<\/figcaption><\/figure>\n\n\n\n<div style=\"height:104px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-palette-color-1-color has-text-color has-link-color wp-elements-2301c59fff76972b9d240f2073e89083\">Wiimotes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">De game maakt gebruik van Wiimotes hier heb ik een WiiMote API voor gebruikt (<a href=\"https:\/\/github.com\/Flafla2\/Unity-Wiimote\">https:\/\/github.com\/Flafla2\/Unity-Wiimote<\/a>). Ik kreeg de API helaas niet aan de praat voor de nieuwe Wiimotes (WiimotionPlus), dus hij werkt alleen voor de oude Wiimotes. De trilling van de Wiimotes komt, omdat de Wiimotes hele gevoelige input gaven. Lerpen tussen de input gaf ook niet het gewenste resultaat en maakte de input lagy. Ik heb de WiiMote api aangepast en had er een custom inputhandler op gebouwt, hierdoor konden we met de muis een Wiimote nadoen. Dit maakte testen weer makkelijker, maar de WiimoteAPI had een rare inputhandler.<\/p>\n\n\n<div class=\"dm-code-snippet light no-background  dm-normal-version\" style=\"background-color:#abb8c3;\" snippet-height=\"600px\">\n\t\t\t<div class=\"control-language\">\n                <div class=\"dm-buttons\">\n                    <div class=\"dm-buttons-left\">\n                        <div class=\"dm-button-snippet red-button\"><\/div>\n                        <div class=\"dm-button-snippet orange-button\"><\/div>\n                        <div class=\"dm-button-snippet green-button\"><\/div>\n                    <\/div>\n                    <div class=\"dm-buttons-right\">\n                        <a id=\"dm-copy-raw-code\">\n                        <span class=\"dm-copy-text\">Get the Code!<\/span>\n                        <span class=\"dm-copy-confirmed\" style=\"display:none\">You have it!<\/span>\n                        <span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                <pre class=\"line-numbers\"><code id=\"dm-code-raw\" class=\"wrap language-typescript\">\n<pre>\n    protected void HandleInput()\n    {\n        foreach (KeyValuePair<WiimoteButton, bool> key in activeInput)\n        {\n            if (key.Value)\n            {\n                if (!buttonDown.ContainsKey(key.Key))\n                {\n                    buttonDown.Add(key.Key, Time.frameCount + 1);\n                }\n            }\n            else if (buttonDown.ContainsKey(key.Key))\n            {\n                buttonDown.Remove(key.Key);\n\n                if (!buttonUp.ContainsKey(key.Key)) buttonUp.Add(key.Key, Time.frameCount + 1);\n                else buttonUp[key.Key] = Time.frameCount + 1;\n            }\n        }\n    }\n<\/pre>\n<\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Verwerkt de input van de Wiimote<\/p>\n\n\n\n<div style=\"height:58px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-palette-color-1-color has-text-color has-link-color wp-elements-a1ac37bf3fe42c2b7bac20b56efa51a2\">Painting Game<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bij de painting game krijgt de speler een random prompt van de game en moeten de spelers deze samen tekenen. Beide spelers hebben een set aan kleuren en kunnen elkaars kleuren niet gebruiken. Aan het einde wordt de tekening gereviewed. Dit wouden we met een automatisch systeem doen, maar dit was te complex voor de tijd die beschikbaar was. Het tekenen gebeurt op een Texture2D. Eerst worden alle draw data opgehaald en daarna wordt dit op de texture2D gezet. (Het systeem is dus niet gelimiteerd naar 2 spelers)<\/p>\n\n\n<div class=\"dm-code-snippet light no-background  dm-normal-version\" style=\"background-color:#abb8c3;\" snippet-height=\"600px\">\n\t\t\t<div class=\"control-language\">\n                <div class=\"dm-buttons\">\n                    <div class=\"dm-buttons-left\">\n                        <div class=\"dm-button-snippet red-button\"><\/div>\n                        <div class=\"dm-button-snippet orange-button\"><\/div>\n                        <div class=\"dm-button-snippet green-button\"><\/div>\n                    <\/div>\n                    <div class=\"dm-buttons-right\">\n                        <a id=\"dm-copy-raw-code\">\n                        <span class=\"dm-copy-text\">Get the Code!<\/span>\n                        <span class=\"dm-copy-confirmed\" style=\"display:none\">You have it!<\/span>\n                        <span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                <pre class=\"line-numbers\"><code id=\"dm-code-raw\" class=\"wrap language-typescript\">\n<pre>\n    public void DrawPixels(Dictionary|int, DrawData| wiiPositions)\n    {\n        Texture2D texture2D = currentDrawing;\n\n        RenderTexture curText = RenderTexture.active;\n        RenderTexture renTex = new RenderTexture(texture2D.width, texture2D.height, 32);\n\n        Graphics.Blit(texture2D, renTex);\n        RenderTexture.active = renTex;\n\n        texture2D.ReadPixels(new Rect(0, 0, texture2D.width, texture2D.height), 0, 0);\n\n        foreach (KeyValuePair<int, DrawData> pos in wiiPositions)\n        {\n            Vector2 newPos = pos.Value.position - new Vector2(Screen.width * .5f, Screen.height * .5f);\n            newPos += new Vector2(drawingImage.rectTransform.rect.width * drawCanvas.scaleFactor * .5f, drawingImage.rectTransform.rect.height * drawCanvas.scaleFactor * .5f);\n            newPos = new Vector2(newPos.x \/ (1238 * drawCanvas.scaleFactor) * width, (newPos.y + 75 * drawCanvas.scaleFactor) \/ (740 * drawCanvas.scaleFactor) * height);\n\n            Vector2Int changePixelPos = new Vector2Int(Mathf.RoundToInt(newPos.x), Mathf.RoundToInt(newPos.y));\n\n            List<Vector2> positions = lastDrawData.ContainsKey(pos.Key) ? GetLinearPositions(lastDrawData[pos.Key].position, changePixelPos) : new List<Vector2>() { changePixelPos };\n\n            foreach (Vector3 position in positions)\n            {\n                List<Vector2> pixels = GetNeighbouringPixels(new Vector2(texture2D.width, texture2D.height), position, brushRadius);\n\n                if (pixels.Count > 0)\n                    foreach (Vector2 p in pixels)\n                        texture2D.SetPixel((int)p.x, (int)p.y, pos.Value.color);\n            }\n\n            if (!lastDrawData.ContainsKey(pos.Key)) lastDrawData.Add(pos.Key, new DrawData(newPos, pos.Value.color));\n            else lastDrawData[pos.Key] = new DrawData(newPos, pos.Value.color);\n        }\n\n        texture2D.Apply();\n\n        RenderTexture.active = curText;\n        renTex.Release();\n        Destroy(renTex);\n        curText = null;\n        renTex = null;\n\n        drawingImage.texture = texture2D;\n    }\n<\/pre>\n<\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Tekent alle pixels op de texture2D.<\/p>\n\n\n\n<div style=\"height:69px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading has-palette-color-1-color has-text-color has-link-color wp-elements-25526da7d42438d2c4adc9e482fcf8d0\">Programming Game<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Voor de programmeer minigame is het doel om de robot van punt A naar punt B te brengen. Dit doen de spelers doormiddel van code blocks. Ze hebben 4 simpele code blocks: Vooruit, achteruit, Draai Links en Draai Rechts. De spelers hebben beide 2 code blocks. Na het schrijven van de instructie set kunnen ze deze runnen. De spelers kunnen na het in elkaar zetten niks meer toevoegen of aanpassen (beoordelings fase). De robot volgt de complete instructie set en laat dit zien op beeld. Als een actie niet kan blijft de robot staan.<\/p>\n\n\n<div class=\"dm-code-snippet light no-background  dm-normal-version\" style=\"background-color:#abb8c3;\" snippet-height=\"600px\">\n\t\t\t<div class=\"control-language\">\n                <div class=\"dm-buttons\">\n                    <div class=\"dm-buttons-left\">\n                        <div class=\"dm-button-snippet red-button\"><\/div>\n                        <div class=\"dm-button-snippet orange-button\"><\/div>\n                        <div class=\"dm-button-snippet green-button\"><\/div>\n                    <\/div>\n                    <div class=\"dm-buttons-right\">\n                        <a id=\"dm-copy-raw-code\">\n                        <span class=\"dm-copy-text\">Get the Code!<\/span>\n                        <span class=\"dm-copy-confirmed\" style=\"display:none\">You have it!<\/span>\n                        <span class=\"dm-error-message\" style=\"display:none\">Use a different Browser<\/span><\/a>\n                    <\/div>\n                <\/div>\n                <pre class=\"line-numbers\"><code id=\"dm-code-raw\" class=\"wrap language-typescript\">\n<pre>\n{ \/\/(Display fix)\n    public void AddToCode(DevPlaceButton placeButton)\n    {\n        if (codeLines.Count > 0)\n        {\n            CodeLines lastIndex = codeLines[codeLines.Count - 1];\n            if (lastIndex.PlaceButtonName == placeButton.name)\n            {\n                lastIndex.AddRunCount();\n                Destroy(placeButton.gameObject);\n                return;\n            }\n        }\n\n        CodeLines tempLine = Instantiate(codeLinePrefab, codeLineParent);\n        codeLines.Add(tempLine);\n        tempLine.Setup(codeLines.Count, placeButton);\n\n        if (codeLines.Count > 6)\n        {\n            Vector2 viewPortLocalPosition = scrollRect.viewport.localPosition;\n            Vector2 targetLocalPosition = tempLine.transform.localPosition;\n\n            Vector2 newTargetPosition = new Vector2(codeLineParent.transform.localPosition.x, 0 - (viewPortLocalPosition.y + targetLocalPosition.y + scrollRect.viewport.rect.height * .38f));\n\n            codeLineParent.localPosition = newTargetPosition;\n        }\n    }\n\n    private IEnumerator RunCode()\n    {\n        int executionIndex = 0;\n        while (true)\n        {\n\n            if (codeLines[executionIndex].RunCode(out int ActionIndex))\n            {\n                executionIndex++;\n            }\n            robotPlayer.SendInstructions(ActionIndex);\n            yield return new WaitForSeconds(1);\n\n            if (codeLines.Count == executionIndex) break;\n        }\n\n        if (robotPlayer.IsOnFinish())\n        {\n            \/\/FINISH\n            GameManager.Instance.AddScore(1);\n            GameManager.Instance.LoadNextGame();\n        }\n        else\n        {\n            GameManager.Instance.LoadNextGame();\n        }\n    }\n}\n<\/pre>\n<\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Voegt een code block toe aan de code execution en de Code run IEnumerator.<\/p>\n\n\n\n<p class=\"has-text-align-center has-vivid-red-color has-text-color has-link-color wp-elements-1e0ff33e12ca0d14411e07b7685764df wp-block-paragraph\"><br>Geen download beschikbaar aangezien het met Wiimotes gespeeld moet worden.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voor project Context moesten we een game maken voor de opendag van HKU. De game moest te maken hebben met de studie ervaring op HKU. Wij kozen ervoor om de 3 richtingen van de opleidingen te representeren en ook de tijdsdruk die aanwezig is op HKU. De game moest door de toekomstige student gespeeld worden [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-920","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/wesleydegraaf.com\/en\/wp-json\/wp\/v2\/pages\/920","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wesleydegraaf.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wesleydegraaf.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wesleydegraaf.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wesleydegraaf.com\/en\/wp-json\/wp\/v2\/comments?post=920"}],"version-history":[{"count":45,"href":"https:\/\/wesleydegraaf.com\/en\/wp-json\/wp\/v2\/pages\/920\/revisions"}],"predecessor-version":[{"id":1100,"href":"https:\/\/wesleydegraaf.com\/en\/wp-json\/wp\/v2\/pages\/920\/revisions\/1100"}],"wp:attachment":[{"href":"https:\/\/wesleydegraaf.com\/en\/wp-json\/wp\/v2\/media?parent=920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}