25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.

mahjong-recreation-start.html 9.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. <!DOCTYPE html>
  2. <html>
  3. <meta charset="utf-8">
  4. <head>
  5. <style>
  6. #header
  7. {
  8. background: #2BA6E3;
  9. padding: 0.7em;
  10. text-align: left;
  11. }
  12. #header a
  13. {
  14. color: white;
  15. text-decoration: none;
  16. padding: 0.5em 1em 0.5em 1em;
  17. }
  18. .news_item
  19. {
  20. background: #FFFFFF;
  21. width: 720px;
  22. padding: 1em;
  23. margin-top: 2em;
  24. margin-bottom: 2em;
  25. border: 1px solid #E0E0E0;
  26. text-align: left;
  27. }
  28. .news_item_contents
  29. {
  30. color: #444;
  31. line-height: 1.5em;
  32. }
  33. .news_item_date
  34. {
  35. margin-bottom: 2em;
  36. color: #aaa;
  37. }
  38. body
  39. {
  40. background: #FAFAFA;
  41. }
  42. code, pre
  43. {
  44. font-family: monospace, serif;
  45. font-size: 1em;
  46. color: #7f0a0c;
  47. }
  48. figure
  49. {
  50. margin: 0px;
  51. padding: 0px;
  52. }
  53. img
  54. {
  55. width: 720px;
  56. }
  57. html
  58. {
  59. font-family: sans-serif;
  60. }
  61. a
  62. {
  63. color: #3A91CB;
  64. text-decoration: none;
  65. }
  66. #lang
  67. {
  68. float: right;
  69. }
  70. figcaption
  71. {
  72. color: #aaa;
  73. }
  74. table
  75. {
  76. border-collapse: collapse;
  77. }
  78. table, th, td
  79. {
  80. border: 1px solid #aaa;
  81. padding: 0.5em;
  82. margin-top: 0.5em;
  83. margin-bottom: 0.5em;
  84. }
  85. </style>
  86. </head>
  87. <body>
  88. <center>
  89. <div id="header">
  90. <a href="../../ru/news/index.html">Новости</a>
  91. <a href="../../ru/page/games.html">Игры</a>
  92. <a href="../../ru/page/about.html">О нас</a>
  93. <div id="lang">
  94. <a href="../../en/news/mahjong-recreation-start.html">EN</a>
  95. <a href="mahjong-recreation-start.html">RU</a>
  96. </div>
  97. </div>
  98. <h1>В новостях</h1>
  99. <div class="news_item">
  100. <h2 class="news_item_title">
  101. <a href="mahjong-recreation-start.html">Начало воссоздания Маджонга</a>
  102. </h2>
  103. <p class="news_item_date">
  104. 2018-01-26 00:00
  105. </p>
  106. <div class="news_item_contents">
  107. <figure>
  108. <img src="../../images/2018-01-26-mahjong-recreation-start.png" alt="Сферические фишки в раскладке Маджонг" /><figcaption>Сферические фишки в раскладке Маджонг</figcaption>
  109. </figure>
  110. <p>Эта статья описывает начало воссоздания игры Маджонг.</p>
  111. <p><strong>План</strong></p>
  112. <p>Мы начали воссоздание Маджонга с составления краткого плана реализации игровой механики с минимальной графикой:</p>
  113. <ul>
  114. <li>Загрузить раскладку</li>
  115. <li>Поместить фишки в позиции раскладки</li>
  116. <li>Различить фишки</li>
  117. <li>Реализовать выбор фишек</li>
  118. <li>Реализовать сравнение фишек</li>
  119. </ul>
  120. <p>Как и любой другой план, этот выглядел вполне адекватно на первый взгляд. Тем не менее стоит начать разработку, как появляются новые детали. Этот план не был исключением. Ниже представлена пара проблем, вскрывшихся во время разработки.</p>
  121. <p><strong>Проблема №1: предоставить бинарные ресурсы на поддерживаемых платформах</strong></p>
  122. <p>Маджонг будет доступен для десктопа, мобилок и веба. Каждая платформа имеет ограничения на доступ к внешним файлам:</p>
  123. <ul>
  124. <li>Десктоп позволяет получить доступ почти к любому файлу</li>
  125. <li>Мобилки имеют ограниченный доступ к файловой системе</li>
  126. <li>Веб не имеет файловой системы</li>
  127. </ul>
  128. <p>Мы решили сделать единый способ доступа к ресурсам путём их встраивания в исполняемый файл. Это решение привело к рождению проектов <strong>mjin-resource</strong> и <strong>mahjong-data</strong>.</p>
  129. <p>Проект <a href="https://bitbucket.org/ogstudio/mjin-resource">mjin-resource</a> служит для:</p>
  130. <ul>
  131. <li>перевода бинарных файлов в заголовочные файлы C с помощью утилиты <strong>xxd</strong></li>
  132. <li>создания проекта MJIN, состоящего из сгенерированных заголовочных файлов, который собирается в статическую библиотеку</li>
  133. <li>предоставления интерфейса C++ для работы с ресурсами</li>
  134. </ul>
  135. <p>Проект <a href="https://bitbucket.org/ogstudio-games/mahjong-data">mahjong-data</a> является примером подобного проекта MJIN, ресурсы из которого использует проект <a href="https://bitbucket.org/ogstudio-games/ogs-mahjong">mahjong</a>.</p>
  136. <p><strong>Проблема №2: загрузка изображений PNG на поддерживаемых платформах</strong></p>
  137. <p>Для загрузки PNG мы используем соответствующий плагин OpenSceneGraph. Мы собрали его без проблем для десктопа. Сборка же для веба (Emscripten) оказалась сложнее: Emscripten содержит собственную версию <strong>libpng</strong>, которую сборочный скрипт OpenSceneGraph не видит. Нам пришлось обойти несколько проверок OpenSceneGraph, чтобы успешно собрать плагин для Emscripten. Сборка плагина под мобилки ещё ждёт нас впереди. Как только мы разберёмся с плагином PNG на всех поддерживаемых платформах, мы опубликуем информацию о его сборке в новом самоучителе для <a href="https://github.com/ogstudio/openscenegraph-cross-platform-guide">кросс-платформенного руководства OpenSceneGraph</a>. Нас уже <a href="https://github.com/OGStudio/openscenegraph-cross-platform-guide/issues/4">попросили это сделать</a>.</p>
  138. <p><strong>Разработка</strong></p>
  139. <p><a href="lets-go.html">Как вы знаете</a>, мы опубликовали кросс-платформенное руководство OpenSceneGraph для усиления сообщества OpenSceneGraph. Мы ценим обучение и любим делиться своими знаниями. Поэтому мы решили разрабатывать Маджонг небольшими воспроизводимыми частями, каждая из которых имеет уникальную внутреннюю версию. Эти версии доступны в <a href="https://bitbucket.org/ogstudio-games/ogs-mahjong">хранилище проекта mahjong</a>.</p>
  140. <p>Мы также предоставляем <a href="http://ogstudio.github.io/game-mahjong">историю версий, каждая из которых сопровождается сборкой под веб</a>, для следующих целей:</p>
  141. <ul>
  142. <li>обучение: показать ход разработки изнутри</li>
  143. <li>доступность: предоставить старые версии для сравнения</li>
  144. </ul>
  145. <p><strong>Текущее состояние игры Маджонг</strong></p>
  146. <p>На момент написания этой статьи мы закончили реализацию выбора фишек. <a href="https://ogstudio.github.io/game-mahjong/versions/010/mjin-player.html">Проверьте в своём браузере!</a></p>
  147. <p>После реализации сравнения фишек мы опубликуем промежуточный результат для всех поддерживаемых платформ.</p>
  148. <p>На этом мы заканчиваем описание начала воссоздания игры Маджонг.</p>
  149. </div>
  150. </div>
  151. </center>
  152. </body>
  153. </html>