{"id":259,"date":"2020-03-20T06:16:00","date_gmt":"2020-03-20T06:16:00","guid":{"rendered":"https:\/\/projects-old.etc.cmu.edu\/plumbob\/?p=259"},"modified":"2020-04-24T21:35:01","modified_gmt":"2020-04-24T21:35:01","slug":"dev-blog-week-9","status":"publish","type":"post","link":"https:\/\/projects-old.etc.cmu.edu\/plumbob\/index.php\/2020\/03\/20\/dev-blog-week-9\/","title":{"rendered":"Dev Blog week 9: HTML5 Visuals"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"259\" class=\"elementor elementor-259\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9af5edf elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"9af5edf\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9cbb4f9\" data-id=\"9cbb4f9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5f6142b elementor-widget elementor-widget-heading\" data-id=\"5f6142b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Dev Blog Week 9<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bea5446 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"bea5446\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5fc4178\" data-id=\"5fc4178\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-afb5069 elementor-widget elementor-widget-text-editor\" data-id=\"afb5069\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div id=\"1581119401.030800\" class=\"c-virtual_list__item\" tabindex=\"-1\" role=\"listitem\" aria-label=\"Ariel Tan at 3:50 PM. Weekly Blog: Script Writing: Most people think our demo is very easy to understand. However, a little tedious as same questions keep looping. Therefore, after quarter, we tried a new way in design and script. Instead of using linear Q&amp;A style, we tried listing a lot of options and started with user giving command directly. The playtest results are somehow expected. Players can only hit few options we give in script. Next week, we gonna have more design meeting and combine two styles(linear and flat) together to make players feel the freedom while understanding their goals. For \" aria-expanded=\"false\"><div class=\"c-message_kit__background p-message_pane_message__message c-message_kit__message\" role=\"document\" data-qa=\"message_container\" data-qa-unprocessed=\"false\" data-qa-placeholder=\"false\"><div class=\"c-message_kit__hover\" role=\"document\" data-qa-hover=\"true\"><div class=\"c-message_kit__actions c-message_kit__actions--default\"><div class=\"c-message_kit__gutter\"><div class=\"c-message_kit__gutter__right\" data-qa=\"message_content\"><div class=\"c-message_kit__blocks c-message_kit__blocks--rich_text\"><div class=\"c-message__message_blocks c-message__message_blocks--rich_text\"><div class=\"p-block_kit_renderer\" data-qa=\"block-kit-renderer\"><div class=\"p-block_kit_renderer__block_wrapper p-block_kit_renderer__block_wrapper--first\"><div class=\"p-rich_text_block\" dir=\"auto\"><h5 class=\"p-rich_text_section\">HTML5<\/h5><p class=\"p-rich_text_section\">After halves presentation, one of our top priority tasks to work on is the visuals of our game. After several discussions with our client, we finally decided to use the new HTML5 framework from Amazon to set up a web app that can use for our visuals.\u00a0 Currently, the web app is hosting on our S3 bucket with support from CloudFront. It communicates with our skill through \u201cmessage\u201d that allows us to show different images at each decision point. This gave us the ability to show a corresponding image for the scenario which can bring a more immersive experience to the players. In addition, we also tested the capacity of the web app by showing static images, Gif and video clips. We found out all the above are doable as long as the assets are stored on the S3 bucket. But the internet connections may slow down the speed of loading videos. This will decrease the smoothness of our experience. In fact, there&#8217;s already The Sims 4 that contains a lot of great visuals. We really don&#8217;t need to replicate it, and there&#8217;s no way to design a better plausible graphics on merely the Alexa device. Therefore, we decided to go with simply static images that can help our storytelling experience. The following is a short clip of our first visual prototype.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-94935b5 elementor-widget elementor-widget-video\" data-id=\"94935b5\" data-element_type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"http:\/\/www.etc.cmu.edu\/projects\/plumbob\/wp-content\/uploads\/2020\/03\/html5_first-test_1.mp4\" controls=\"\" preload=\"metadata\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3238658 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3238658\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-eb1cdf1\" data-id=\"eb1cdf1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-53c606c elementor-widget elementor-widget-text-editor\" data-id=\"53c606c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div id=\"1581119401.030800\" class=\"c-virtual_list__item\" tabindex=\"-1\" role=\"listitem\" aria-label=\"Ariel Tan at 3:50 PM. Weekly Blog: Script Writing: Most people think our demo is very easy to understand. However, a little tedious as same questions keep looping. Therefore, after quarter, we tried a new way in design and script. Instead of using linear Q&amp;A style, we tried listing a lot of options and started with user giving command directly. The playtest results are somehow expected. Players can only hit few options we give in script. Next week, we gonna have more design meeting and combine two styles(linear and flat) together to make players feel the freedom while understanding their goals. For \" aria-expanded=\"false\"><div class=\"c-message_kit__background p-message_pane_message__message c-message_kit__message\" role=\"document\" data-qa=\"message_container\" data-qa-unprocessed=\"false\" data-qa-placeholder=\"false\"><div class=\"c-message_kit__hover\" role=\"document\" data-qa-hover=\"true\"><div class=\"c-message_kit__actions c-message_kit__actions--default\"><div class=\"c-message_kit__gutter\"><div class=\"c-message_kit__gutter__right\" data-qa=\"message_content\"><div class=\"c-message_kit__blocks c-message_kit__blocks--rich_text\"><div class=\"c-message__message_blocks c-message__message_blocks--rich_text\"><div class=\"p-block_kit_renderer\" data-qa=\"block-kit-renderer\"><div class=\"p-block_kit_renderer__block_wrapper p-block_kit_renderer__block_wrapper--first\"><h5 dir=\"auto\"><span style=\"font-weight: 400;\">Alexa Lifecycle when using HTML<\/span><\/h5><div class=\"p-rich_text_block\" dir=\"auto\">The skill detects whether HTML is available on the customer\u2019s current device based on the device context of a skill request, and if so can choose to send a Alexa.Presentation.HTML.Start directive to load the application. The device then loads the given URL, the web app then needs to initialize the Alexa SDK and wait for the connection to be ready. Once the SDK is initialized, Alexa notifies the HTML application when communication with Alexa has been established and the rest of the API is ready for use.<br \/>HTML skills can communicate with their skill endpoint to send local inputs, receive voice inputs, and use Alexa services like the skill store. To do this, a bidirectional socket like messaging scheme is used. The application can send a message to the skill at any time (e.g. if the screen is touched, or a timer elapses), and the skill can send one to the application at any time (e.g. should it receive an intent request). This mechanism is asynchronous and not guaranteed to be ordered. There\u2019s one limitation that the HTML side could only receive two message input per second, but based on our project scope this isn\u2019t a concern for now.<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8807dee elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8807dee\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-05732ec\" data-id=\"05732ec\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-76f7235 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"76f7235\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f3b0068\" data-id=\"f3b0068\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dev Blog Week 9 HTML5 After halves presentation, one of our top priority tasks to work on is the visuals of our game. After several discussions with our client, we finally decided to use the new HTML5 framework from Amazon to set up a web app that can use for our visuals.&nbsp; Currently, the web [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-259","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/projects-old.etc.cmu.edu\/plumbob\/index.php\/wp-json\/wp\/v2\/posts\/259"}],"collection":[{"href":"https:\/\/projects-old.etc.cmu.edu\/plumbob\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projects-old.etc.cmu.edu\/plumbob\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projects-old.etc.cmu.edu\/plumbob\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/projects-old.etc.cmu.edu\/plumbob\/index.php\/wp-json\/wp\/v2\/comments?post=259"}],"version-history":[{"count":12,"href":"https:\/\/projects-old.etc.cmu.edu\/plumbob\/index.php\/wp-json\/wp\/v2\/posts\/259\/revisions"}],"predecessor-version":[{"id":328,"href":"https:\/\/projects-old.etc.cmu.edu\/plumbob\/index.php\/wp-json\/wp\/v2\/posts\/259\/revisions\/328"}],"wp:attachment":[{"href":"https:\/\/projects-old.etc.cmu.edu\/plumbob\/index.php\/wp-json\/wp\/v2\/media?parent=259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projects-old.etc.cmu.edu\/plumbob\/index.php\/wp-json\/wp\/v2\/categories?post=259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projects-old.etc.cmu.edu\/plumbob\/index.php\/wp-json\/wp\/v2\/tags?post=259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}