-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathreadme.html
More file actions
237 lines (227 loc) · 9.93 KB
/
readme.html
File metadata and controls
237 lines (227 loc) · 9.93 KB
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="static/favicon.ico">
<link href="static/css/normalize.css" rel="stylesheet">
<link href="static/css/site.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;1,300&display=swap" rel="stylesheet">
<title>Flipon - level editor</title>
<meta name="twitter:title" content="Flipon">
<meta name="twitter:description" content="Flipon is a juicy and fun arcade puzzle game full of surprises!">
<meta property="og:title" content="Flipon">
<meta property="og:description" content="Flipon is a juicy and fun arcade puzzle game full of surprises!">
<meta name="author" content="Damien Mayance">
<meta name="description" content="Flipon is a juicy and fun arcade puzzle game full of surprises!">
<meta name="keywords"
content="damien, mayance, flipon, panel de pon, puzzle league, tetris attack, panic attack, aurélien, regard">
<meta property="og:site_name" content="Flipon">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.flipon.net">
<meta property="og:locale" content="en">
<meta property="og:image" content="https://www.flipon.net/static/images/card.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:height" content="1920">
<meta property="og:image:width" content="1080">
<meta name="twitter:card" content="photo">
<meta name="twitter:site" content="https://www.flipon.net">
<meta name="twitter:creator" content="flipongame">
<meta name="twitter:url" content="https://www.flipon.net">
<meta name="twitter:image:src" content="https://www.flipon.net/static/images/card.png">
</head>
<body>
<div class="page">
<header class="page-header">
<img class="logo" src="./static/images/logo.png" alt="Flipon logo" />
<h1>Level editor: manual</h1>
<div class="links">
<ul>
<li>
<a class="link link-blue" href="index.html">THE EDITOR</a>
</li>
<li>
<a class="link link-red" href="https://www.flipon.net">THE GAME</a>
</li>
<li>
<a class="link link-green" href="https://discord.gg/7jFZ2fC">THE DISCORD</a>
</li>
</ul>
</div>
</header>
<main class="page-content" role="main">
<div class="manual">
<div>
<p>
Welcome to the level editor of <strong><a href="https://www.flipon.net">Flipon!</a></strong>
</p>
<p>You'll be able to recreate most of the levels of the game, except fights (for now).</p>
<p>Note: this is a PC only feature for now.</p>
</div>
<div>
<h2>
🚀 Import a level in the game
</h2>
<p>
The levels of the game should be placed in the <strong>StreamingAssets/levels</strong> folder of the game installation. Each level is a JSON file with a specific format.
</p>
<p>
<img src="static/doc/streamingassets.png" />
</p>
<p>
💡 Don't know where this folder is? Use the "..." button in the game submenu! (see below)
</p>
<p>
Using the latest PC version of the game (1.5.0), you should be able to see your levels in the "Your Levels" menu.
</p>
<p>
<img src="static/doc/menu.png" />
</p>
<p>
Browse the list and Select/Click on your level to play it. That's all!
</p>
<p>
<img src="static/doc/yourlevels.png" />
</p>
<p>
<ul>
<li>...: open the StreamingAssets folder 🪄</li>
<li>🔄: re-scan the levels folders</li>
</ul>
</p>
</div>
<div>
<h2>
🛠 Use the editor
</h2>
<a class="link link-blue" href="index.html">TO THE EDITOR</a>
<h3>📝 Meta properties</h3>
<p>Set the "meta" informations: the level name, your name and a brief description.</p>
<p><img src="static/doc/meta.png" /> </p>
<p>Those information are displayed in the game menu and it will help players find your levels in the interface.</p>
<h3>🔧 General properties</h3>
<p><img src="static/doc/general.png" /> </p>
<ul>
<li>Level type: pretty self explanatory. It will change the rules used to detect the level end.</li>
<li>Background: the background image to use</li>
<li>Start lines: number of pre-filled grid lines when level starts</li>
<li>Preview lines: see what's coming next</li>
<li>Start speed: the speed level when level starts</li>
<li>Speed limit: the maximum speed level</li>
<li>Disable scrolling: no new lines will be generated</li>
<li>Disable speed up: the speed level will not change</li>
<li>Seed: set the random's seed so the level is always the same when you restart</li>
<li>Time limit: time given to complete the level in seconds</li>
</ul>
<p>Then setup the objectives if you want.</p>
<p><img src="static/doc/objectives.png" /> </p>
<p>
⚠️ Do not use more than 4 objectives!
</p>
<ul>
<li>Score: points to reach</li>
<li>Time reached: time to survive in seconds</li>
<li>Clear depth: the number of lines of clear</li>
<li>Max multiplier: the best multiplier ("x42") to reach</li>
<li>Total combos: the count of combos to achieve</li>
<li>4-blocks combos: the count of 4-blocks combos to achieve</li>
<li>5-blocks combos: the count of 5-blocks combos to achieve</li>
<li>L-shaped combos: the count of L-shaped combos to achieve</li>
<li>Total chains: The count of chains to achieve</li>
<li>Highest chains: The highest chain multiplier to reach. ⚠ this can be hard</li>
</ul>
<h3>🎨 Paint the grid</h3>
<p>
For puzzles and challenges, modes with no scrolling and no new blocks, this is mandatory. You can place blocks on the grid so they are loaded on the level start.
</p>
<p><img src="static/doc/grid.png" /> </p>
<p>Set the grid size (width > 2, height should be > 8).</p>
<p>💡 Big grids are fun! But not compatible with mobile.</p>
<p>
How to paint on grid?
</p>
<ul>
<li>Select a block to paint in the top palette.</li>
<li>Click on a cell to add a block</li>
<li>The first block is a clear cell</li>
</ul>
<h3>The JSON</h3>
<p>You can check the JSON export at anytime. You can modify it, copy/paste, etc</p>
<p>Editor will refresh as soon as you leave the text area.</p>
<p><img src="static/doc/json.png" /> </p>
<h4>🔥 The modifiers</h4>
<p>
Those are the special events of the levels.
</p>
<p>They are disabled by default.</p>
<p><img src="static/doc/modifiers_off.png" /> </p>
<p>Click on a any checkbox to enable a modifier.</p>
<p>⚠️ Do not use more than 4 at once.</p>
<h5>
Garbage generation
</h5>
<p>Make garbages falls!</p>
<p><img src="static/doc/mod_garbages.png" /> </p>
<ul>
<li>Delay: time (seconds) before the event starts</li>
<li>Duration: time (seconds) until the event stops</li>
<li>Min Frequency: random minimal time (seconds) between 2 garbages</li>
<li>Max Frequency: random maximal time (seconds) between 2 garbages</li>
<li>Garbage size: width of the garbage to generate</li>
</ul>
<h5>
Color change
</h5>
<p>Change the blocks of the grid visually, but not the layout.</p>
<p><img src="static/doc/mod_changecolors.png" /> </p>
<ul>
<li>Delay: time (seconds) before the event starts</li>
<li>Duration: time (seconds) until the event stops</li>
<li>Cooldown: time (seconds) to wait between two effects</li>
<li>Add new colors: introduce new colors.</li>
</ul>
<h5>
Add blocks
</h5>
<p>Make blocks falls!</p>
<p><img src="static/doc/mod_add.png" /> </p>
<ul>
<li>Delay: time (seconds) before the event starts</li>
<li>Duration: time (seconds) until the event stops</li>
<li>Cooldown: time (seconds) to wait between two effects</li>
<li>Blocks to add: count of blocks to add</li>
</ul>
<h5>
Hide grid
</h5>
<p>Hide a % of the grid for few seconds</p>
<p><img src="static/doc/mod_hide.png" /> </p>
<ul>
<li>Delay: time (seconds) before the event starts</li>
<li>Duration: time (seconds) until the event stops</li>
<li>% of the grid: 0: grid fully visible, 1: grid fully hidden. 0.5 = 50%.</li>
<li>Hide duration: time (seconds) of the grid being hidden</li>
<li>Wait: time (seconds) to wait between two effects</li>
</ul>
</div>
<div>
<h2>
💌 Share your levels
</h2>
<p>
Join our <a href="https://discord.gg/EpNNwhs3">Discord</a> to share your levels with players from all over world!
</p>
<p>Note: a better solution may come later.</p>
</div>
<div>
<h2>Misc</h2>
<p>
This editor is [open-source](https://github.com/flipon/flipon-editor/). Feel free to report any bug and submit updates.
</p>
</main>
<footer class="page-footer">
<p>Made with ❤ by Damien Mayance and a talented team.</p>
</footer>
</div>
</body>
</html>