{"id":523,"date":"2025-04-29T11:16:04","date_gmt":"2025-04-29T11:16:04","guid":{"rendered":"https:\/\/studiospektar.hr\/cnb\/?p=523"},"modified":"2025-04-29T11:53:08","modified_gmt":"2025-04-29T11:53:08","slug":"speech-bubbles","status":"publish","type":"post","link":"https:\/\/studiospektar.hr\/cnb\/speech-bubbles\/","title":{"rendered":"Speech Bubbles"},"content":{"rendered":"\n<p>I kept calling them &#8220;comic clouds&#8221; because that&#8217;s what we called them in comic books. You know the ones, little clouds of text floating above character, showing you what they are saying. But it turns out the &#8220;official&#8221; name is &#8220;<a href=\"https:\/\/en.wikipedia.org\/wiki\/Speech_balloon\" data-type=\"link\" data-id=\"https:\/\/en.wikipedia.org\/wiki\/Speech_balloon\" target=\"_blank\" rel=\"noreferrer noopener\">speech balloons<\/a>&#8220;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"174\" src=\"https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/asterix-man.gif\" alt=\"\" class=\"wp-image-534\"\/><\/figure>\n\n\n\n<p>We wanted to have those in Cloak and Boffer and it is definitely an amount of work, especially the way we want them. First of all, we wanted different types of clouds. After some reasoning and restructuring, we settled on two types of clouds &#8211; Regular and Role Play. Here is the regular cloud:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"979\" height=\"607\" src=\"https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/image.png\" alt=\"\" class=\"wp-image-526\" srcset=\"https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/image.png 979w, https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/image-300x186.png 300w, https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/image-768x476.png 768w\" sizes=\"auto, (max-width: 979px) 100vw, 979px\" \/><\/figure>\n\n\n\n<p>Yes, the pointer is a bit off, we&#8217;re still working on that. That&#8217;s not even close to the biggest problem. Now, the Role Play cloud had to be quite different and we settled on a scroll without a pointing thing that points at the player. It&#8217;s fine, the characters are animated, it will be obvious who is talking. Here was my suggestion how it would work. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"953\" height=\"546\" src=\"https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/image-1.png\" alt=\"\" class=\"wp-image-528\" srcset=\"https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/image-1.png 953w, https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/image-1-300x172.png 300w, https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/image-1-768x440.png 768w\" sizes=\"auto, (max-width: 953px) 100vw, 953px\" \/><\/figure>\n\n\n\n<p>The cloud type had to be auto-chosen from the ink script. As you can see above, if the sentence starts with the character&#8217;s real name, it&#8217;s a normal cloud. If it starts with character&#8217;s character name, it&#8217;s a roleplay scroll.<\/p>\n\n\n\n<p>Clouds are made to be bigger or smaller, depending on the length of the sentence. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"465\" src=\"https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/image-3-1024x465.png\" alt=\"\" class=\"wp-image-530\" srcset=\"https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/image-3-1024x465.png 1024w, https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/image-3-300x136.png 300w, https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/image-3-768x348.png 768w, https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/image-3.png 1338w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Here are some preliminary tests. Of course, concept art is quite different from the actual screen so we changed a lot of things, including fonts.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"659\" src=\"https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/image-4.png\" alt=\"\" class=\"wp-image-531\" srcset=\"https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/image-4.png 1000w, https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/image-4-300x198.png 300w, https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/image-4-768x506.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>And there are still a few glitches with longer sentences, but we&#8217;re hammering those out.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"905\" height=\"532\" src=\"https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/rely.png\" alt=\"\" class=\"wp-image-532\" srcset=\"https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/rely.png 905w, https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/rely-300x176.png 300w, https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/rely-768x451.png 768w\" sizes=\"auto, (max-width: 905px) 100vw, 905px\" \/><\/figure>\n\n\n\n<p>On the upside, as I was writing this, I got an update from the programmer that costume changes work now and I can switch between costumes. Not just that, as you can see, hand tints work properly now and characters no longer have <a href=\"https:\/\/studiospektar.hr\/cnb\/white-gloves\/\" data-type=\"post\" data-id=\"30\">White Gloves<\/a>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"781\" height=\"582\" src=\"https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/7DD6591F-3229-41EB-A459-6E0C8869577D.png\" alt=\"\" class=\"wp-image-533\" srcset=\"https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/7DD6591F-3229-41EB-A459-6E0C8869577D.png 781w, https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/7DD6591F-3229-41EB-A459-6E0C8869577D-300x224.png 300w, https:\/\/studiospektar.hr\/cnb\/wp-content\/uploads\/2025\/04\/7DD6591F-3229-41EB-A459-6E0C8869577D-768x572.png 768w\" sizes=\"auto, (max-width: 781px) 100vw, 781px\" \/><\/figure>\n\n\n\n<p>We&#8217;re getting there, but gamedev takes time, obviously.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I kept calling them &#8220;comic clouds&#8221; because that&#8217;s what we called them in comic books. You know the ones, little clouds of text floating above character, showing you what they are saying. But it turns out the &#8220;official&#8221; name is &#8220;speech balloons&#8220; We wanted to have those in Cloak and Boffer and it is definitely [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":537,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[27,23],"tags":[30,31],"class_list":["post-523","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cnb-development","category-player-experience","tag-game-design","tag-ink"],"_links":{"self":[{"href":"https:\/\/studiospektar.hr\/cnb\/wp-json\/wp\/v2\/posts\/523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studiospektar.hr\/cnb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studiospektar.hr\/cnb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studiospektar.hr\/cnb\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/studiospektar.hr\/cnb\/wp-json\/wp\/v2\/comments?post=523"}],"version-history":[{"count":1,"href":"https:\/\/studiospektar.hr\/cnb\/wp-json\/wp\/v2\/posts\/523\/revisions"}],"predecessor-version":[{"id":536,"href":"https:\/\/studiospektar.hr\/cnb\/wp-json\/wp\/v2\/posts\/523\/revisions\/536"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studiospektar.hr\/cnb\/wp-json\/wp\/v2\/media\/537"}],"wp:attachment":[{"href":"https:\/\/studiospektar.hr\/cnb\/wp-json\/wp\/v2\/media?parent=523"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studiospektar.hr\/cnb\/wp-json\/wp\/v2\/categories?post=523"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studiospektar.hr\/cnb\/wp-json\/wp\/v2\/tags?post=523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}