{"id":1338,"date":"2026-04-02T14:56:17","date_gmt":"2026-04-02T14:56:17","guid":{"rendered":"https:\/\/sites.wsagames.com\/yy8y24\/?p=1338"},"modified":"2026-04-03T18:52:33","modified_gmt":"2026-04-03T18:52:33","slug":"shopping-list-system","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/yy8y24\/2026\/04\/02\/shopping-list-system\/","title":{"rendered":"Shopping List System"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>This video shows shopping list system:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-video alignwide\"><video height=\"1528\" style=\"aspect-ratio: 2560 \/ 1528;\" width=\"2560\" controls src=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u5f55\u5236-2026-04-01-211232.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Shopping List System:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-gallery alignwide 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\"><img fetchpriority=\"high\" decoding=\"async\" width=\"2560\" height=\"1707\" data-id=\"1346\" src=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/shopping-list-scaled.png\" alt=\"\" class=\"wp-image-1346\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/shopping-list-scaled.png 2560w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/shopping-list-300x200.png 300w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/shopping-list-1024x683.png 1024w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/shopping-list-768x512.png 768w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/shopping-list-1536x1024.png 1536w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"612\" data-id=\"1345\" src=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-211419-1024x612.png\" alt=\"\" class=\"wp-image-1345\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-211419-1024x612.png 1024w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-211419-300x179.png 300w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-211419-768x459.png 768w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-211419-1536x918.png 1536w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-211419-2048x1224.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">I began by designing a shopping list in Procreate. I drew inspiration from the style of brown paper sticky notes and loose-leaf paper. I designed two little cat stamps to place in the corners of the shopping list, which help to highlight the characters\u2019 personalities and add depth to their backstories. The text on the shopping list is handwritten; I ensured that it retained a handwritten feel whilst remaining legible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The second step was to turn a PNG image into an interactive object in UE5. I imported the shopping list PNG image into UE5. I created a new Blueprint class, added a cube to it, and adjusted the cube to resemble a sheet of paper.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I right-clicked on the imported PNG image to create a material for it. In the cube\u2019s Blueprint class, I selected the PNG material, so that the texture is perfectly mapped onto the cube, with the material visible on every face. Now, a single image has become a 3D object that can be placed in the scene.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Blueprint of shopping list widget:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"614\" src=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-210515-1024x614.png\" alt=\"\" class=\"wp-image-1349\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-210515-1024x614.png 1024w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-210515-300x180.png 300w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-210515-768x460.png 768w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-210515-1536x920.png 1536w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-210515-2048x1227.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">First, I created a user control. Within the user control, I added a canvas panel; within the canvas panel, I placed an image of a shopping list in the centre of the screen and applied a blurred background effect. I created an animation called \u2018Pickup\u2019. This animation lasts one second. At 0 seconds, the image\u2019s Y-coordinate is set to -1100, ensuring the image is off-screen. At 1 second, the Y-coordinate is set to 0, ensuring the image returns to the centre of the screen. Additionally, at 0 seconds, the background blur is set to 0, and at 1 second, it is set to 3, ensuring that the background gradually blurs during the pickup animation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The animation begins to play when the UI loads. Retrieve the \u2018Pickup\u2019 animation and set the animation to play to \u2018Pickup\u2019. Next, define a custom event named \u2018LayNoteDown\u2019 (which plays the animation for putting the shopping list down). When this event is triggered, play the animation set to \u2018Pickup\u2019, and after the animation has finished playing, introduce a 1-second delay. After the 1-second delay, the user control is removed from the screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Blueprint of shopping list:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"610\" src=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-210654-1024x610.png\" alt=\"\" class=\"wp-image-1350\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-210654-1024x610.png 1024w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-210654-300x179.png 300w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-210654-768x457.png 768w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-210654-1536x915.png 1536w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-210654-2048x1220.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The blueprint is triggered when the player interacts with an item. When the player clicks the shopping list for the first time, the user control that was just created opens. The player controller is retrieved, and the player\u2019s movement and camera view are locked to ensure the player does not move erratically whilst the UI is open. The item is set to fade out during the animation to maintain the player\u2019s sense of immersion.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When the player clicks again, the item drop animation is triggered. Retrieve the player controller, lock the player\u2019s movement and camera view to ensure they cannot move around whilst the UI is open. Retrieve the shopping list and set the items to appear, ensuring they reappear in the scene once the drop animation has finished.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Blueprint of player:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"610\" src=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-210713-1024x610.png\" alt=\"\" class=\"wp-image-1354\" srcset=\"https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-210713-1024x610.png 1024w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-210713-300x179.png 300w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-210713-768x457.png 768w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-210713-1536x915.png 1536w, https:\/\/sites.wsagames.com\/yy8y24\/wp-content\/uploads\/sites\/65\/2026\/04\/\u5c4f\u5e55\u622a\u56fe-2026-04-01-210713-2048x1220.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Interaction detection begins when the player clicks the left mouse button. The player\u2019s camera is retrieved and the detection range is calculated. The camera\u2019s position is obtained, and the area within a 200-unit radius in front of the player is determined; these are combined to yield the final detection range. If an object is detected within this range, the interaction interface is called.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This video shows shopping list system: Shopping List System: I began by designing a shopping list in Procreate. I drew inspiration from the style of brown paper sticky notes and loose-leaf paper. I designed two little cat stamps to place in the corners of the shopping list, which help to highlight the characters\u2019 personalities and [&hellip;]<\/p>\n","protected":false},"author":56,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[75,1],"tags":[],"class_list":["post-1338","post","type-post","status-publish","format-standard","hentry","category-development","category-year2"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/posts\/1338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/users\/56"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/comments?post=1338"}],"version-history":[{"count":10,"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/posts\/1338\/revisions"}],"predecessor-version":[{"id":1355,"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/posts\/1338\/revisions\/1355"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/media?parent=1338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/categories?post=1338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/yy8y24\/wp-json\/wp\/v2\/tags?post=1338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}