{"id":18,"date":"2007-02-11T16:33:10","date_gmt":"2007-02-11T22:33:10","guid":{"rendered":"http:\/\/blog.blockos.org\/?p=59"},"modified":"2010-06-27T20:54:33","modified_gmt":"2010-06-27T19:54:33","slug":"shrinked-the-glyph","status":"publish","type":"post","link":"https:\/\/blog.blockos.org\/?p=18","title":{"rendered":"Shrinked the glyph"},"content":{"rendered":"<p>I made some mockups for the tracker interface using <a href=\"http:\/\/tilestudio.sourceforge.net\/\">tile studio<\/a>. It helped me realize that the standard 8&#215;8 font might be too big. Here&#8217;re test images for the instrument and waveform editors.\n<\/p>\n<p><center><br \/>\n<a class=\"imagelink\" href=\"http:\/\/blog.blockos.org\/wp-content\/uploads\/2007\/02\/inst_editor.png\" title=\"Instrument editor interface\"><img decoding=\"async\" id=\"image60\" src=\"http:\/\/blog.blockos.org\/wp-content\/uploads\/2007\/02\/inst_editor.png\" alt=\"Instrument editor interface\" \/><\/a><br \/>\n<br \/>\n<a class=\"imagelink\" href=\"http:\/\/blog.blockos.org\/wp-content\/uploads\/2007\/02\/wav_editor.png\" title=\"Waveform editor interface\"><img decoding=\"async\" id=\"image61\" src=\"http:\/\/blog.blockos.org\/wp-content\/uploads\/2007\/02\/wav_editor.png\" alt=\"Waveform editor interface\" \/><\/a><br \/>\n<\/center><\/p>\n<p>\nAs you can see, the 8&#215;8 font used in the instrument editor menu is too big. The screen is 320&#215;224 wide and i need to have an area of 256 pixels for the sequence editor. So one way to space is to use a smaller font. I decided to use 5&#215;7 font. But there&#8217;s a problem. It&#8217;s easy to use 8&#215;8 font as pcengine stores background graphics using 8&#215;8 tiles. And these tiles are displayed using an array (a map). So if you want to print text, all you have to do is to store the font in VRAM and then set the map so that it points to the correct 8&#215;8 tile. The code looks looks more or less like this (in fact it&#8217;s a little more complicated or pcengine) :<\/p>\n<pre class=\"brush: cpp; title: ; notranslate\" title=\"\">for(i=0; i&lt;strlen(str); ++i)\r\n{\r\n    tile[x+i][y] = mapBaseAddress + 8 * ((x+i) + (y * W));\r\n}<\/pre>\n<p>On the other hand, you can&#8217;t use the background tile map for 5&#215;7 as it doesn&#8217;t fit the 8&#215;8 boundary \ud83d\ude41 So all we have to do is to render each text in vram. We&#8217;ll have to brutally concatenate bits.<br \/>\nIn order to keep things a little bit optimized, i decided to unroll the concatenation loop for 8 iterations. Why? Erm&#8230; A little example will explain it better than i will.\n<\/p>\n<p><center><\/p>\n<table style=\"border: 1px solid black\">\n<tr align=\"center\">\n<td align=\"center\" style=\"background: #a4a4a4;color: #fff;\">byte 0:<\/td>\n<td align=\"center\" style=\"background: #f4f4f4;\">a0<\/td>\n<td align=\"center\">b0<\/td>\n<td align=\"center\" style=\"background: #f4f4f4;\">c0<\/td>\n<td align=\"center\">d0<\/td>\n<td align=\"center\" style=\"background: #f4f4f4;\">e0<\/td>\n<td align=\"center\" style=\"background: #45A0d2; color: #fff;\">a1<\/td>\n<td align=\"center\" style=\"background: #c3ced9; color: #fff;\">b1<\/td>\n<td align=\"center\" style=\"background: #45A0d2; color: #fff;\">c1<\/td>\n<\/tr>\n<tr align=\"center\">\n<td align=\"center\" style=\"background: #a4a4a4; color: #fff;\">byte 1<\/td>\n<td align=\"center\" style=\"background: #c3ced9; color: #fff;\">d1<\/td>\n<td align=\"center\" style=\"background: #45A0d2; color: #fff;\">e1<\/td>\n<td align=\"center\" style=\"background: #f4f4f4;\">a2<\/td>\n<td align=\"center\">b2<\/td>\n<td align=\"center\" style=\"background: #f4f4f4;\">c2<\/td>\n<td align=\"center\">d2<\/td>\n<td align=\"center\" style=\"background: #f4f4f4;\">e2<\/td>\n<td align=\"center\" style=\"background: #45A0d2; color: #fff;\">a3<\/td>\n<\/tr>\n<tr align=\"center\">\n<td align=\"center\" style=\"background: #a4a4a4;color: #fff;\">byte 2:<\/td>\n<td align=\"center\" style=\"background: #c3ced9; color: #fff;\">b3<\/td>\n<td align=\"center\" style=\"background: #45A0d2; color: #fff;\">c3<\/td>\n<td align=\"center\" style=\"background: #c3ced9; color: #fff;\">d3<\/td>\n<td align=\"center\" style=\"background: #45A0d2; color: #fff;\">e3<\/td>\n<td align=\"center\" style=\"background: #f4f4f4;\">a4<\/td>\n<td align=\"center\">b4<\/td>\n<td align=\"center\" style=\"background: #f4f4f4;\">c4<\/td>\n<td align=\"center\">d4<\/td>\n<\/tr>\n<tr align=\"center\">\n<td align=\"center\" style=\"background: #a4a4a4;color: #fff;\">byte 3:<\/td>\n<td align=\"center\" style=\"background: #f4f4f4;\">e4<\/td>\n<td align=\"center\" style=\"background: #45A0d2; color: #fff;\">a5<\/td>\n<td align=\"center\" style=\"background: #c3ced9; color: #fff;\">b5<\/td>\n<td align=\"center\" style=\"background: #45A0d2; color: #fff;\">c5<\/td>\n<td align=\"center\" style=\"background: #c3ced9; color: #fff;\">d5<\/td>\n<td align=\"center\" style=\"background: #45A0d2; color: #fff;\">e5<\/td>\n<td align=\"center\" style=\"background: #f4f4f4;\">a6<\/td>\n<td align=\"center\">b6<\/td>\n<\/tr>\n<tr align=\"center\">\n<td align=\"center\" style=\"background: #a4a4a4;color: #fff;\">byte 4:<\/td>\n<td align=\"center\" style=\"background: #f4f4f4;\">c6<\/td>\n<td align=\"center\">d6<\/td>\n<td align=\"center\" style=\"background: #f4f4f4;\">e6<\/td>\n<td align=\"center\" style=\"background: #45A0d2; color: #fff;\">a7<\/td>\n<td align=\"center\" style=\"background: #c3ced9; color: #fff;\">b7<\/td>\n<td align=\"center\" style=\"background: #45A0d2; color: #fff;\">c7<\/td>\n<td align=\"center\" style=\"background: #c3ced9; color: #fff;\">d7<\/td>\n<td align=\"center\" style=\"background: #45A0d2; color: #fff;\">e7<\/td>\n<\/tr>\n<\/table>\n<p><\/center><\/p>\n<p>\nThis table represents the output of the concatenations of 8 five bits values. We may repeat this for every 8 characters in the string and we&#8217;ll be done &#8230; \ud83d\ude42 The following 2 images show the same string rendered with 8&#215;8 and 5&#215;7 fonts (clic them for a x2 zoom).<\/p>\n<p><center><br \/>\n<a class=\"imagelink\" href=\"http:\/\/blog.blockos.org\/wp-content\/uploads\/2007\/02\/hello_world8x8_2.png\" title=\"8x8 font example\"><img decoding=\"async\" id=\"image57\" src=\"http:\/\/blog.blockos.org\/wp-content\/uploads\/2007\/02\/hello_world8x8.png\" alt=\"8x8 font example\" \/><\/a><\/p>\n<p><a class=\"imagelink\" href=\"http:\/\/blog.blockos.org\/wp-content\/uploads\/2007\/02\/hello_world5x7_2.png\" title=\"5x7 font example\"><img decoding=\"async\" id=\"image58\" src=\"http:\/\/blog.blockos.org\/wp-content\/uploads\/2007\/02\/hello_world5x7.png\" alt=\"5x7 font example\" \/><\/a><br \/>\n<\/center><\/p>\n<p>Here&#8217;s a marvelous <a href=\"http:\/\/blockos.untergrund.net\/data\/pce\/font.pce\">rom<\/a> demonstrating this breakthrough in computer science \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I made some mockups for the tracker interface using tile studio. It helped me realize that the standard 8&#215;8 font might be too big. Here&#8217;re test images for the instrument and waveform editors. As you can see, the 8&#215;8 font used in the instrument editor menu is too big. The\u2026 <a class=\"continue-reading-link\" href=\"https:\/\/blog.blockos.org\/?p=18\">Continue reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,6],"tags":[27,30],"_links":{"self":[{"href":"https:\/\/blog.blockos.org\/index.php?rest_route=\/wp\/v2\/posts\/18"}],"collection":[{"href":"https:\/\/blog.blockos.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.blockos.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.blockos.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.blockos.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=18"}],"version-history":[{"count":2,"href":"https:\/\/blog.blockos.org\/index.php?rest_route=\/wp\/v2\/posts\/18\/revisions"}],"predecessor-version":[{"id":140,"href":"https:\/\/blog.blockos.org\/index.php?rest_route=\/wp\/v2\/posts\/18\/revisions\/140"}],"wp:attachment":[{"href":"https:\/\/blog.blockos.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=18"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.blockos.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=18"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.blockos.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}