-
Notifications
You must be signed in to change notification settings - Fork 46
/
index.html
115 lines (77 loc) · 7.85 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Gamedev Phaser Content Kit: Learn how to build HTML5 Games with Phaser</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h1>Gamedev Phaser Content Kit</h1>
<h2>Learn how to build HTML5 Games with Phaser</h2>
<p>Welcome to the <strong>Gamedev Phaser Content Kit</strong>, also known as <strong>Mobile Web Games Starter Kit</strong> or <strong>HTML5 Game Development with Phaser</strong>. This <strong>Content Kit</strong> contains resources on how to start building games using the <strong>Phaser</strong> framework, it is prepared especially for beginners. You can use it to learn it yourself or teach others either by giving a conference talk or during the hands-on workshop.</p>
<a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
<h2>Content Kit materials</h2>
<ul>
<li><a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/tutorial/">Step-by-step tutorial split into 16 lessons</a></li>
<li><a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/">Demos with the source code available for every step</a></li>
<li><a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/slides/">Slide decks with the presenter notes included</a></li>
</ul>
<p>This Content Kit can be used as a base for the conference talk material, workshop, online training or whatever else comes to your mind. You can use the slides containing the commented, explained snippets of code to present the topic to the audience, or you can run a live-coding session showing people how to build the final version of the game from scratch. You can also add your own content or trim the existing one if you have limited time for the talk.</p>
<h2>Current version and licensing</h2>
<p>This Content Kit was last updated on August 17th 2015. It is published under the <a href="https://www.mozilla.org/MPL/2.0/">Mozilla Public License</a>, version 2.0.</p>
<h2>Prerequisites for the presenter</h2>
<ul>
<li>Computer running Windows, Linux or Mac OS X.</li>
<li>Modern browser: Firefox, Chrome, Opera, Safari, or Internet Explorer 10+.</li>
<li>Text editor: Sublime Text, Notepad++.</li>
<li>Intermediate JavaScript/Canvas knowledge.</li>
</ul>
<h2>Prerequisites for the audience</h2>
<ul>
<li>Optional setup described above to test demos or take part in the workshop.</li>
<li>Basic JavaScript knowledge.</li>
</ul>
<h2>Key points</h2>
<p>Here's what the audience will be able to do or get from your talk/workshop:</p>
<ul>
<li>Know how to start making games using Phaser.</li>
<li>Be able to write JavaScript code properly.</li>
<li>Know how the Phaser-specific functions work and how to use them effectively.</li>
<li>Understand the basic 2D game logic.</li>
</ul>
<h2>Presentation setup</h2>
<p>There are two sets of slides that can be used independently, or together one after another if you have enough time. The first, optional "theory" slide deck walks you through the HTML5 game development in general, its tools and resources. The second, main "talk" slide deck is using the Breakout HTML5 game as an example and explains the key elements needed to have such game implemented.</p>
<ul>
<li>Optional <a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/slides/theory/">"theory" slide deck</a></li>
<li>Main <a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/slides/talk/">"talk" slide deck</a></li>
</ul>
<p>Presenting about HTML5 game development is fairly simple — you just need the slides and demo materials, downloaded locally if possible so network connectivity is not a problem. Just running the "theory" presentation without a code walkthrough or workshop should take 30 minutes, and the "talk" presentation should also take about 30 minutes. You can present those two in this particular order if you have an hour for your talk. If your time is limited to a half an hour, you can go with the main slide deck only.</p>
<p>You can visit the <a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/slides/">slides subpage</a> where all the decks are available - those two for the presentation, a short live-coding instructions, and the workshop transcript.</p>
<h2>Demo setup</h2>
<p>In its simplest form, the demos can be run simply by double clicking the html files in the demos directory (from lesson01.html to lesson16.html), or navigating to the live demos directly.</p>
<p>You can find the full list of demos and their short description on the <a href="https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/">demos subpage</a>. You can launch the last, final demo (lesson16.html) during the talk if you want to show the actual gameplay and show the full source code.</p>
<h2>Reference materials</h2>
<p>Follow these external resources to learn more about HTML5 game development.</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Games">MDN Games area</a></li>
<li><a href="http://www.html5gamedevs.com/">HTML5 Game Devs forums</a></li>
<li><a href="http://html5devstarter.enclavegames.com/">HTML5 Gamedev Starter</a></li>
<li><a href="http://gamedevjsweekly.com/">Gamedev.js Weekly newsletter</a></li>
<li><a href="http://webchat.freenode.net/?channels=bbg">#BBG IRC channel at Freenode</a></li>
</ul>
<h2>Frequently Asked Questions (FAQs)</h2>
<p>Remember that the audience may have some questions about the topic. Be sure to feel comfortable with what you're presenting. Don't worry if you don't know the answer to a question - you can always tell them you'll check it and answer later, or you can point them to any of the external resources so they can check it themselves.</p>
<dl>
<dt>Should I start from scratch or use a framework?</dt>
<dd>It depends on whether you want to learn about the basics with a simple 2D game or already know JavaScript and want to build the game quickly. In the first case <a href="https://end3r.github.io/Gamedev-Canvas-Content-Kit/">start from scratch</a>, and in the second use the framework.</dd>
</dl>
<h2>Feedback</h2>
<p>Send <a href="https://github.com/end3r/Gamedev-Phaser-Content-Kit/pulls">pull requests</a> if you find anything that should be fixed or updated.</p>
<h2>Translations</h2>
<p>The English version is the only one available right now, but the Polish version is being worked on and should be available in the near future. Feel free to translate the resources to your native language and send the pull request, so other developers can benefit from that.</p>
<h2>About the author</h2>
<p>This Content Kit was created by <a href="http://end3r.com">Andrzej Mazur</a> - you can ping him on Twitter <a href="https://twitter.com/end3r">@end3r</a> or send him an email. Feel free to ask questions, request training on using the Content Kit or preparing for the talk. Send feedback if you have any.</p>
<h2>More about Content Kits</h2>
<p>If you're interested in Content Kits you can find the full list on the <a href="https://developer.mozilla.org/en-US/Learn/Content_kits">MDN page</a>. If you want to create one yourself there's <a href="https://wiki.mozilla.org/MDN/Projects/Content/MDN_Content_Kits">Mozilla Wiki</a> for that with all the details you need. The Content Kits project started as the collaboration between the Mozilla MDN Technical Writers and Technical Evangelism teams. They are here to help you, so don't hesitate if you need anything or have any questions: ask them directly via the <a href="https://wiki.mozilla.org/IRC">#mdn IRC channel</a> or the <a href="https://lists.mozilla.org/listinfo/dev-mdc">dev-mdc mailing list</a>.</p>
</body>
</html>