Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

lets-go.html 8.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  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. #lang
  19. {
  20. float: right;
  21. }
  22. .news_item
  23. {
  24. background: #FFFFFF;
  25. width: 720px;
  26. padding: 1em;
  27. margin-top: 2em;
  28. margin-bottom: 2em;
  29. border: 1px solid #E0E0E0;
  30. text-align: left;
  31. }
  32. .news_item_contents
  33. {
  34. color: #444;
  35. line-height: 1.5em;
  36. }
  37. .news_item_date
  38. {
  39. margin-bottom: 2em;
  40. color: #aaa;
  41. }
  42. html
  43. {
  44. font-family: sans-serif;
  45. }
  46. body
  47. {
  48. background: #FAFAFA;
  49. }
  50. code, pre
  51. {
  52. font-family: monospace, serif;
  53. font-size: 1em;
  54. color: #7f0a0c;
  55. }
  56. /*
  57. figure
  58. {
  59. margin: 0px;
  60. padding: 0px;
  61. }
  62. */
  63. img
  64. {
  65. width: 720px;
  66. }
  67. a
  68. {
  69. color: #3A91CB;
  70. text-decoration: none;
  71. }
  72. table
  73. {
  74. border-collapse: collapse;
  75. }
  76. table, th, td
  77. {
  78. border: 1px solid #aaa;
  79. padding: 0.5em;
  80. margin-top: 0.5em;
  81. margin-bottom: 0.5em;
  82. }
  83. </style>
  84. </head>
  85. <body>
  86. <div id="header">
  87. <strong id="title">Open Game Studio</strong>
  88. <a href="../../ru/news/index.html">Новости</a>
  89. <a href="../../ru/game/index.html">Игры</a>
  90. <a href="../../ru/tool/index.html">Инструменты</a>
  91. <a href="../../ru/page/about.html">О нас</a>
  92. <div id="lang">
  93. <a href="../../en/news/lets-go.html">EN</a>
  94. <a href="../../ru/news/lets-go.html">RU</a>
  95. </div>
  96. </div>
  97. <center>
  98. <h1>В новостях...</h1>
  99. <div class="news_item">
  100. <h2 class="news_item_title">
  101. <a href="lets-go.html">Поехали</a>
  102. </h2>
  103. <p class="news_item_date">
  104. 2017-03-16 00:00
  105. </p>
  106. <div class="news_item_contents">
  107. <p><img src="../../images/2017-03_lets-go.png" alt="Слова Гагарина" /></p>
  108. <p>В этой статье мы расскажем о результатах нашей работы в январе и феврале 2017: отображении куба на iOS/Веб и нашем инструменте для создания самоучителей.</p>
  109. <p><strong>Отображение куба на iOS/Web</strong></p>
  110. <p>К нашему удивлению, мы смогли отобразить простой красный куб на <a href="https://twitter.com/OpenGameStudio/status/826816343433498627">iOS</a> и <a href="https://twitter.com/OpenGameStudio/status/829731986264698881">Веб</a> довольно быстро: в начале февраля. Тем не менее, это лишь начало поддержки платформ Android, iOS и Веб. Впереди нас ждёт тернистая дорога, т.к. нам предстоит сделать ещё много вещей, прежде чем мы сможем объявить о полноценной поддержке этих платформ: визуальные эффекты, скрипты Python, архивы данных.</p>
  111. <p>Т.к. нам потребовалось четыре месяца для начала поддержки платформ Android, iOS и Веб, мы решили поделиться своими знаниями и помочь сообществу OpenSceneGraph. Мы напишем руководство по использованию OpenSceneGraph на ПК, мобилках и Вебе. Мы верим: чем более распространён OpenSceneGraph, тем сильнее наши собственные технологии. Как сказал Исаак Ньютон: "Если я видел дальше других, то потому, что стоял на плечах гигантов". OpenSceneGraph - наш гигант.</p>
  112. <p><strong>Инструмент для создания самоучителей</strong></p>
  113. <p>Имея за плечами опыт проведения четырёх прямых эфиров, нам стало ясно, что руководство по использованию OpenSceneGraph будет полезно лишь при наличии видео. Но голое видео способно отразить лишь то, что мы делаем, но не то, почему мы делаем именно это и именно так. Поэтому мы решили совместить видео с текстом в форме как субтитров к видео, так и отдельных статей.</p>
  114. <p>Первую попытку совмещения видео с текстом мы начали с помощью <a href="http://openshotvideo.com">OpenShot</a>. Инструмент хороший, но с первого же дня использования стали очевидны следующие ограничения:</p>
  115. <ul>
  116. <li>Настройка моментов отображения текста и анимаций занимает много времени</li>
  117. <li>Файл проекта и исходные ресурсы сложно положить в систему контроля версий</li>
  118. </ul>
  119. <p>Т.к. руководство по использованию OpenSceneGraph будет состоять из нескольких самоучителей, мы решили автоматизировать процесс. Быстрый поиск рассказал нам о существовании замечательного мультимедийного фреймворка <a href="http://mltframework.org">MLT</a>, который используется и в OpenShot. С помощью MLT мы быстро сделали свой инструмент для создания самоучителей.</p>
  120. <p>На текущий момент наш инструмент позволяет совместить видео и текст с помощью простого текстового файла:</p>
  121. <pre><code>background bg.png
  122. text 5 Let's install Blender
  123. video 0:6 install_blender.mp4
  124. text 5 Installing it with apt
  125. video 6:26 install_blender.mp4
  126. text 5 We're still installing it
  127. video 26:56 install_blender.mp4
  128. text 5 Congratulations! We just finished installing Blender
  129. </code></pre>
  130. <p>Это реальный скрипт. Конечный результат можно увидеть <a href="https://github.com/ogstudio/tutorial-tool">здесь</a>.</p>
  131. <p>На этом мы заканчиваем рассказ о результатах нашей работы в январе и феврале 2017: отображении куба на iOS/Веб и нашем инструменте для создания самоучителей.</p>
  132. </div>
  133. </div>
  134. <div id="footer">
  135. Сайт сгенерирован <a href="http://opengamestudio.org/pskov/ru">ПСКОВОМ</a>
  136. из <a href="http://github.com/ogstudio/site-opengamestudio">этого исходного кода</a>.
  137. Сайт размещён на <a href="https://pages.github.com">GitHub Pages</a>.
  138. </div>
  139. </center>
  140. </body>
  141. </html>