選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

534 行
28KB

  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8" />
  4. <!-- Set the viewport width to device width for mobile -->
  5. <meta name="viewport" content="width=device-width" />
  6. <title>Opensource Game Studio</title>
  7. <link rel="stylesheet" href="http://opengamestudio.org/theme/css/normalize.css" />
  8. <link rel="stylesheet" href="http://opengamestudio.org/theme/css/foundation.min.css" />
  9. <link rel="stylesheet" href="http://opengamestudio.org/theme/css/style.css" />
  10. <link rel="stylesheet" href="http://opengamestudio.org/theme/css/pygments.css" />
  11. <script src="http://opengamestudio.org/theme/js/custom.modernizr.js"></script>
  12. <!-- So Firefox can bookmark->"abo this site" -->
  13. <link href="feeds/all.atom.xml" rel="alternate" title="Opensource Game Studio" type="application/atom+xml">
  14. </head>
  15. <body>
  16. <!-- Nav Bar -->
  17. <nav>
  18. <!-- Show menu items and pages -->
  19. <div class="row">
  20. <div class="large-12 columns top-bar">
  21. <h1><a href="http://opengamestudio.org">Opensource Game Studio</a></h1>
  22. </div>
  23. </div>
  24. <div class="row top-menu">
  25. <div class="large-12 columns">
  26. <a href="/pages/games.html" class="menu-button secondary">Games</a>
  27. <a href="/pages/education.html" class="menu-button secondary">Education</a>
  28. <a href="/pages/about.html" class="menu-button secondary">About</a>
  29. </div>
  30. </div>
  31. </nav>
  32. <!-- End Nav -->
  33. <!-- Main Page Content and Sidebar -->
  34. <div class="row">
  35. <!-- Main Blog Content -->
  36. <div class="large-9 columns">
  37. <article>
  38. <a href="http://opengamestudio.org/teaching-kids-to-program.html"><h3 class="article-title">Teaching kids to program</h3></a>
  39. <h6 class="subheader" title="2019-02-04T00:00:00+03:00">Пн 04 февраля 2019
  40. <a class="button secondary small translation-button" href="http://opengamestudio.org/teaching-kids-to-program-ru.html">ru</a>
  41. </h6><p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-team.png"></p>
  42. <p>In this article, Michael shares his experience of teaching kids to program.</p>
  43. <p>Here's what he covers:</p>
  44. <ul>
  45. <li>organization of the learning process</li>
  46. <li>learning plan</li>
  47. <li>memory game</li>
  48. <li>development tools</li>
  49. <li>lessons</li>
  50. <li>results and plans</li>
  51. </ul>
  52. <p><strong>Organization of the learning process</strong></p>
  53. <p>The learning process is conducted as part of corporate social responsibility: a company provides a room with equipment and connects employees that want to try themselves in the role of teachers with employees that want their kids educated. All this is done voluntarily.</p>
  54. <p>Potential teachers are divided into groups so that each group contains three teachers: experienced one and two novice ones. Such a group of three teachers leads a group of students. Students are divided into groups by age and skills.</p>
  55. <p>I participated in the program as a teacher for the second time in 2018. The kids were around ten years old. Our group was active from October to December of 2018 each Saturday, 10:00-12:00. Using my position as a teacher, I've also brought my wife in as a student.</p>
  56. <p><strong>Learning plan</strong></p>
  57. <p>The first time I participated in the program, our group taught kids rather mindlessly: we were coming up with simple tasks to explain different operators. By the end of the course we had nothing concrete to evaluate, analyze, and share.</p>
  58. <p>This second time I decided we are going to create a memory game with kids. I decided to consider the course successful if by the end of the course each kid would be able to create a simple memory game from scratch in an hour.</p>
  59. <p>To achieve that, we were recreating the same game from scratch each lesson. I'd like to stress that we did not use personal accounts to save progress. Our task was to save the skill of game creation in the head, not a PC.</p>
  60. <p><strong>Memory game</strong></p>
  61. <p>Let's see what the memory game is.</p>
  62. <p><strong>1)</strong> In the simplest case we have 16 cards, only 8 of them are unique, the rest 8 are duplicates of the unique ones.</p>
  63. <p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-all-cards-face-up.png"></p>
  64. <p>As you can see, we only have two cards with a cat, only two cards with a dog, etc..</p>
  65. <p><strong>2)</strong> At the start we shuffle the cards and place them with their faces down.</p>
  66. <p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-all-cards-face-down.png"></p>
  67. <p><strong>3)</strong> The first game player turns a pair of cards.</p>
  68. <p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-first-pair.png"></p>
  69. <p><strong>4)</strong> If the cards differ they are once again turned face down.</p>
  70. <p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-all-cards-face-down.png"></p>
  71. <p><strong>5)</strong> The next player turns another pair of cards.</p>
  72. <p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-second-pair.png"></p>
  73. <p><strong>6)</strong> If the cards are the same, they are removed from the field.</p>
  74. <p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-remove-pair.png"></p>
  75. <p>The goal of the game is to remove all cards from the field. There's no competition here so the game can be played alone.</p>
  76. <p>From one hand, the memory game is rather simple. From the other hand, the game implementation requires essential functionality each more or less complex game has:</p>
  77. <ul>
  78. <li>creation of items</li>
  79. <li>arrangement of items</li>
  80. <li>selection of items</li>
  81. <li>comparison of items</li>
  82. <li>removal of matching items</li>
  83. </ul>
  84. <p><strong>Development tools</strong></p>
  85. <p>We used Scratch as our development tool. <a href="https://scratch.mit.edu/">Scratch</a> is a great tool to teach kids to program because each action, each operation is represented graphically.</p>
  86. <p>For example, you can rotate a cat 360 degrees in 1 second using the following script:</p>
  87. <p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-cat-script.png"></p>
  88. <p>Here's how it looks like in action:</p>
  89. <p><img alt="Animation" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-cat-animation.gif"></p>
  90. <p>I'd like to stress that Scratch is a rather successful solution to represent code graphically. For example, a paid solution by SAP uses similar concept of cubes to program logic:</p>
  91. <p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-sap-ui.png"></p>
  92. <p>Users can only input values into predefined fields. If users want more functionality they have to resort to scripts.</p>
  93. <p>Personally, I have never witnessed any slowdown in Scratch, and there were many in SAP's solution.</p>
  94. <p><strong>The first lesson</strong></p>
  95. <p>The first lesson was introductory, we didn't use PCs.</p>
  96. <p>The plan was to:</p>
  97. <ol>
  98. <li>Meet</li>
  99. <li>Play the memory game with cards</li>
  100. <li>Learn the concept of algorithm</li>
  101. <li>Detail the game's algorithm</li>
  102. <li>Analyze the lesson</li>
  103. </ol>
  104. <p><strong>1)</strong> Meeting</p>
  105. <p>Both teachers and students stand in a circle. This equalizes everyone and makes everyone a team member.</p>
  106. <p>The first team member tells his name and why he decided to take the course. The second team member and the rest first repeat the name and the story of each previous team member before telling their own names and stories.</p>
  107. <p>Here's how it looks like:</p>
  108. <ol>
  109. <li>John: "My name is John, I am going to study Scratch because my father forces me to"</li>
  110. <li>Alex: "This is John, he's doing Scratch because his father wants him to do it. My name is Alex, and this is my fourth year with Scratch"</li>
  111. <li>Ann: "That's John, his parents force him to do Scratch. This is Alex, he's a Scratch veteran. And I'm Ann, a novice teacher, so I'm going to learn together with you all"</li>
  112. </ol>
  113. <p>Such a format of meeting has the following objectives:</p>
  114. <ul>
  115. <li>Getting to know each other<ul>
  116. <li>Each team member should know other team members by name</li>
  117. </ul>
  118. </li>
  119. <li>Common space<ul>
  120. <li>Everyone is in the circle, not at a working desk, this prevents distraction of kids by PC games</li>
  121. </ul>
  122. </li>
  123. <li>Equality<ul>
  124. <li>Both teachers and students are in the same circle, this equalizes everyone as a team member without hierarchy</li>
  125. </ul>
  126. </li>
  127. <li>Attention<ul>
  128. <li>Each team member should listen carefully to be able to correctly repeat what others said</li>
  129. </ul>
  130. </li>
  131. <li>Feedback<ul>
  132. <li>Each team member should be as clear as possible when expressing thoughts, otherwise nobody would be able to repeat them</li>
  133. </ul>
  134. </li>
  135. <li>Fun<ul>
  136. <li>Memorization problems produce lots of laughter</li>
  137. </ul>
  138. </li>
  139. </ul>
  140. <p><strong>2)</strong> Memory game with cards</p>
  141. <ol>
  142. <li>Take 8 pairs of the same cards from two decks of cards</li>
  143. <li>Place the cards in 4 x 4 grid, faces down</li>
  144. <li>Students stand up around single table</li>
  145. <li>Each student, one by one, turns a pair of cards<ul>
  146. <li>If cards match, they are taken off the field</li>
  147. <li>If cards differ, they are once again turned face down</li>
  148. </ul>
  149. </li>
  150. </ol>
  151. <p>Students are eager to play tabletop games. During the game party teachers say out loud each step in the game's algorithm.</p>
  152. <p>After a couple of parties it's time to find out what algorithm is.</p>
  153. <p><strong>3)</strong> The concept of algorithm</p>
  154. <ol>
  155. <li>Ask students first, hear them out to find out their level</li>
  156. <li>Correct what students say if they were close to an expected answer</li>
  157. <li>Ask students to write an algorithm to move a man from "stands outside a room" state into "sits and works at a PC" one</li>
  158. </ol>
  159. <p>Students like to go to blackboard and write, so we ask each student to come and write a single step of the algorithm at a time. The most active student should execute the algorithm by following it strictly.</p>
  160. <p><strong>4)</strong> The algorithm of the game</p>
  161. <p>Ask students to compose the game's algorithm. Again, let students come to the blackboard and add one step of the algorithm at a time. Once the algorithm is ready, play the game with cards once again. Now, each student should say the algorithm's step he executes.</p>
  162. <p>Here's how it looks like:</p>
  163. <ol>
  164. <li>John: "Place 16 cards faces down"</li>
  165. <li>Alex: "Turn a pair of cards"</li>
  166. <li>Paul: "If the cards differ, turn them faces down again"</li>
  167. <li>Dan: "Turn another pair of cards"</li>
  168. <li>Mike: "If the cards match, take them off the field"</li>
  169. </ol>
  170. <p><strong>5)</strong> Analyze the lesson</p>
  171. <p>That's it for the first lesson. Teachers finally have time to discuss the lesson: discuss the kids, approaches to shy and active kids, plan next lessons.</p>
  172. <p>We had the following decisions:</p>
  173. <ol>
  174. <li>Arrange students so that active ones sit next to shy ones as "active-shy-active-shy-etc" so that we don't end up with two groups of shy and active students at different sides of a room, which would hamper productivity.</li>
  175. <li>Only accept accurate answers from students because active students like to wriggle, which hampers discipline.</li>
  176. </ol>
  177. <p><strong>The second and the third lessons</strong></p>
  178. <p>We were beginning each lesson with the same meeting: we would stand up in a circle, tell our names and what we did. Those who did nothing should have said why. Just as before, everyone should first repeat what previous team members said.</p>
  179. <p>We spent the second lesson to create requirements for an item of the playfield and then create the item in Scratch. This was moderately successful.</p>
  180. <p>We spent the third lesson trying to create 16 items and arrange them in 4x4 grid. We failed miserably because we could not explain coordinate system to students. It became apparent that lesson plans were only plans, reality had its own demands.</p>
  181. <p>We saw two ways to approach the problem:</p>
  182. <ol>
  183. <li>Keep on studying the coordinate system risking not to get the game done by the end of the course</li>
  184. <li>Change the game requirements so that coordinate system is not necessary</li>
  185. </ol>
  186. <p>We went the second way because, after all, we're not a school, our goal was to teach kids to create the game, i.e., use skills in practice, not theory. That's why we replaced 4x4 grid with a circle of 16 items.</p>
  187. <p>This solution sparkled a few thoughts in my head:</p>
  188. <ol>
  189. <li>One can often find a simpler path to solve an issue</li>
  190. <li>This path is simpler to understand, albeit less flexible</li>
  191. <li>One can go the harder path to increase flexibility much later when it becomes absolutely necessary</li>
  192. <li>Simplification moves one closer to the goal, complexification moves one in the opposite direction</li>
  193. </ol>
  194. <p><strong>The fourth and the rest of the lessons</strong></p>
  195. <p>The fourth lesson marked the end of coming up with requirements in class because doing so started to take too much time. We chose practice over theory once again to meet the deadline. This time all requirements were conducted before the lesson. Still, nobody read them.</p>
  196. <p>We spent the fourth and the fifth lessons to create 16 items in circle, select a pair of items and match them.</p>
  197. <p>We started recreating complete game from scratch on the sixth lesson. Each time students were recreating complete game faster and faster. On the eighth lesson we introduced a leaderboard to track how fast each student recreates a specific part of the game.</p>
  198. <p><strong>The last lesson</strong></p>
  199. <p>When the last lesson approached everyone was able to create the memory game from scratch more or less independently in two hours.</p>
  200. <p>Here's the leaderboard of the last lesson (names are hidden):</p>
  201. <p><img alt="Screenshot" src="http://opengamestudio.org/2019-02-04_teaching-kids-to-program-leaderboard.png"></p>
  202. <p>The leaderboard is in Russian, here are the captions translated:</p>
  203. <ul>
  204. <li>Name</li>
  205. <li>Circle of items</li>
  206. <li>Selection of pairs</li>
  207. <li>Hide all</li>
  208. <li>Hide a pair</li>
  209. </ul>
  210. <p>Here you can witness the creation of the memory game from scratch by the fastest student: in just half an hour.</p>
  211. <iframe width="560" height="315" src="https://www.youtube.com/embed/WlA193S3SPY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  212. <p><br/></p>
  213. <p><strong>Results and plans</strong></p>
  214. <p>The results surpassed my expectations:</p>
  215. <ul>
  216. <li>three students made it in an hour or faster</li>
  217. <li>two students made it in an hour and a half or faster</li>
  218. </ul>
  219. <p>This year I plan on doing another round of the memory game recreation. However, I'm going to replace Scratch with Opensource Game Studio tools: the students will use Lua, Git, and GitHub Pages.</p>
  220. <p>That's it for sharing Michael's experience of teaching kids to program.</p><p class="subheader">Category: <a href="http://opengamestudio.org/category/news.html">News</a>
  221. </p>
  222. </article>
  223. <hr class="gradient"/>
  224. <article>
  225. <a href="http://opengamestudio.org/2019-year-of-rethinking.html"><h3 class="article-title">Year of rethinking</h3></a>
  226. <h6 class="subheader" title="2019-01-01T00:01:00+03:00">Вт 01 января 2019
  227. <a class="button secondary small translation-button" href="http://opengamestudio.org/2019-year-of-rethinking-ru.html">ru</a>
  228. </h6><p><img alt="Screenshot" src="http://opengamestudio.org/2017-12-31-celebration.jpg"></p>
  229. <p>It was a year of reimagining and rethinking. As some of you may remember, we started this project to make a game development tool. During the years, the idea evolved from one form to another, sometimes the changes were significant, other times we threw away all the code and started …</p><p class="subheader">Category: <a href="http://opengamestudio.org/category/news.html">News</a>
  230. </p>
  231. <a class="button radius secondary small right" href="http://opengamestudio.org/2019-year-of-rethinking.html">Read More</a>
  232. <hr class="gradient"/>
  233. </article>
  234. <article>
  235. <a href="http://opengamestudio.org/ideal-gamedev.html"><h3 class="article-title">Ideal games and game development tools</h3></a>
  236. <h6 class="subheader" title="2018-11-19T00:00:00+03:00">Пн 19 ноября 2018
  237. <a class="button secondary small translation-button" href="http://opengamestudio.org/ideal-gamedev-ru.html">ru</a>
  238. </h6><p><img alt="Screenshot" src="http://opengamestudio.org/2018-11-19-ideal-gamedev.png"></p>
  239. <p>In this article, we discuss how ideal video game and video game development
  240. tool look like, in our opinion.</p>
  241. <p><strong>Questions</strong></p>
  242. <p>As you know, the <a href="http://opengamestudio.org/pages/about.html">goals of Opensource Game Studio</a> are:</p>
  243. <ul>
  244. <li>creation of free video game development tools</li>
  245. <li>making video games with those tools</li>
  246. <li>preparing video game development tutorials</li>
  247. </ul>
  248. <p>This time …</p><p class="subheader">Category: <a href="http://opengamestudio.org/category/news.html">News</a>
  249. </p>
  250. <a class="button radius secondary small right" href="http://opengamestudio.org/ideal-gamedev.html">Read More</a>
  251. <hr class="gradient"/>
  252. </article>
  253. <article>
  254. <a href="http://opengamestudio.org/mahjong-demo2.html"><h3 class="article-title">OGS Mahjong 2: Demo 2</h3></a>
  255. <h6 class="subheader" title="2018-10-02T00:00:00+03:00">Вт 02 октября 2018
  256. <a class="button secondary small translation-button" href="http://opengamestudio.org/mahjong-demo2-ru.html">ru</a>
  257. </h6><p><img alt="Screenshot" src="http://opengamestudio.org/2018-10-02-mahjong-demo2.png"></p>
  258. <p>We are glad to announce the release of the second demonstration of OGS Mahjong 2.
  259. The purposes of this release were to refine our development techniques and
  260. build a solid cross-platform foundation.</p>
  261. <p><strong>Release</strong></p>
  262. <p>Run the latest version of OGS Mahjong 2 in your web browser:
  263. <a href="http://ogstudio.github.io/ogs-mahjong">http://ogstudio.github.io/ogs-mahjong …</a></p><p class="subheader">Category: <a href="http://opengamestudio.org/category/news.html">News</a>
  264. </p>
  265. <a class="button radius secondary small right" href="http://opengamestudio.org/mahjong-demo2.html">Read More</a>
  266. <hr class="gradient"/>
  267. </article>
  268. <article>
  269. <a href="http://opengamestudio.org/examples-and-dependencies.html"><h3 class="article-title">Examples and dependencies</h3></a>
  270. <h6 class="subheader" title="2018-08-21T00:00:00+03:00">Вт 21 августа 2018
  271. <a class="button secondary small translation-button" href="http://opengamestudio.org/examples-and-dependencies-ru.html">ru</a>
  272. </h6><p><img alt="Screenshot" src="http://opengamestudio.org/2018-08-21-examples-and-dependencies.png"></p>
  273. <p>This article describes two new OpenSceneGraph cross-platform examples and the
  274. change in handling dependencies.</p>
  275. <p><strong>Examples of HTTP client and node selection</strong></p>
  276. <p>Once we finished working on <a href="https://github.com/OGStudio/openscenegraph-cross-platform-examples/tree/master/04.RemoteDebugging">the remote debugging example</a> and
  277. <a href="http://opengamestudio.org/example-driven-development.html">reported its completion</a>, we were surprised by the fact
  278. that secure HTTP connection between a debugged application and debug …</p><p class="subheader">Category: <a href="http://opengamestudio.org/category/news.html">News</a>
  279. </p>
  280. <a class="button radius secondary small right" href="http://opengamestudio.org/examples-and-dependencies.html">Read More</a>
  281. <hr class="gradient"/>
  282. </article>
  283. <article>
  284. <a href="http://opengamestudio.org/example-driven-development.html"><h3 class="article-title">Example-driven development</h3></a>
  285. <h6 class="subheader" title="2018-06-27T00:00:00+03:00">Ср 27 июня 2018
  286. <a class="button secondary small translation-button" href="http://opengamestudio.org/example-driven-development-ru.html">ru</a>
  287. </h6><p><img alt="Screenshot" src="http://opengamestudio.org/2018-06-27-example-driven-development.png"></p>
  288. <p>This article explains how the third OpenSceneGraph cross-platform example
  289. opened our eyes to example-driven development.</p>
  290. <p><strong>2018-08 EDIT</strong>: the third example has been renamed to the fourth one due to
  291. the reasons described in the <a href="http://opengamestudio.org/examples-and-dependencies.html">next article</a>.</p>
  292. <p><strong>The third OpenSceneGraph cross-platform example</strong></p>
  293. <p>The third OpenSceneGraph cross-platform example explains how to implement …</p><p class="subheader">Category: <a href="http://opengamestudio.org/category/news.html">News</a>
  294. </p>
  295. <a class="button radius secondary small right" href="http://opengamestudio.org/example-driven-development.html">Read More</a>
  296. <hr class="gradient"/>
  297. </article>
  298. <article>
  299. <a href="http://opengamestudio.org/openscenegraph-examples.html"><h3 class="article-title">OpenSceneGraph cross-platform examples</h3></a>
  300. <h6 class="subheader" title="2018-04-20T00:00:00+03:00">Пт 20 апреля 2018
  301. <a class="button secondary small translation-button" href="http://opengamestudio.org/openscenegraph-examples-ru.html">ru</a>
  302. </h6><p><img alt="Screenshot" src="http://opengamestudio.org/2018-04-20-openscenegraph-examples.png"></p>
  303. <p>This article summarizes the work we did to produce the first two
  304. cross-platform OpenSceneGraph examples.</p>
  305. <p>By the time <a href="http://opengamestudio.org/mahjong-techdemo1-gameplay.html">the first technology demonstration of OGS Mahjong 2</a>
  306. has been released, we've already had <a href="https://github.com/OGStudio/openscenegraph-cross-platform-guide/issues/4">issue request</a>
  307. (to explain how to load images with OpenSceneGraph on Android) hanging for some
  308. time. We considered …</p><p class="subheader">Category: <a href="http://opengamestudio.org/category/news.html">News</a>
  309. </p>
  310. <a class="button radius secondary small right" href="http://opengamestudio.org/openscenegraph-examples.html">Read More</a>
  311. <hr class="gradient"/>
  312. </article>
  313. <article>
  314. <a href="http://opengamestudio.org/mahjong-techdemo1-gameplay.html"><h3 class="article-title">First techdemo of OGS Mahjong 2: Gameplay</h3></a>
  315. <h6 class="subheader" title="2018-02-16T00:00:00+03:00">Пт 16 февраля 2018
  316. <a class="button secondary small translation-button" href="http://opengamestudio.org/mahjong-techdemo1-gameplay-ru.html">ru</a>
  317. </h6><p><img alt="Screenshot" src="http://opengamestudio.org/2018-02-16-mahjong-techdemo1-gameplay.png"></p>
  318. <p>We are glad to announce the release of the first technical demonstration of
  319. OGS Mahjong 2. The purpose of this release was to verify gameplay across
  320. supported platforms.</p>
  321. <p>Get techdemo for your platform:</p>
  322. <ul>
  323. <li>Run <a href="https://ogstudio.github.io/game-mahjong/versions/013/mjin-player.html">Web version</a> in your browser</li>
  324. <li>Get <a href="https://drive.google.com/open?id=1KW8IEN8Dpz8ODeg8BctVSJyzj9-AL9hR">Android version</a></li>
  325. <li>Get <a href="https://drive.google.com/open?id=1oj0-OXSmEatttzn86u2vgP9SRAIC0ozB">Windows version</a></li>
  326. <li>Get <a href="https://drive.google.com/open?id=1EX7kLIThLiMz9_W7VmBPySms3mlrF-i6">Linux version</a></li>
  327. <li>Get <a href="https://drive.google.com/open?id=1KWnvbHzan8MpMcZPG2QC-7KWoEYbqrM2">macOS …</a></li></ul><p class="subheader">Category: <a href="http://opengamestudio.org/category/news.html">News</a>
  328. </p>
  329. <a class="button radius secondary small right" href="http://opengamestudio.org/mahjong-techdemo1-gameplay.html">Read More</a>
  330. <hr class="gradient"/>
  331. </article>
  332. <article>
  333. <a href="http://opengamestudio.org/mahjong-recreation-start.html"><h3 class="article-title">Mahjong recreation start</h3></a>
  334. <h6 class="subheader" title="2018-01-26T00:00:00+03:00">Пт 26 января 2018
  335. <a class="button secondary small translation-button" href="http://opengamestudio.org/mahjong-recreation-start-ru.html">ru</a>
  336. </h6><p><img alt="Screenshot" src="http://opengamestudio.org/2018-01-26-mahjong-recreation-start.png"></p>
  337. <p>This article describes the start of Mahjong game recreation.</p>
  338. <p><strong>Plan</strong></p>
  339. <p>We started Mahjong recreation endeavour by composing a brief plan to get gameplay with minimal graphics:</p>
  340. <ul>
  341. <li>Load single layout</li>
  342. <li>Place tiles in layout positions</li>
  343. <li>Distinguish tiles</li>
  344. <li>Implement selection</li>
  345. <li>Implement matching</li>
  346. </ul>
  347. <p>Just like any other plan, this one looked fine at …</p><p class="subheader">Category: <a href="http://opengamestudio.org/category/news.html">News</a>
  348. </p>
  349. <a class="button radius secondary small right" href="http://opengamestudio.org/mahjong-recreation-start.html">Read More</a>
  350. <hr class="gradient"/>
  351. </article>
  352. <article>
  353. <a href="http://opengamestudio.org/the-year-of-lessons.html"><h3 class="article-title">The year of lessons</h3></a>
  354. <h6 class="subheader" title="2017-12-31T22:00:00+03:00">Вс 31 декабря 2017
  355. <a class="button secondary small translation-button" href="http://opengamestudio.org/the-year-of-lessons-ru.html">ru</a>
  356. </h6><p><img alt="Screenshot" src="http://opengamestudio.org/2017-12-31-celebration.jpg"></p>
  357. <p>So, the year 2017 is approaching its finale, the year's results have already
  358. been summed up. We're going to take a break from igniting the fireworks or
  359. preparation of the champagne so that we can designate our goal for the
  360. following year.</p>
  361. <p>As it may be clear from other articles …</p><p class="subheader">Category: <a href="http://opengamestudio.org/category/news.html">News</a>
  362. </p>
  363. <a class="button radius secondary small right" href="http://opengamestudio.org/the-year-of-lessons.html">Read More</a>
  364. <hr class="gradient"/>
  365. </article>
  366. <!-- /#posts-list -->
  367. <div class="pagination-centered">
  368. <h6 class="subheader">Page 1 of 6</h6>
  369. <p>
  370. <a href="http://opengamestudio.org/index2.html">Next &raquo;</a>
  371. </p>
  372. </div>
  373. </div>
  374. <!-- End Main Content -->
  375. <!-- Sidebar -->
  376. <aside class="large-3 columns">
  377. <!--k
  378. <h5 class="sidebar-title">Site</h5>
  379. <ul class="side-nav">
  380. <li><a href="http://opengamestudio.org/archives.html">Archives</a>
  381. <li><a href="http://opengamestudio.org/tags.html">Tags</a>
  382. <li><a href="http://opengamestudio.org/feeds/all.atom.xml" rel="alternate">Atom feed</a></li>
  383. </ul>
  384. <h5 class="sidebar-title">Categories</h5>
  385. <ul class="side-nav">
  386. <li><a href="http://opengamestudio.org/category/news.html">News</a></li>
  387. </ul>
  388. -->
  389. <h5 class="sidebar-title">Ads</h5>
  390. <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  391. <!-- ogs2 -->
  392. <ins class="adsbygoogle"
  393. style="display:block"
  394. data-ad-client="ca-pub-4473792248813084"
  395. data-ad-slot="9024247127"
  396. data-ad-format="auto"></ins>
  397. <script>
  398. (adsbygoogle = window.adsbygoogle || []).push({});
  399. </script>
  400. </aside> <!-- End Sidebar -->
  401. </div> <!-- End Main Content and Sidebar -->
  402. <!-- Footer -->
  403. <footer class="row">
  404. <div class="large-12 columns">
  405. <hr />
  406. <div class="row">
  407. <div class="large-7 columns">
  408. <p>Proudly powered by <a href="http://getpelican.com">Pelican</a>, which takes great advantage of <a href="http://python.org">Python</a>.</p>
  409. </div>
  410. </div>
  411. </div>
  412. <script type="text/javascript">
  413. var _gaq = _gaq || [];
  414. _gaq.push(['_setAccount', 'UA-3773114-1']);
  415. _gaq.push(['_trackPageview']);
  416. (function() {
  417. var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  418. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  419. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  420. })();
  421. </script>
  422. </footer>