-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmahjong-recreation-start.html
148 lines (146 loc) · 6.52 KB
/
mahjong-recreation-start.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style>
body
{
background: #FAFAFA;
}
code, pre
{
font-family: monospace, serif;
font-size: 1em;
color: #7f0a0c;
}
figure
{
margin: 0px;
padding: 0px;
}
img
{
width: 720px;
}
html
{
font-family: sans-serif;
}
#header
{
background: #2BA6E3;
padding: 0.7em;
text-align: left;
}
#header a
{
color: white;
text-decoration: none;
padding: 0.5em 1em 0.5em 1em;
}
a
{
color: #3A91CB;
text-decoration: none;
}
.news_item
{
background: #FFFFFF;
width: 720px;
padding: 1em;
margin-top: 2em;
margin-bottom: 2em;
border: 1px solid #E0E0E0;
text-align: left;
}
.news_item_contents
{
color: #444;
line-height: 1.5em;
}
.news_item_date
{
margin-bottom: 50px;
color: #aaa;
}
#lang
{
float: right;
}
</style>
</head>
<body>
<center>
<div id="header">
<a href="index.html">News</a>
<a href="games.html">Games</a>
<a href="tools.html">Tools</a>
<a href="about.html">About</a>
<div id="lang">
<a href="mahjong-recreation-start.html">EN</a>
<a href="mahjong-recreation-start-ru.html">RU</a>
</div>
</div>
<h1>In the news</h1>
<div class="news_item">
<h2 class="news_item_title">
<a href="
2018-01-26-mahjong-recreation-start.html
">
Mahjong recreation start
</a>
</h2>
<p class="news_item_date">
2018-01-26 00:00
</p>
<div class="news_item_contents">
<figure>
<img src="images/2018-01-26-mahjong-recreation-start.png" alt="Screenshot" /><figcaption>Screenshot</figcaption>
</figure>
<p>This article describes the start of Mahjong game recreation.</p>
<p><strong>Plan</strong></p>
<p>We started Mahjong recreation endeavour by composing a brief plan to get gameplay with minimal graphics:</p>
<ul>
<li>Load single layout</li>
<li>Place tiles in layout positions</li>
<li>Distinguish tiles</li>
<li>Implement selection</li>
<li>Implement matching</li>
</ul>
<p>Just like any other plan, this one looked fine at first sight. However, once you get down to work, new details start to come out. This plan was no exception. Below are a few problems that came out during development.</p>
<p><strong>Problem №1: provide binary resources across supported platforms</strong></p>
<p>Mahjong is going to be available on desktop, mobile, and web. Each of these platforms has its constraints on accessing external files:</p>
<ul>
<li>Desktop can access almost any file</li>
<li>Android/iOS have limited access to file system</li>
<li>Web does not have any file system at all</li>
</ul>
<p>To provide a unified way for accessing resources, we decided to include them into final executable. This decision led to the birth of <strong>mjin-resource</strong> and <strong>mahjong-data</strong> projects.</p>
<p><a href="https://bitbucket.org/ogstudio/mjin-resource">mjin-resource</a>:</p>
<ul>
<li>converts binary files to C header files with the help of <strong>xxd</strong> utility</li>
<li>generates MJIN project that contains generated headers to be compiled into static library</li>
<li>provides C++ interface for accessing generated resources</li>
</ul>
<p><a href="https://bitbucket.org/ogstudio-games/mahjong-data">mahjong-data</a> is an example of such generated MJIN project that is referenced by <a href="https://bitbucket.org/ogstudio-games/mahjong">mahjong</a> project.</p>
<p><strong>Problem №2: load PNG images across supported platforms</strong></p>
<p>To load PNG, we use corresponding OpenSceneGraph plugin. We built it for desktop with no issues. Building for web (Emscripten) turned out to be more difficult: Emscripten provides its own version of <strong>libpng</strong>, which OpenSceneGraph build script can’t detect. We had to work around several OpenSceneGraph checks to successfully build the plugin for Emscripten.</p>
<p>Building the plugin for Android and iOS is still waiting for us. Once we get PNG plugin working across supported platforms, we are going to publish a new tutorial for <a href="https://github.com/ogstudio/openscenegraph-cross-platform-guide">OpenSceneGraph cross-platform guide</a> to cover PNG image loading. We already got a <a href="https://github.com/OGStudio/openscenegraph-cross-platform-guide/issues/4">request to describe image loading</a>.</p>
<p><strong>Development</strong></p>
<p><a href="2017-03-16_lets-go.html">As you know</a>, we published OpenSceneGraph cross-platform guide to make OpenSceneGraph community stronger. We value education, and we love to share our knowledge. That’s why we decided to develop Mahjong in small reproducible chunks uniquely identified by internal versions. These versions are available in <a href="https://bitbucket.org/ogstudio-games/mahjong">mahjong repository</a>.</p>
<p>We also provide <a href="http://ogstudio.github.io/game-mahjong">version history and web releases of each internal version</a> for the following reasons:</p>
<ul>
<li>education: show how development looks like internally</li>
<li>accessibility: provide older versions for comparison</li>
</ul>
<p><strong>Current Mahjong game status</strong></p>
<p>As of the time of this writing, we have implemented tile selection. <a href="https://ogstudio.github.io/game-mahjong/versions/010/mjin-player.html">Try it in your browser!</a></p>
<p>Once we finish tile matching implementation, we are going to publish the intermediate result for all supported platforms.</p>
<p>That’s it for describing the start of Mahjong game recreation.</p>
</div>
</div>
</center>
<script type="text/javascript">
</script>
</body>
</html>