From 6d188b7b9a459360abe6d28b94984f0c4885b00c Mon Sep 17 00:00:00 2001 From: Markus Bordihn Date: Sat, 5 May 2018 21:27:44 +0200 Subject: [PATCH] Fixed .md files to be compatible with markdown linter. --- .markdownlintrc | 5 + BUILD.md | 57 +++- CONTRIBUTING.md | 37 ++- LICENSE.md | 2 + NOTICE.md | 108 ++++--- README.md | 84 +++-- build/test/coverage.js | 4 +- doc/ADDON.md | 14 +- doc/ARCHITECTURE.md | 17 +- doc/BUILD_CHROME_OS.md | 43 ++- doc/BUILD_LINUX_APP.md | 7 +- doc/BUILD_MAC_APP.md | 42 ++- doc/BUILD_WEB.md | 7 +- doc/BUILD_WIN_APP.md | 41 ++- doc/DEBUG.md | 48 ++- doc/DEVELOPMENT.md | 22 +- doc/I18N.md | 89 +++--- doc/LAYOUT.md | 19 +- doc/MODES.md | 23 +- package.json | 9 +- src/addon/README.md | 3 + src/ui/help/help.soy | 2 +- training/phaser/basics/de/README.md | 196 ++++++++---- .../simple_jump_and_run_game/de/README.md | 289 ++++++++++++------ 24 files changed, 780 insertions(+), 388 deletions(-) create mode 100644 .markdownlintrc diff --git a/.markdownlintrc b/.markdownlintrc new file mode 100644 index 000000000..76a10ce47 --- /dev/null +++ b/.markdownlintrc @@ -0,0 +1,5 @@ +{ + "default": true, + "MD003": { "style": "setext_with_atx" }, + "MD033": { "allowed_elements": ["img"] } +} \ No newline at end of file diff --git a/BUILD.md b/BUILD.md index 13a9f2c0e..49f0c25b7 100644 --- a/BUILD.md +++ b/BUILD.md @@ -1,72 +1,99 @@ Build Coding with Chrome ========================= -

-## What you need to build your own Coding with Chrome App -In order to build the Coding with Chrome App, you only need to have Node.js/npm, git and Open JDK / Java JRE installed on your system. + + +What you need to build the Coding with Chrome App +-------------------------------------------------- + +In order to build the Coding with Chrome App, you only need to have Node.js/npm, +git and Open JDK / Java JRE installed on your system. Each build is cross platform compatible. Which mean if you build the Coding with Chrome App on Windows you could use the generated code `genfiles/chrome_app` folder in other platforms like Mac OS X as well. ### Windows -Install Node.js from the official web page at https://nodejs.org + +Install Node.js from the official web page at + * Optional, if not already installed - * Install git from the official web page at https://git-scm.com/ + * Install git from the official web page at * Install Java JRE - * Install Google Chrome browser at https://google.com/chrome + * Install Google Chrome browser at ### Mac OS X -Install Node.js from the official web page at https://nodejs.org + +Install Node.js from the official web page at + * Optional, if not already installed - * Install git from the official web page at https://git-scm.com/ + * Install git from the official web page at * Install Java JRE - * Install Google Chrome browser at https://google.com/chrome + * Install Google Chrome browser at ### Linux/BSD + Use your package manager to install Node.js, or build from source. + * Optional, if not already installed * Use your package manager to install git, or build from source. * Install Open JDK or Java JRE - * Install Google Chrome browser at https://google.com/chrome + * Install Google Chrome browser at -## How to build your own Coding with Chrome App +How to build your own Coding with Chrome App +--------------------------------------------- ### Get the sources + Download the source files manual from GitHub or with git by running: + ```bash git clone --recursive git://github.com/google/coding-with-chrome.git ``` ### Switch into the downloaded folder -To be able to execute the following commands, you need to switch to the downloaded folder by running: + +To be able to execute the following commands, you need to switch to the +downloaded folder by running: + ```bash cd coding-with-chrome ``` ### Init / update submodules + In some cases you need to init and update the submodules manually by: + ```bash git submodule init git submodule update ``` ### Get required packages + Enter the "coding-with-chrome" directory and get the required packages by: + ```bash npm install ``` ### Sync the project folder -In order to update all dependencies automatically, just run the following command: + +In order to update all dependencies automatically, just run the following +command: + ```bash npm run sync ``` ### Build the actual app -There are several ways to use Coding with Chrome, each of them have their advantage or disadvantage. + +There are several ways to use Coding with Chrome, each of them have their +advantage or disadvantage. In general we are offering the following versions: + * [Chrome Application (Chrome OS)](doc/BUILD_CHROME_OS.md) -* Binary ([Mac](doc/BUILD_MAC_APP.md), [Windows](doc/BUILD_WIN_APP.md) and [Linux](doc/BUILD_LINUX_APP.md)) +* Binary ([Mac](doc/BUILD_MAC_APP.md), + [Windows](doc/BUILD_WIN_APP.md) and [Linux](doc/BUILD_LINUX_APP.md)) * [Web (any modern Browser / experimental)](doc/BUILD_WEB.md) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 18985d31e..a42a1c4ee 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,7 +1,12 @@ +Contributing +============= + Want to contribute? Great! First, read this page (including the small print at the end). -### Before you contribute +Before you contribute +---------------------- + Before we can use your code, you must sign the [Google Individual Contributor License Agreement](https://cla.developers.google.com/about/google-individual) (CLA), which you can do online. The CLA is necessary mainly because you own the @@ -16,40 +21,50 @@ us first through the issue tracker with your idea so that we can help out and possibly guide you. Coordinating up front makes it much easier to avoid frustration later on. -### General Workflow +General Workflow +------------------- + +### 1. Fork the Repo -#### 1. Fork the Repo You will find more details on [Fork a Repo](https://help.github.com/articles/fork-a-repo/) -#### 2. If needed, sync/rebase the branch to the master branch +### 2. If needed, sync/rebase the branch to the master branch + If the branch is even or ahead of master, you can skip this part. In the case the branch is behind master, please sync/rebase the branch with the master branch. -#### 3. Add your changes +### 3. Add your changes + Add your contribution and make sure to use as less needed commits or to squash smaller commits. -#### 4. Test your changes -Please make sure your changes are working as expect and add additional unit or general tests to the test directory if needed. +### 4. Test your changes + +Please make sure your changes are working as expect and add additional unit or +general tests to the test directory if needed. + +### 5. Create a pull request for the forked branch -#### 5. Create a pull request for the forked branch If everything works as expect, create a pull request for your forked branch. See: [Creating a pull request](https://help.github.com/articles/creating-a-pull-request/) -#### 6. Merging into master branch +### 6. Merging into master branch + This step is handled by the "Coding with Chrome" team. Depending on the change it could take up to 1 week before your change is merged into the master branch and part of the bundled application. +Code reviews +------------- -### Code reviews All submissions, including submissions by project members, require review. We use GitHub pull requests for this purpose. +The small print +---------------- -### The small print Contributions made by corporations are covered by a different agreement than the one above, the [Software Grant and Corporate Contributor License Agreement](https://cla.developers.google.com/about/google-corporate). diff --git a/LICENSE.md b/LICENSE.md index d64569567..c20e3cceb 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,3 +1,5 @@ +License +======= Apache License Version 2.0, January 2004 diff --git a/NOTICE.md b/NOTICE.md index 57b831596..750019712 100644 --- a/NOTICE.md +++ b/NOTICE.md @@ -1,4 +1,5 @@ -# Credits +Credits +======== * [Blockly](#blockly) * [Brython](#brython) @@ -22,11 +23,12 @@ * [jQuery](#jquery) * [three.js](#threejs) +Blockly +------- -## Blockly -``` +```text Apache License Version 2.0, January 2011 @@ -206,11 +208,12 @@ END OF TERMS AND CONDITIONS ``` +Brython +------- -## Brython -``` +```text Copyright (c) 2012, Pierre Quentel pierre.quentel@gmail.com All rights reserved. @@ -240,11 +243,12 @@ NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. ``` +Closure Builder +--------------- -## Closure Builder -``` +```text Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ @@ -423,11 +427,12 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. END OF TERMS AND CONDITIONS ``` +Closure Library +--------------- -## Closure Library -``` +```text Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ @@ -606,11 +611,12 @@ SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. END OF TERMS AND CONDITIONS ``` +CodeMirror +---------- -## CodeMirror -``` +```text Copyright (C) 2016 by Marijn Haverbeke and others Permission is hereby granted, free of charge, to any person obtaining a copy @@ -632,11 +638,12 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ``` +CoffeeLint +---------- -## CoffeeLint -``` +```text CoffeeLint Copyright (c) 2011 Matthew Perpick @@ -659,11 +666,12 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ``` +CoffeeScript +------------ -## CoffeeScript -``` +```text Copyright (c) 2009-2015 Jeremy Ashkenas Permission is hereby granted, free of charge, to any person @@ -688,11 +696,12 @@ FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ``` +Dialog-Polyfill +--------------- -## Dialog-Polyfill -``` +```text Copyright (c) 2013 The Chromium Authors. All rights reserved. Redistribution and use in source and binary forms, with or without @@ -722,11 +731,12 @@ THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. ``` +HTMLHint +--------- -## HTMLHint -``` +```text The MIT License Copyright (c) 2014-2016 Yanis Wang @@ -750,11 +760,12 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ``` +JSHint +------- -## JSHint -``` +```text Copyright 2012 Anton Kovalyov (http://jshint.com) Permission is hereby granted, free of charge, to any person obtaining @@ -777,11 +788,12 @@ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ``` +Material Design icons +---------------------- -## Material Design icons -``` +```text We [Google] have made these icons available for you to incorporate them into your products under the Creative Common Attribution 4.0 International License (CC-BY 4.0). Feel free to remix and re-share these icons and @@ -790,11 +802,12 @@ documentation in your products. ``` +Material Design Lite +--------------------- -## Material Design Lite -``` +```text Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ @@ -1008,11 +1021,12 @@ documentation in your products. whether and how they wish to license it. ``` +NW.js +------ -## NW.js -``` +```text Copyright (c) 2012-2017 Intel Corp Copyright (c) 2012-2017 The Chromium Authors @@ -1035,12 +1049,13 @@ OUT OF OR IN CONNECTIONWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ``` +Open Sans Font +--------------- -## Open Sans Font Steve Matteson -``` +```text Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ @@ -1219,11 +1234,12 @@ Steve Matteson END OF TERMS AND CONDITIONS ``` +Phaser +------- -## Phaser -``` +```text The MIT License (MIT) Copyright (c) 2016 Richard Davey, Photon Storm Ltd. @@ -1246,12 +1262,13 @@ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ``` +Roboto Font +------------ -## Roboto Font Christian Robertson -``` +```text Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ @@ -1430,11 +1447,12 @@ Christian Robertson END OF TERMS AND CONDITIONS ``` +Shepherd +--------- -## Shepherd -``` +```text Copyright (c) 2015 HubSpot, Inc. Permission is hereby granted, free of charge, to any person obtaining a copy @@ -1456,11 +1474,12 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ``` +Skulpt +------- -## Skulpt -``` +```text Copyright (c) 2009-2010 Scott Graham Permission is hereby granted, free of charge, to any person obtaining a copy @@ -1496,11 +1515,12 @@ per: https://bitbucket.org/pypy/pypy/src/default/LICENSE ``` +jQuery +------- -## jQuery -``` +```text Copyright jQuery Foundation and other contributors, https://jquery.org/ This software consists of voluntary contributions made by many @@ -1539,11 +1559,12 @@ own licenses; we recommend you read them, as their terms may differ from the terms above. ``` +jQuery-turtle +-------------- -## jQuery-turtle -``` +```text jQuery-turtle version 2.0 LICENSE (MIT): @@ -1569,11 +1590,12 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ``` +three.js +--------- -## three.js -``` +```text The MIT License Copyright © 2010-2016 three.js authors diff --git a/README.md b/README.md index 47d207248..246dc6409 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,12 @@ -[Available in the Chrome Web Store](https://chrome.google.com/webstore/detail/coding-with-chrome/becloognjehhioodmnimnehjcibkloed) - -Coding with Chrome +Coding with Chrome [](https://chrome.google.com/webstore/detail/coding-with-chrome/becloognjehhioodmnimnehjcibkloed) ================== + [![Code Climate](https://codeclimate.com/github/google/coding-with-chrome/badges/gpa.svg)](https://codeclimate.com/github/google/coding-with-chrome) [![Build Status](https://travis-ci.org/google/coding-with-chrome.svg?branch=master)](https://travis-ci.org/google/coding-with-chrome) - +[](https://chrome.google.com/webstore/detail/coding-with-chrome/becloognjehhioodmnimnehjcibkloed) Coding with Chrome * [Licensing](#licensing) @@ -15,70 +17,91 @@ Coding with Chrome * [Contributing](#contributing) * [Credits](#credits) - Coding with Chrome is an Educational Development Environment built around two core philosophies: - 1. Offer a stand-alone, offline app experience which allows people anywhere to -learn how to build useful computer programs: - * A basic IDE able to support real programming work - * A tutorial system that poses a challenge, checks the solution and - provides feedback. - - 2. Allow educators to put together a custom curriculum made up of various -components like: - * input languages (blockly, javascript, coffeescript) - * output modules (turtle graphics, javascript output, connected robots) - * Flexible UI where elements can be easily added, modified or removed - * Tutorial engine for self learning - -## Licensing + +1. Offer a stand-alone, offline app experience which allows people anywhere to + learn how to build useful computer programs: + * A basic IDE able to support real programming work + * A tutorial system that poses a challenge, checks the solution and + provides feedback. +2. Allow educators to put together a custom curriculum made up of various + components like: + * input languages (blockly, javascript, coffeescript) + * output modules (turtle graphics, javascript output, connected robots) + * Flexible UI where elements can be easily added, modified or removed + * Tutorial engine for self learning + +Licensing +---------- + Apache License, Version 2.0 see [LICENSE.md](LICENSE.md) -## Install Coding with Chrome -If you only want to install __Coding with Chrome__, you could use the pre-compiled versions. +Install Coding with Chrome +--------------------------- + +If you only want to install __Coding with Chrome__, you could use the +pre-compiled versions. ### Chrome App version + To install the Chrome App version: + 1. Visit the [Chrome Web Store][1] 2. Click __Add to Chrome__ 3. Go to [chrome://apps](chrome://apps) or use the "Overview" ○ Launcher 4. Launch __Coding with Chrome__ ### Mac OS and Windows version (alpha) + To install the Mac OS and/or Windows binary version: + 1. Visit the [Release Page][2] and look for the latest entry -2. Download and extract the correpsonding **.zip file** for your platform -4. Go into the extracted folder and launch __Coding with Chrome__(.app/.exe) +2. Download and extract the corresponding **.zip file** for your platform +3. Go into the extracted folder and launch __Coding with Chrome__(.app/.exe) -## Build the Coding with Chrome App -If you want to build the latest Coding with Chrome App from the source code, please check the [build instructions](BUILD.md). +Build the Coding with Chrome App +--------------------------------- -## Supported hardware and system +If you want to build the latest Coding with Chrome App from the source code, +please check the [build instructions](BUILD.md). + +Supported hardware and system +------------------------------ ### Supported hardware + Computers and Laptops with Chrome OS or any OS which is able to run the Desktop Chrome Browser are supported. For additional features Bluetooth and/or USB are required. ### Supported systems + The following operating systems are supported by Coding with Chrome: + * Chrome OS * Mac OS * Windows OS * Linux (without Bluetooth support / USB supported) ### Supported robots + The following robots are supported, out of the box by Coding with Chrome: + * EV3 * Sphero 2.0 * mBot (firmware >= 06.01.104) * mBot Ranger (firmware >= 09.01.001) -## Report Issues +Report Issues +-------------- + For any issues or feature requests, we would really appreciate it if you report them using our [issue tracker](https://github.com/google/coding-with-chrome/issues). -## Contributing +Contributing +------------- + Contributing to Coding with Chrome is subject to the guidelines in the [CONTRIBUTING.md](CONTRIBUTING.md) file, which, in brief, requires that contributors sign the [Individual Contributor License Agreement (CLA)][3]. @@ -87,9 +110,12 @@ For more information about develop for Coding with Chrome, please check [doc/DEVELOPMENT.md](doc/DEVELOPMENT.md) ### Translation + For translation instruction, please check [doc/I18N.md](doc/I18N.md). -## Credits +Credits +-------- + Coding with Chrome is made possible by other [open source software](NOTICE.md). [1]: https://chrome.google.com/webstore/detail/coding-with-chrome/becloognjehhioodmnimnehjcibkloed diff --git a/build/test/coverage.js b/build/test/coverage.js index 56c165796..c9ce292fd 100644 --- a/build/test/coverage.js +++ b/build/test/coverage.js @@ -37,8 +37,8 @@ if (!coverageDir) { console.log('Processing coverage folder at', coverageDir); let options = { files: path.join(coverageDir, 'lcov.info'), - from: new RegExp(escapeStringRegexp(path.join(appDir, '/')), 'g'), - to: '', + from: new RegExp(escapeStringRegexp(appDir), 'g'), + to: '.', }; try { let changes = replace.sync(options); diff --git a/doc/ADDON.md b/doc/ADDON.md index e24358210..c6d19649d 100644 --- a/doc/ADDON.md +++ b/doc/ADDON.md @@ -1,17 +1,21 @@ Coding with Chrome - Addon -====================================== +=========================== -### Adding additional addons +Adding additional addons +------------------------- + +### Create addon folder -#### Create addon folder For starting with an addon create a new folder under `src/addon/[Addon name]`. -#### Addon rules +### Addon rules + To make sure addons are user friendly and not disruptive, there are some general rules. * The addon needs to be activated by the user an can not be auto-enabled. * The addon should not change any core functionality. -#### Events +### Events + ... \ No newline at end of file diff --git a/doc/ARCHITECTURE.md b/doc/ARCHITECTURE.md index 7b4043b83..f0bc97560 100644 --- a/doc/ARCHITECTURE.md +++ b/doc/ARCHITECTURE.md @@ -4,7 +4,8 @@ Coding with Chrome - Architecture This document covers the technical architecture for the different parts of Coding with Chrome. -## Folder structure +Folder structure +----------------- * **app** - Chrome app folder * **_locales** - Language specific translations @@ -26,7 +27,7 @@ Coding with Chrome. * **core** - Pre-compiled core files version * **nw_app** - Pre-compiled files for the binary version * **third_party** - Pre-compiled third party library and frameworks - * **web_app** - Webbrowser version + * **web_app** - Webbrowser version * **src** - Source folder for actual code * **config** - Main configurations for Coding with Chrome * **file** - File and files classes @@ -77,13 +78,15 @@ Coding with Chrome. * **utils** - Collection of additional helper * **third_party** - Third party files like images, logos,... - -##Basic Workflow +Basic Workflow +--------------- ### Renderer + The renderer prepares the sandbox environment with the needed frameworks or preparations to execute the user generated code. -``` + +```text +----------------------+ +----------------------+ | | | | | Editor | | Preview | @@ -97,11 +100,13 @@ preparations to execute the user generated code. ``` ### Runner + The runner is used if a hardware communication between the user generated code and the serial, Bluetooth or USB interface is needed. The code will be executed in the sandbox as well, but will have limited access to the internal apis over the runner framekwork / runner api. -``` + +```text +----------------------+ +----------------------+ | | +----------------+ | | | Editor | | | | Preview | diff --git a/doc/BUILD_CHROME_OS.md b/doc/BUILD_CHROME_OS.md index d08573f35..eb7673a1f 100644 --- a/doc/BUILD_CHROME_OS.md +++ b/doc/BUILD_CHROME_OS.md @@ -1,36 +1,54 @@ Build Coding with Chrome - Chrome Application ============================================== -

-## Prerequisites -Please make sure you followed the [Build pre-requisites](BUILD.md) before using this document. + + +Prerequisites +-------------- + +Please make sure you followed the [Build pre-requisites](BUILD.md) before using +this document. + +Build the core files +--------------------- -## Build the core files In order to build the actual app you need first to build all core files. This step is normally needed only once and after an update of the core files. This could be done with the following command: + ```bash npm run build ``` -## Build the actual app +Build the actual app +--------------------- + To only compile the Chrome app run the build script with the following command: + ```bash npm run build-chrome_app ``` -The build version will be compiled in the `dist/chrome_os` directory, together with all required packages and files. -## Build and run the actual app (testing) +The build version will be compiled in the `dist/chrome_os` directory, together +with all required packages and files. + +Build and run the actual app (testing) +--------------------------------------- + For testing you can compile and run the Chrome app use the following command: + ```bash npm run chrome-app ``` + This will automatically build and start the application on Mac OS, Linux or Windows, if supported. -## How to load Coding with Chrome App manual in the Chrome Browser +How to load Coding with Chrome App manual in the Chrome Browser +---------------------------------------------------------------- ### Enable developer mode + Visit `chrome://extensions` in your browser (or open up the Chrome menu by clicking the icon to the far right of the Omnibox (three horizontal bars) and select Extensions under the Tools menu to get to the same place). @@ -38,14 +56,17 @@ select Extensions under the Tools menu to get to the same place). Ensure that the Developer mode checkbox in the top right-hand corner is checked. ### Add the app + On the same page click `Load unpacked extension…` to pop up a file-selection dialog. -Navigate to the directory in which your `dist/chrome_os` files live, and select it. +Navigate to the directory in which your `dist/chrome_os` files live, and select +it. -Alternatively, you can drag and drop the directory where your `dist/chrome_os` files -live onto chrome://extensions in your browser to load it. +Alternatively, you can drag and drop the directory where your `dist/chrome_os` +files live into chrome://extensions in your browser to load it. ### Launch the app + On the same page click `Launch` next to `Coding with Chrome` or visit `chrome://apps` in your browser and click on the `Coding with Chrome` icon. diff --git a/doc/BUILD_LINUX_APP.md b/doc/BUILD_LINUX_APP.md index 2fd9f9570..338d840fb 100644 --- a/doc/BUILD_LINUX_APP.md +++ b/doc/BUILD_LINUX_APP.md @@ -1 +1,6 @@ -TBD \ No newline at end of file +Build Coding with Chrome - Binary Linux Application +==================================================== + + + +TBD diff --git a/doc/BUILD_MAC_APP.md b/doc/BUILD_MAC_APP.md index 6c89e2c3c..8e7ebf45c 100644 --- a/doc/BUILD_MAC_APP.md +++ b/doc/BUILD_MAC_APP.md @@ -1,35 +1,55 @@ Build Coding with Chrome - Binary Mac Application -============================================== -

+================================================== -## Prerequisites -Please make sure you followed the [Build pre-requisites](../BUILD.md) before using this document. + + +Prerequisites +-------------- + +Please make sure you followed the [Build pre-requisites](../BUILD.md) before +using this document. + +Build the core files +--------------------- -## Build the core files In order to build the actual app you need first to build all core files. This step is normally needed only once and after an update of the core files. This could be done with the following command: + ```bash npm run build ``` -## Build the launcher +Build the launcher +------------------- + To compile the binary launcher run the build script with the following command: + ```bash npm run build-nw_app ``` -## Build the actual app -To compile the packed binary version run the build script with the following command: +Build the actual app +--------------------- + +To compile the packed binary version run the build script with the following +command: + ```bash npm run publish-nw_app-mac ``` -The build version will be compiled in the `/dist/binary/osx64` directory, together with all required packages and files. + +The build version will be compiled in the `/dist/binary/osx64` directory, +together with all required packages and files. ### Launch the app -Go into the `/dist/binary/osx64` directory and double click on the `binary` file. -## Troubleshooting +Go into the `/dist/binary/osx64` directory and double click on the `binary` +file. + +Troubleshooting +---------------- ### EMFILE error or "too many open files" error on MAC OSX + Run `ulimit -n 1024` and add it into `~/.bash_profile`. diff --git a/doc/BUILD_WEB.md b/doc/BUILD_WEB.md index 2fd9f9570..57075640f 100644 --- a/doc/BUILD_WEB.md +++ b/doc/BUILD_WEB.md @@ -1 +1,6 @@ -TBD \ No newline at end of file +Build Coding with Chrome - Web Application +=========================================== + + + +TBD diff --git a/doc/BUILD_WIN_APP.md b/doc/BUILD_WIN_APP.md index 3cbc21988..8cbcdbac2 100644 --- a/doc/BUILD_WIN_APP.md +++ b/doc/BUILD_WIN_APP.md @@ -1,32 +1,51 @@ Build Coding with Chrome - Binary Windows Application -============================================== -

+====================================================== -## Prerequisites -Please make sure you followed the [Build pre-requisites](../BUILD.md) before using this document. + + +Prerequisites +-------------- + +Please make sure you followed the [Build pre-requisites](../BUILD.md) before +using this document. + +Build the core files +--------------------- -## Build the core files In order to build the actual app you need first to build all core files. This step is normally needed only once and after an update of the core files. This could be done with the following command: + ```bash npm run build ``` -## Build the launcher +Build the launcher +------------------- + To compile the binary launcher run the build script with the following command: + ```bash npm run build-nw_app ``` -## Build the actual app -To compile the packed binary version run the build script with the following command: +Build the actual app +--------------------- + +To compile the packed binary version run the build script with the following +command: + ```bash npm run publish-nw_app-win ``` -The build version will be compiled in the `/dist/binary/win64` and `/dist/binary/win32` directory, together with all required packages and files. + +The build version will be compiled in the `/dist/binary/win64` and +`/dist/binary/win32` directory, together with all required packages and files. ### Launch the app -Go into the `/dist/binary/win64` (64bit) or `/dist/binary/win32` (32bit) directory and double click on the `binary.exe` file. -## Troubleshooting +Go into the `/dist/binary/win64` (64bit) or `/dist/binary/win32` (32bit) +directory and double click on the `binary.exe` file. + +Troubleshooting +---------------- diff --git a/doc/DEBUG.md b/doc/DEBUG.md index 71a89f05f..1a94ee9b6 100644 --- a/doc/DEBUG.md +++ b/doc/DEBUG.md @@ -1,16 +1,20 @@ Coding with Chrome - Debugging -============================== +=============================== This document covers debugging informations and technique's for the Coding with Chrome editor. -## General options +General options +---------------- + This list gives an general overview of options which could be useful for debugging. ### Log level + You could adjust the visible log level in the src/config/config.js file: -```js + +```javascript /** * Default log level. * @type {cwc.utils.LogLevel} @@ -19,45 +23,57 @@ cwc.config.LogLevel = cwc.utils.LogLevel.INFO; ``` ### Source map + If you need to take a look at the original source code instead of the compiled source code, please run: + ```bash npm run debug ``` ### Sync latest files and dependencies + In some cases you need to update the dependencies to the latest version to get everything working. This can be done with the following command: + ```bash npm run sync ``` ### Clean up generated files and remove "extraneous" packages + To clean up the generated files in the genfiles folder and additional to remove "extraneous" packages, run: + ```bash npm run clean ``` +Live debugging +--------------- -## Live debugging The following methods will help you to debug certain functions or parts without the need to recompile the hole source code. ### Using dist/chrome_os/js/debug.js -The `dist/chrome_os/js/debug.js` file allows you to overwrite definitions or to change function without the need of recompile everything. -Just overwrite your function in the `dist/chrome_os/js/debug.js` file and reload the application to see your change in action. +The `dist/chrome_os/js/debug.js` file allows you to overwrite definitions or to +change function without the need of recompile everything. + +Just overwrite your function in the `dist/chrome_os/js/debug.js` file and reload +the application to see your change in action. In some cases it could be that you need to insert the hole object definition here and not only parts of it. Original definition: + ```javascript cwc.protocol.bluetooth.Device.prototype.getAddress=function(){...}; ``` genfiles/js/debug.js: + ```javascript cwc.protocol.bluetooth.Device.prototype.getAddress=function(){ if (!this.address) { @@ -67,20 +83,26 @@ cwc.protocol.bluetooth.Device.prototype.getAddress=function(){ }; ``` -**NOTE: Please keep in mind that your changes in the `dist/chrome_os/js/debug.js` file will be overwritten if you compile or recompile the code.** +**NOTE: Please keep in mind that your changes in the +`dist/chrome_os/js/debug.js` file will be overwritten if you compile or +recompile the code.** ### Using dist/chrome_os/js/cwc_ui.js -Instead of overwriting definitions in the `dist/chrome_os/js/debug.js` file you could directly replace them in the `dist/chrome_os/js/cwc_ui.js` file. + +Instead of overwriting definitions in the `dist/chrome_os/js/debug.js` file you +could directly replace them in the `dist/chrome_os/js/cwc_ui.js` file. Please keep in mind that this file contains optimized code, so its not really readable but this will also avoid to re-compile the code to test something. Original dist/chrome_os/js/cwc_ui.js: + ```javascript cwc.mode.tts.Mod = ... ``` Modified dist/chrome_os/js/cwc_ui.js: + ```javascript /** * @constructor @@ -105,18 +127,22 @@ cwc.mode.tts.Mod.prototype.decorate = function() { }; ``` -**NOTE: Please keep in mind that your changes in the `dist/chrome_os/js/cwc_ui.js` file will be overwritten if you compile or recompile the code.** +**NOTE: Please keep in mind that your changes in the +`dist/chrome_os/js/cwc_ui.js` file will be overwritten if you compile or +recompile the code.** ### Chrome Developer Tools + Even this is an Chrome application, you could still use the Chrome Developer Tools to debug certain parts. -Just open the Chrome extension page (e.g. `chrome://extensions/`) in your Chrome browser and search for "Coding with Chrome". +Just open the Chrome extension page (e.g. `chrome://extensions/`) in your +Chrome browser and search for "Coding with Chrome". Click the entries in the "inspect views" to get access to the DOM and the JavaScript console. - ### Accessing the core + If you need access to the core of Coding with Chrome, open the JavaScript console for the the "html/editor.html" view and run the following command: diff --git a/doc/DEVELOPMENT.md b/doc/DEVELOPMENT.md index 9bad11be0..71862d91e 100644 --- a/doc/DEVELOPMENT.md +++ b/doc/DEVELOPMENT.md @@ -1,9 +1,11 @@ Coding with Chrome - Development -================================ +================================= -## Starting development +Starting development +--------------------- ### Before starting development + Before you start working on a larger contribution, you should get in touch with us first through the issue tracker with your idea so that we can help out and possibly guide you. @@ -12,7 +14,7 @@ Coordinating up front makes it much easier to avoid frustration later on. ### Check or enable Source Maps in Chrome Source Maps are enabled by default (as of Chrome 39), but if you’d like to -double-check or enable them, first open DevTools and click the settings cog +double-check or enable them, first open DevTools and click the settings cog gear. Under Sources, check Enable JavaScript Source Maps. You might also check Enable CSS Source Maps. @@ -21,31 +23,37 @@ You might also check Enable CSS Source Maps. During development you should only use the debug mode, which provides additional informations and pre-checks over: + ```bash npm run debug ``` - -## Other options +Other options +-------------- ### Rebuild the app + If you change something in the source code, you need to re-compile it. After this you only need to reload the Chrome App to see your change in action. ### Update dependencies + Run the following command to update the dependencies to the latest version: + ```bash npm run sync ``` -After this you only need to reload the Chrome App to see your change in action. +After this you only need to reload the Chrome App to see your change in action. ### Google Drive support (experimental) + Since this feature is experimental, although problems are unlikely we can not guarantee this code is error free. Please make sure that you back up your Google Drive data, or only use test accounts without critical files or data. -See: https://developer.chrome.com/apps/app_identity +See: ### Debugging + For debug instruction, please check [DEBUG.md](DEBUG.md). diff --git a/doc/I18N.md b/doc/I18N.md index af2ee2af2..6781a7296 100644 --- a/doc/I18N.md +++ b/doc/I18N.md @@ -1,18 +1,22 @@ Coding with Chrome - i18n translation ====================================== -### Adding additional language support +Adding additional language support +----------------------------------- -#### Create language file -If your language is currently not supported, create a new folder and language file -under `locales/[language code]/translation.json`. +### Create language folder + +If your language is currently not supported, create a new folder under +`locales/[language code]/translation.json`. For the language code, please use the ISO 639-3 definitions. -Example: `locales/deu/translation.json` +Example: `locales/deu/` + +### Add the language code to the supportedUserLanguage -#### Add the language code to the supportedUserLanguage -Add the new language code to the supported user language in the file +Add the new language code to the supported user language in the file `src/locales/supported.js` like: + ```diff Locales['supportedLanguages'] = [ 'deu', @@ -22,10 +26,12 @@ Locales['supportedLanguages'] = [ ]; ``` -#### Add additional build rule +### Add additional build rule + Create a new build rule in the file `build/cwc/locales.js`. Example for the "deu" translation: + ```javascript /** * DEU Translation. @@ -33,71 +39,64 @@ Example for the "deu" translation: closureBuilder.build({ name: 'Locales.deu', srcs: glob([ - 'locales/deu/translation.js', + 'locales/deu/**/*.js', ]), externs: [ 'build/externs/locales.js', ], compress: true, + options: { + closure: { + rewrite_polyfills: false, + }, + }, out: 'genfiles/core/js/locales/deu.js', }); ``` +Additional language support +---------------------------- -### Additional language support -Take a look into the `locales/eng/translation.json` file and start translating +Take a look into the `locales/eng/` folder and start translating the different type of text. Please make sure that you only add translated text into this new file. It also fine to start with a few line and adding the rest later. If the new file is ready, create an pull request under the following URL: -https://github.com/google/coding-with-chrome/pulls - - -### Translation of untranslated text -Perform the following steps: -* Enable the `Debug mode` under `Settings` -> `Misc` - `Debug mode` -* Restart the app -* Navigate around in the UI part you want to translate -* Open the `Chrome Developer Tools` inside the Coding with Chrome App -* Go to the "hamburger" menu and click on the `Debug` icon -* In the new window click on `i18n Untranslated` - -This will return a list of all untranslated text for your language in the -Chrome Console, like: -```bash -Found 28 untranslated text for en -File: src/locales/eng/translation.js - 'Runs the code and update preview': 'Runs the code and update preview', - 'write(': 'write(', - 'Writes the text on the screen.': 'Writes the text on the screen.', - 'clear ()': 'clear ()', -... -``` + -Copy the output, add your translation and place them into the file -`locales/[language]/translation.json`. - +Translation of untranslated text +--------------------------------- -### Missing translations -If you miss the translation for certain UI parts, please submit pull request to +TBD + +Missing translations +--------------------- + +If you miss the translation for certain UI parts, please submit pull request to add them. +All translations are using an KEY for the translation and maybe separates files +like **locales/deu/welcome_screen.js**. + +### In JavaScript files -#### In JavaScript files Use the global "i18t" function to add the translation to any text. -Please keep in mind that it could be that some text is already translated by +Please keep in mind that it could be that some text is already translated by general functions. + ```js - i18t('Some untranslated text') + i18t('SOME_UNIQUE_TEXT_KEY') ``` -#### In soy files +### In soy files + For soy files, use the {msg desc=""} {/msg} tags to mark any text. -Please keep in mind that it could be that some text is translated by +Please keep in mind that it could be that some text is translated by general functions instead directly. + ```js {msg desc=""} - Welcome to Coding with Chrome! + SOME_UNIQUE_TEXT_KEY {/msg} ``` diff --git a/doc/LAYOUT.md b/doc/LAYOUT.md index b29797cd2..ea65e0194 100644 --- a/doc/LAYOUT.md +++ b/doc/LAYOUT.md @@ -1,18 +1,25 @@ Coding with Chrome - Layout ============================ -### Use Material Design -https://material.io/guidelines/ +Use Material Design +-------------------- -### Use Material Design Icons -https://material.io/icons/ + + +Use Material Design Icons +-------------------------- + + + +Supported screen sizes +----------------------- -### Supported screen sizes The list gives an overview for the general supported screen sizes and their priorities: + * 1366x768 * 1920x1080 -* 1280x1024 +* 1280x1024 * 1280x800 * 1024x768 diff --git a/doc/MODES.md b/doc/MODES.md index 1b1e910d8..f6cbe42f7 100755 --- a/doc/MODES.md +++ b/doc/MODES.md @@ -3,35 +3,42 @@ Coding with Chrome - Modes This document covers the modes of Coding with Chrome and how they are used. -## Workflow +Workflow +--------- 1. The file / content is analyzed from the file detector (cwc.file.detector) -and will be tagged with a file type (cwc.file.Type). + and will be tagged with a file type (cwc.file.Type). 2. The file loader (cwc.fileHandler.FileLoader) uses the file handler config -(cwc.fileHandler.Config), to load the correct mode config (cwc.mode.ConfigData) -for the file type (cwc.file.Type). + (cwc.fileHandler.Config), to load the correct mode config (cwc.mode.ConfigData) + for the file type (cwc.file.Type). 3. The modder (cwc.mode.Modder) build the UI, loads the content and -defines the used renderer according the mode config (cwc.mode.ConfigData). + defines the used renderer according the mode config (cwc.mode.ConfigData). - -## Add a new file_type +Add a new file_type +-------------------- ### Define a file_type + src/file/file_type.js ### Add file extension + Add the official file extension if you don't want to use the .cwc file format. + src/file/file_extension.js ### Define a file_content_type + src/file/file_content_type.js ### Setup file_config + src/file_handler/file_config.js -## Add a new mode +Add a new mode +--------------- ### Define your mode under src/mode/{Mode Name} diff --git a/package.json b/package.json index e693c2b00..113941ff9 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,9 @@ "author": "Markus Bordihn (mbordihn@google.com)", "license": "Apache-2.0", "private": true, - "dependencies": {}, + "dependencies": { + "markdownlint-cli": "^0.8.1" + }, "devDependencies": { "closure-builder": "^2.2.42", "closure-templates": "latest", @@ -22,6 +24,7 @@ "karma-coverage": "^1.1.2", "karma-jasmine": "^1.1.2", "make-dir": "^1.2.0", + "markdownlint": "^0.8.1", "npm-check-updates": "^2.14.2", "nw": "^0.30.2", "nw-builder": "^3.5.1", @@ -30,6 +33,9 @@ }, "scripts": { "usage": "node build/usage.js", + "lint": "npm run lint-javascript && npm run lint-markdown", + "lint-javascript": "eslint .", + "lint-markdown": "markdownlint doc/ training/ *.md src/**/*.md", "pretest": "npm run lint", "test": "npm run test-soy && npm run test-units && npm run test-core-mode", "pretest-soy": "node build/test/soy_files.js", @@ -118,7 +124,6 @@ "clean-web_app": "echo Cleaning up Web app dist files. Please wait ... && rimraf dist/web_app/*", "documentation": "jsdoc src -r -c documentation.json -d docs", "deploy": "npm test && git push", - "lint": "eslint .", "show-updates": "ncu", "sync": "echo Syncing. Please wait ... && git pull && git submodule init && git submodule update && npm run update", "preupdate": "npm run clean", diff --git a/src/addon/README.md b/src/addon/README.md index 1748100b9..f673932a4 100644 --- a/src/addon/README.md +++ b/src/addon/README.md @@ -1,2 +1,5 @@ +Addon folder +============= + This folder includes all additional addons for the core editor. The addons could be activated over the settings menu. diff --git a/src/ui/help/help.soy b/src/ui/help/help.soy index cd34859de..f4ae3172a 100644 --- a/src/ui/help/help.soy +++ b/src/ui/help/help.soy @@ -58,7 +58,7 @@ {if $is_chrome_app} + src="../NOTICE.html" style="width: 600px; height: 500px;"> {else} diff --git a/training/phaser/basics/de/README.md b/training/phaser/basics/de/README.md index ed93aedc4..4c6263310 100644 --- a/training/phaser/basics/de/README.md +++ b/training/phaser/basics/de/README.md @@ -1,141 +1,213 @@ Game Engine - Grundlagen -======================== +========================= + Author: Markus Bordihn -Coding with Chrome +Coding with Chrome + +Inhaltsverzeichnis +------------------- -## Inhaltsverzeichnis * [Spiel](#spiel) * [Spielzustände](#spielzustände) * [Die verschiedenen Arten von Grafiken](#die-verschiedenen-arten-von-grafiken) * [Die verschiedenen Arten von Texten](#die-verschiedenen-arten-von-texten) * [Die verschiedene Arten der Eingabe](#die-verschiedene-arten-der-eingabe) -## Spiel -Ein Spiel kennt mehrere Spielzustände, die je nach Benutzeraktion ausgeführt werden. -Einfache Spiele haben einen Startbildschirm, den eigentlichen Spiele Bildschirm und evt. einen Highscore Bildschirm. +Spiel +------ + +Ein Spiel kennt mehrere Spielzustände, die je nach Benutzeraktion ausgeführt +werden. +Einfache Spiele haben einen Startbildschirm, den eigentlichen Spiele Bildschirm +und evt. einen Highscore Bildschirm. + +Spielzustände +-------------- -## Spielzustände -![][game_states] +![Game States Overview][game_states] Jeder Spielzustand ist weiter unterteilt in die nachfolgende 5 Bereiche. -Nicht immer werden alle 5 Bereiche verwendet, meistens werden nur die Bereiche **Vorausladen**, **Erstellen** und **Eingabe** verwendet. +Nicht immer werden alle 5 Bereiche verwendet, meistens werden nur die Bereiche +**Vorausladen**, **Erstellen** und **Eingabe** verwendet. ### Vorausladen -![][preload_area] -Hier werden alle verwendeten Grafiken und Sounddateien, die für das Spiel nötig sind festgelegt und vorausgeladen. -Bei den verwendeten Grafiken ist es wichtig dass diese so gut wie keinen Rand haben und gegf. einen transparenten Hintergrund besitzen. -Ansonsten kann es sein dass der Rand oder Hintergrund im Spiel sichtbar ist oder eine Figure schon vorher mit einem anderen Objekt zusammen stößt. +![Example Preload Area][preload_area] + +Hier werden alle verwendeten Grafiken und Sounddateien, die für das Spiel nötig +sind festgelegt und vorausgeladen. +Bei den verwendeten Grafiken ist es wichtig dass diese so gut wie keinen Rand +haben und gegf. einen transparenten Hintergrund besitzen. +Ansonsten kann es sein dass der Rand oder Hintergrund im Spiel sichtbar ist oder +eine Figure schon vorher mit einem anderen Objekt zusammen stößt. ### Erstellen -![][create_area] + +![Example Create Area][create_area] Hier wird das allgemeines Aussehen der Spielfäche festgelegt. -Es wird also genau definiert wo welche Grafik erscheinen soll und auch um welche Art es sich handelt. -Grundsätzlich gibt es bei Spielen verschiedene Arten von Grafiken und Objekten mit unterschiedlichen Eigenschaften. +Es wird also genau definiert wo welche Grafik erscheinen soll und auch um welche +Art es sich handelt. +Grundsätzlich gibt es bei Spielen verschiedene Arten von Grafiken und Objekten +mit unterschiedlichen Eigenschaften. ### Eingabe -![][input_area] -Hier wird festgelegt was passiert wenn eine Eingabe per Maus, Tastatur oder auf dem Bildschirm erfolgt. +![Example Input Area][input_area] + +Hier wird festgelegt was passiert wenn eine Eingabe per Maus, Tastatur oder auf +dem Bildschirm erfolgt. ### Aktualisieren -![][update_area] -In diesem Bereich wird festgelegt was passiert, wenn zwei Objekte zusammenstoßen oder den sichtbaren Spielebereich verlassen. +![Example Update Area][update_area] + +In diesem Bereich wird festgelegt was passiert, wenn zwei Objekte zusammenstoßen +oder den sichtbaren Spielebereich verlassen. ### Ausgabe -![][render_area] -Bei den meisten Spielen wird der anzuzeigende Inhalt ca. 60 mal in der Sekunde (60fps) aktualisiert. -Dieser Bereich wird meist nur für die Fehlersuche verwendet um sich z.B. die Position von verschiedenen Objekten anzeigen zu lassen. +![Example Render Area][render_area] + +Bei den meisten Spielen wird der anzuzeigende Inhalt ca. 60 mal in der Sekunde +(60fps) aktualisiert. +Dieser Bereich wird meist nur für die Fehlersuche verwendet um sich z.B. die +Position von verschiedenen Objekten anzeigen zu lassen. + +Die verschiedenen Arten von Grafiken +------------------------------------- -## Die verschiedenen Arten von Grafiken Die Grundarten von Grafiken kann in 4 Bereiche unterteilt werden. ### Bild -Das ist die einfachste Art einer Grafik, diese wird meist einfach nur auf dem Bildschirm angezeigt und hat eine feste Position. -Dies kann ein einfaches Logo, Hintergrundbild oder auch einfach nur eine Grafik sein um den Bildschirm zu verschönern. + +Das ist die einfachste Art einer Grafik, diese wird meist einfach nur auf dem +Bildschirm angezeigt und hat eine feste Position. +Dies kann ein einfaches Logo, Hintergrundbild oder auch einfach nur eine Grafik +sein um den Bildschirm zu verschönern. ### Sprite -![][sprite] -Ein Sprite ist eine erweiterte Art der Grafik und erlaubt weitere Eigenschaften wie einfache Veränderungen, reagieren auf Eingabe / Ereignisse, Animationen und mehr. +![Sprite Block][sprite] + +Ein Sprite ist eine erweiterte Art der Grafik und erlaubt weitere Eigenschaften +wie einfache Veränderungen, reagieren auf Eingabe / Ereignisse, Animationen und +mehr. Diese Art der Grafik wird meist am häufigsten beim Spielen verwendet. ### Tile Sprite -![][tile_sprite] -Ein Tile Sprite ist ein Sprite das sich selbst wiederholt und meist auch animiert ist. -Diese Art der Grafik wird meist für den Boden / Decke oder sich bewegende Hintergründe verwendet. +![Tile Sprite Block][tile_sprite] + +Ein Tile Sprite ist ein Sprite das sich selbst wiederholt und meist auch +animiert ist. +Diese Art der Grafik wird meist für den Boden / Decke oder sich bewegende +Hintergründe verwendet. ### Physik Sprite -![][physic_sprite] -Ein Physik Sprite ist im Grunde eine erweiterte Art des Sprite mit dem Unterschied dass man physikalische Eigenschaften festlegen kann wie z.B. Anziehungskraft, Schwerkraft, Beschleunigung. -Diese Art der Grafik findet Verwendung bei allen beweglichen Grafiken die Einfluss auf das Spiel haben wie z.B. der Spielfigure oder auch Hindernissen. +![Physic Sprite Block][physic_sprite] + +Ein Physik Sprite ist im Grunde eine erweiterte Art des Sprite mit dem +Unterschied dass man physikalische Eigenschaften festlegen kann wie z.B. +Anziehungskraft, Schwerkraft, Beschleunigung. +Diese Art der Grafik findet Verwendung bei allen beweglichen Grafiken die +Einfluss auf das Spiel haben wie z.B. der Spielfigure oder auch Hindernissen. -## Die verschiedenen Arten von Texten -Texte können im **Anlegen** Bereich erstellt werden, wobei man die folgenden drei Arten unterscheidet. +Die verschiedenen Arten von Texten +----------------------------------- + +Texte können im **Anlegen** Bereich erstellt werden, wobei man die folgenden +drei Arten unterscheidet. ### Einfache Texte -![][text_block] -Die einfachste Art eines Text, wird auf dem Bildschirm angezeigt z.B. der Spiele Titel oder sonstige Beschriftungen. +![Text Block][text_block] + +Die einfachste Art eines Text, wird auf dem Bildschirm angezeigt z.B. der Spiele +Titel oder sonstige Beschriftungen. ### Dynamische Texte -![][dynamic_text_block] + +![Dynamic Text Block][dynamic_text_block] Dynamische Texte werden verwendet wenn der Textinhalt sich ändert. -Sie zeigen zum Beispiel die Highscore, die vorhandenen Leben oder das aktuelle Spiel Level an. +Sie zeigen zum Beispiel die Highscore, die vorhandenen Leben oder das aktuelle +Spiel Level an. ### Aktion Texte -![][action_text_block] -Bei Aktion Texte kann festgelegt werden, was bei einem Klick auf den Text passieren soll. -Der häufigste Anwendungsfall ist der **Starte Game** Text beim Anfang eines Spieles. +![Action Text Block][action_text_block] + +Bei Aktion Texte kann festgelegt werden, was bei einem Klick auf den Text +passieren soll. +Der häufigste Anwendungsfall ist der **Starte Game** Text beim Anfang eines +Spieles. -## Die verschiedene Arten der Eingabe -Die meisten Spiele lassen sich wahlweise entweder per Maus, Tastatur oder Bildschirm steuern. +Die verschiedene Arten der Eingabe +----------------------------------- + +Die meisten Spiele lassen sich wahlweise entweder per Maus, Tastatur oder +Bildschirm steuern. ### Festlegen der Eingabe Überwachung -Zuerst muss im **Anlegen** Bereich festgelegt werden welche Art von Eingabe erfasst werden soll. + +Zuerst muss im **Anlegen** Bereich festgelegt werden welche Art von Eingabe +erfasst werden soll. Dies kann eine einzelne Taste, die Pfeiltasten oder die Maustaste sein. #### Vordefinierte Tastatur Tasten -![][capture_spacebar] -Bei Spielen, die nur eine Eingabe benötigen, ist die Leertaste die einfachste Wahl. +![Capture Spacebar Block][capture_spacebar] + +Bei Spielen, die nur eine Eingabe benötigen, ist die Leertaste die einfachste +Wahl. Diese wird auch meist verwendet um eine Figure springen zu lassen. #### Speziele Tastatur Taste -![][capture_keyboard_key] -Falls gewünscht können natürlich auch andere Tasten verwendet werden, wie ASDW welche häufig als Alternative für die Pfeiltasten verwendet werden. +![Capture Keyboard key Block][capture_keyboard_key] + +Falls gewünscht können natürlich auch andere Tasten verwendet werden, wie ASDW +welche häufig als Alternative für die Pfeiltasten verwendet werden. #### Pfeiltasten -![][capture_cursor_keys] -Die Pfeiltasten werden für die Steuerung der Figure nach oben, unten, rechts und links verwendet. +![Capture Cursor keys Block][capture_cursor_keys] + +Die Pfeiltasten werden für die Steuerung der Figure nach oben, unten, rechts und +links verwendet. #### Maustasten / Touch Bildschirm -![][capture_mouse_keys] -Für alle Geräte die keine Tastatur haben, eignet sich die Maustaste oder der Touch-Bildschirm als Eingabegerät. +![Capture Mouse Keys Block][capture_mouse_keys] + +Für alle Geräte die keine Tastatur haben, eignet sich die Maustaste oder der +Touch-Bildschirm als Eingabegerät. ### Festlegen der Aktionen -Anschließend muss im **Eingabe** Bereich festgelegt werden was bei einem Tastendruck passieren soll. -Hierbei unterscheidet man zwei Arten **beim betätigen** und **beim gedrückt lassen**. + +Anschließend muss im **Eingabe** Bereich festgelegt werden was bei einem +Tastendruck passieren soll. +Hierbei unterscheidet man zwei Arten **beim betätigen** und +**beim gedrückt lassen**. #### Beim betätigen -Beim betätigen führt die Aktion immer nur einmal aus wenn eine Taste gedrückt ist. -Dies wird für das Springen einer Figure verwendet oder in allen Fällen, in denen eine Aktion nur einmal ausgeführt werden soll. -![][input_key_down] + +Beim betätigen führt die Aktion immer nur einmal aus wenn eine Taste gedrückt +ist. +Dies wird für das Springen einer Figure verwendet oder in allen Fällen, +in denen eine Aktion nur einmal ausgeführt werden soll. +![Input Key Down Condition][input_key_down] #### Beim gedrückt lassen -Beim gedrückt lassen wird die Aktion, solange die Taste gedrückt ist, mehrmals ausgeführt. -Dies ist hilfreich wenn man den Spieler in verschiedene Richtungen bewegen will ohne jedesmal erneut auf die Taste drücken zu müssen. -![][input_key_pressed] + +Beim gedrückt lassen wird die Aktion, solange die Taste gedrückt ist, +mehrmals ausgeführt. +Dies ist hilfreich wenn man den Spieler in verschiedene Richtungen bewegen will +ohne jedesmal erneut auf die Taste drücken zu müssen. +![Input Key Pressed Condition][input_key_pressed] [game_states]: images/game_states.png diff --git a/training/phaser/simple_jump_and_run_game/de/README.md b/training/phaser/simple_jump_and_run_game/de/README.md index 6f4b3cfb9..55a831845 100644 --- a/training/phaser/simple_jump_and_run_game/de/README.md +++ b/training/phaser/simple_jump_and_run_game/de/README.md @@ -1,14 +1,18 @@ Einfaches Jump ’n’ Run Spiel -============================ +============================= + Author: Markus Bordihn -## Inhaltsverzeichnis +Inhaltsverzeichnis +------------------- + * [Einleitung](#einleitung) * [Anforderungen](#anforderungen) * [1. Ein Spiel erstellen](#ein-spiel-erstellen) * [2. Laden benötigter Bilder und Sounds](#laden-benötigter-bilder-und-sounds) -Coding with Chrome + * [3. Erstellen der Welt](#erstellen-der-welt) * [Hintergrundbild einfügen](#hintergrundbild-einfügen) @@ -27,58 +31,80 @@ Author: Markus Bordihn * [10. Soundeffekte hinzufügen](#soundeffekte-hinzufügen) * [11. Game verschönern](#game-verschönern) -## Einleitung -Dieser Workshop richtet sich an Anfänger die immer schon mal ein eigenes Spiel entwickeln wollten. -Ihr lernt die Grundlage der Spieleentwicklung und wie eine Spiele Engine grundlegend funktioniert. +Einleitung +----------- + +Dieser Workshop richtet sich an Anfänger die immer schon mal ein eigenes Spiel +entwickeln wollten. +Ihr lernt die Grundlage der Spieleentwicklung und wie eine Spiele Engine +grundlegend funktioniert. -Zum programmieren wird eine Block-basierte Programmierung mit vordefinierten Blöcke verwendet. +Zum programmieren wird eine Block-basierte Programmierung mit vordefinierten +Blöcke verwendet. Diese Blöcke setzt Ihr einfach für euer Spiel zusammen. Hierzu wird _Coding with Chrome_ verwendet, welches kostenfrei erhältlich ist. -## Anforderungen -Für diesen Workshop solltet Ihr euch bereits mit dem Spiele Editor in Coding with Chrome beschäftigt haben und eine Übersicht der verschiedenen “Blöcke” haben. +Anforderungen +-------------- -Es werde einige Spiele spezifische Begriffe verwenden, die ausführlich in [Grundlagen Games](../../basic/de/README.md) erklärt werden. +Für diesen Workshop solltet Ihr euch bereits mit dem Spiele Editor in +Coding with Chrome beschäftigt haben und eine Übersicht der verschiedenen +“Blöcke” haben. -## Ein Spiel erstellen -Wählt im Anfänger Modus **Ein Spiel erstellen** aus und erstellst ein **Neues Projekt**. +Es werde einige Spiele spezifische Begriffe verwenden, die ausführlich in +[Grundlagen Games](../../basic/de/README.md) erklärt werden. + +Ein Spiel erstellen +-------------------- + +Wählt im Anfänger Modus **Ein Spiel erstellen** aus und erstellst ein +**Neues Projekt**. Dies sollte dann in etwa wie folgt aussehen: -![][empty_game] +![Empty Game Block][empty_game] -Anschließend legt du den Namen des Spiels und die Dimension (die Größer der Spielfläche) fest. +Anschließend legt du den Namen des Spiels und die Dimension +(die Größer der Spielfläche) fest. Für dieses Tutorial verwenden wir eine Dimension von 400x600. -![][game_name_dimension] +![Name and Dimension field for Game Block][game_name_dimension] + +Laden benötigter Bilder und Sounds +----------------------------------- -## Laden benötigter Bilder und Sounds -Danach müssen wir uns um das Aussehen (Hintergrund, Spielfigur, Boden, Hindernisse, …) des Spiel Gedanken machen. +Danach müssen wir uns um das Aussehen (Hintergrund, Spielfigur, Boden, +Hindernisse, …) des Spiel Gedanken machen. Fügt hierzu alle Bilder die Ihr verwenden wollt in eure **Datei Bibliothek** hinzu. Diese erreicht Ihr über die Sidebar: -![][sidebar_file_library] +![File Library in the Sidebar][sidebar_file_library] Alternative könnt Ihr auch **Öffne Datei Bibliothek** unter **Dateien** verwenden: -![][files_file_library] +![File Library under Files section][files_file_library] -Sobald Ihr alle benötigten Bilder und Sound Dateien hochgeladen habt, könnt Ihr das **Datei Bibliothek** Fenster schließen. +Sobald Ihr alle benötigten Bilder und Sound Dateien hochgeladen habt, könnt Ihr +das **Datei Bibliothek** Fenster schließen. Ihr könnt natürlich später jederzeit weitere Dateien hinzufügen oder ändern. -Unter den Punkt **Dateien** findet Ihr eure hochgeladenen Dateien, zusätzlich befinden sich unter **Beispiel Dateien** ein paar allgemeine Beispielbilder. +Unter den Punkt **Dateien** findet Ihr eure hochgeladenen Dateien, zusätzlich +befinden sich unter **Beispiel Dateien** ein paar allgemeine Beispielbilder. -![][example_files] +![Example Files under Example Files][example_files] -Zieht eure Bilder anschließend von dem **Dateien** Bereich in euren **beim Vorausladen …** Block und passt den Namen der Bilder an. +Zieht eure Bilder anschließend von dem **Dateien** Bereich in euren +**beim Vorausladen …** Block und passt den Namen der Bilder an. -![][preload_image] +![Preload Image Block][preload_image] -![][preload_image_name] +![Name field in Preload Image Block][preload_image_name] -Verwendet hierfür die folgenden vordefinierten Namen damit ihr nachher weniger ändern müsst. -Solltet Ihr andere Namen verwenden, achtet bitte darauf diese in den entsprechenden Blöcken anzupassen. +Verwendet hierfür die folgenden vordefinierten Namen damit ihr nachher weniger +ändern müsst. +Solltet Ihr andere Namen verwenden, achtet bitte darauf diese in den +entsprechenden Blöcken anzupassen. Vordefinierte Name | wird verwendet als ------------ | ------------- @@ -87,156 +113,220 @@ floor | Boden player | Spielfigur obstacles | Hindernisse -![][preload_image_example] +![Preload Image Block Example][preload_image_example] -## Erstellen der Welt -Nun müssen die Grafiken noch in die Spielwelt hinzugefügt werden, damit diese sichtbar im Spiel sind. -Alle dafür benötigten Blöcke findet Ihr in dem Bereich **Erstellen** und werden in den **beim Erstellen …** Block gezogen. +Erstellen der Welt +------------------- + +Nun müssen die Grafiken noch in die Spielwelt hinzugefügt werden, damit diese +sichtbar im Spiel sind. +Alle dafür benötigten Blöcke findet Ihr in dem Bereich **Erstellen** und werden +in den **beim Erstellen …** Block gezogen. ### Hintergrundbild einfügen + Zuerst fügen wir ein sich bewegendes Hintergrundbild hinzu. -Klickt hierfür auf **Tile Sprite** und zieht den Block **füge Hintergrundbild hinzu …** in den **beim Erstellen …** Block. +Klickt hierfür auf **Tile Sprite** und zieht den Block **füge Hintergrundbild +hinzu …** in den **beim Erstellen …** Block. -![][create_tile_sprite] +![Create Tile Sprite Block][create_tile_sprite] ### Text einfügen -Um einen Text hinzuzufügen klickt auf **Text Objekt** und benützt den **hinzufügen von Text …** Block den Ihr in den beim **Erstellen …** Block zieht. -![][create_text_object] +Um einen Text hinzuzufügen klickt auf **Text Objekt** und benützt den +**hinzufügen von Text …** Block den Ihr in den beim **Erstellen …** Block zieht. + +![Create Text Object Block][create_text_object] ### Boden hinzufügen -Für den Boden verwenden wir den Block **definiere … als Boden …** und fügen diesen in den **beim Erstellen …** Block hinzu. -![][create_floor] +Für den Boden verwenden wir den Block **definiere … als Boden …** und fügen +diesen in den **beim Erstellen …** Block hinzu. -Bei den Boden könnt Ihr auch die Geschwindigkeit anpassen oder einfach beide Werte auf 0 setzen damit dieser sich nicht mehr bewegt. +![Create Floor Block][create_floor] + +Bei den Boden könnt Ihr auch die Geschwindigkeit anpassen oder einfach beide +Werte auf 0 setzen damit dieser sich nicht mehr bewegt. Am Ende solltet Ihr ca. folgendes haben: -![][create_world] +![Overview of the current Blocks for the World][create_world] + +Erstellen der Spielfigur +------------------------- +Seid Ihr mit eurer Welt zufrieden, fügen wir für Spielfigure als Arcade Sprite +hinzu, damit wir diese später auch bewegen können. -## Erstellen der Spielfigur -Seid Ihr mit eurer Welt zufrieden, fügen wir für Spielfigure als Arcade Sprite hinzu, damit wir diese später auch bewegen können. +![Create Player Block][create_player] -![][create_player] +Sollte die Spielfigur zu klein/groß sein, so können wir die Größe mit folgenden +Block anpassen: -Sollte die Spielfigur zu klein/groß sein, so können wir die Größe mit folgenden Block anpassen: +![Scale Player Block][create_player_scale] -![][create_player_scale] +Physikalische Eigenschaften definieren +--------------------------------------- -## Physikalische Eigenschaften definieren -Um das Spiel interessanter zu machen fügen wir der Spielfigure physikalische Eigenschaften hinzu. +Um das Spiel interessanter zu machen fügen wir der Spielfigure physikalische +Eigenschaften hinzu. ### Schwerkraft / Anziehungskraft -Damit unsere Figure nicht einfach in der Luft schwebt, fügen wir eine Anziehungskraft nach unten gereichte (y-Achse) von ca. 200 hinzu. -Zieht hierfür einfach den Block **setze Physik Sprite…** unter den **beim Erstellen …** Block. -![][create_player_physics] +Damit unsere Figure nicht einfach in der Luft schwebt, fügen wir eine +Anziehungskraft nach unten gereichte (y-Achse) von ca. 200 hinzu. +Zieht hierfür einfach den Block **setze Physik Sprite…** unter den +**beim Erstellen …** Block. -Wählt anschließend “Anziehungskraft y” aus der Auswahlliste des Blocks aus und verwendet einen Wert von ca. 200. +![Create Player Physics Block][create_player_physics] -![][create_player_physics_block] +Wählt anschließend “Anziehungskraft y” aus der Auswahlliste des Blocks aus und +verwendet einen Wert von ca. 200. + +![Create Player Physic Block with value][create_player_physics_block] ### Kollision + Derzeit fällt unsere Figure einfach durch den Boden. -Um diese zu verhindern müssen wir eine Kollision zwischen der Spielfigure und unseren Boden definieren. +Um diese zu verhindern müssen wir eine Kollision zwischen der Spielfigure und +unseren Boden definieren. + +Klickt hierfür auf **Aktualisieren** und geht dann wieder in den +**Physik Sprite** Bereich. +Hier zieht Ihr den Block **… kollidiert mit …** in dem **beim Aktualisieren …** +Block. -Klickt hierfür auf **Aktualisieren** und geht dann wieder in den **Physik Sprite** Bereich. -Hier zieht Ihr den Block **… kollidiert mit …** in dem **beim Aktualisieren …** Block. +![Player collodate with ... Block][create_player_physics_collide] -![][create_player_physics_collide] +Steuerung hinzufügen +--------------------- -## Steuerung hinzufügen -Um unsere Spielfigure steuern zu können müssen wir zuerst festlegen wie wir diese steuern möchten. +Um unsere Spielfigure steuern zu können müssen wir zuerst festlegen wie wir +diese steuern möchten. Um dies so einfach wie Möglich zu machen verwenden wir hierfür die Leertaste. ### Eingabe überwachen + Klickt auf **Erstellen** und wählt **Eingaben** aus. -Hier zieht ihr den **definiere … erfasse als Tastatur Leertaste** in euren beim **Erstellen Block**. +Hier zieht ihr den **definiere … erfasse als Tastatur Leertaste** in euren beim +**Erstellen Block**. -![][create_input] +![Create Input Block][create_input] ### Aktion bei Eingabe festlegen -Damit auch etwas mit unsere Spielfigur passiert sobald die Leertaste gedrückt wird, müssen wir noch die entsprechende Aktion festlegen. -Klickt hierzu auf **Eingabe** und zieht den Block **falls spacebar beim betätigen mache** Block in euren **bei Eingabe …** Block. +Damit auch etwas mit unsere Spielfigur passiert sobald die Leertaste gedrückt +wird, müssen wir noch die entsprechende Aktion festlegen. + +Klickt hierzu auf **Eingabe** und zieht den Block +**falls spacebar beim betätigen mache** Block in euren **bei Eingabe …** Block. -![][input_spacebar] +![Input Spacebar Condition][input_spacebar] -Geht anschließend auf die **Physik Sprite** Blöcke und zieht den Block **setzte Physik Sprite … nach …** in den **mache …** Bereich des vorherigen Blocks. +Geht anschließend auf die **Physik Sprite** Blöcke und zieht den Block +**setzte Physik Sprite … nach …** in den **mache …** Bereich des vorherigen +Blocks. -![][input_spacebar_do] +![Input Spacebar Condition with Action][input_spacebar_do] -Wählt anschließend aus der Auswahlbox **Geschwindigkeit y** aus und setzt einen Wert von **-150**. +Wählt anschließend aus der Auswahlbox **Geschwindigkeit y** aus und setzt einen +Wert von **-150**. -![][input_spacebar_do_example] +![Input Spacebar Condition full Example][input_spacebar_do_example] Nun sollte eure Figure beim drücken der Leertaste springen. -## Hindernisse hinzufügen -Für die Hindernisse verwenden wir einen vordefinierten Hindernisse Generator Block. -Da wir aber in bestimmten Abständen Hindernisse erzeugen wollen, verwenden wir den **Wiederhole alle … millisekunden** Block. -Diesen finden wir unter **Erstellen** und ziehen diesen in den **beim Erstellen …** Block. +Hindernisse hinzufügen +----------------------- + +Für die Hindernisse verwenden wir einen vordefinierten Hindernisse Generator +Block. +Da wir aber in bestimmten Abständen Hindernisse erzeugen wollen, verwenden wir +den **Wiederhole alle … millisekunden** Block. +Diesen finden wir unter **Erstellen** und ziehen diesen in den +**beim Erstellen …** Block. -![][create_loop] +![Create Loop Block][create_loop] -Danach fügen wir den Generator hinzu, diesen finden wir unter **Erstellen → Generatoren**. +Danach fügen wir den Generator hinzu, diesen finden wir unter +**Erstellen → Generatoren**. Diesen Block ziehen wir direkt im **Wiederhole alle … millisekunden** Block. -![][create_generator] +![Create Generator Block][create_generator] Nun solltet Ihr die ersten Hindernisse in eurem Spiel sehen. -## Highscore hinzufügen -Für die Highscore verwenden wir den sogenannten **dynamischen Text**, damit wir den Inhalt einfach ändern können. +Highscore hinzufügen +--------------------- + +Für die Highscore verwenden wir den sogenannten **dynamischen Text**, +damit wir den Inhalt einfach ändern können. Dieser befindet sich unter **Erstellen → Text Objekt**. -Fügt den Block **definiere highscore als dynamischen Text …** in den **beim Erstellen …** Bereich hinzu und passt die Position, Farbe, Größe und Aussehen an. +Fügt den Block **definiere highscore als dynamischen Text …** in den +**beim Erstellen …** Bereich hinzu und passt die Position, Farbe, Größe und +Aussehen an. + +![Dynamic Text Block][dynamic_text] -![][dynamic_text] +Damit die Highscore automatisch erhöht wird, ziehen wir den +**ändere highscore Text zu erhalte Text ...** Block in die bereits vorhandene +Wiederholungsschleife. -Damit die Highscore automatisch erhöht wird, ziehen wir den **ändere highscore Text zu erhalte Text ...** Block in die bereits vorhandene Wiederholungsschleife. +![Dynamic Text Block inside Loop][dynamic_text_loop] -![][dynamic_text_loop] +![Final Dynamic text inside Loop][dynamic_text_loop_block] -![][dynamic_text_loop_block] +Spielende durch Kollision mit den Hindernissen +----------------------------------------------- -## Spielende durch Kollision mit den Hindernissen -Die einfachste Möglichkeit um das Ende des Spiel festzulegen, ist eine Kollisionsüberprüfung ob der Spieler die Hindernissen berührt hat. +Die einfachste Möglichkeit um das Ende des Spiel festzulegen, ist eine +Kollisionsüberprüfung ob der Spieler die Hindernissen berührt hat. -Wir fügen also in dem **beim Aktualisieren …** Bereich eine Kollisionsüberprüfung zwischen dem Spieler und den Hindernissen hinzu. +Wir fügen also in dem **beim Aktualisieren …** Bereich eine +Kollisionsüberprüfung zwischen dem Spieler und den Hindernissen hinzu. -![][update_collision_block] +![Collision Condition][update_collision_block] Anschließend sagen wir dem Programm was es bei einer Kollision machen soll. Hierzu verwenden wir den **Spiel neustarten** Block aus dem **Spiel** Bereich. -![][game_restart] +![Game restart Block][game_restart] + +Diesen Block ziehen wir in die Kollisionsüberprüfung zwischen unsere Spielfigur +und den Hindernissen. -Diesen Block ziehen wir in die Kollisionsüberprüfung zwischen unsere Spielfigur und den Hindernissen. +![Full Clossion Condition example][update_collision_example] -![][update_collision_example] +Soundeffekte hinzufügen +------------------------ -## Soundeffekte hinzufügen -Zusätzlich könnt ihr Soundeffekte hinzufügen die beim drücken einer Taste oder bei einer Kollision abgespielt werden. +Zusätzlich könnt ihr Soundeffekte hinzufügen die beim drücken einer Taste oder +bei einer Kollision abgespielt werden. -Zuerst müsst Ihr die entsprechenden Sounds hochladen und unter **Vorausladen** hinzufügen und den Namen anpassen. +Zuerst müsst Ihr die entsprechenden Sounds hochladen und unter +**Vorausladen** hinzufügen und den Namen anpassen. -![][preload_sound] +![Preload Sound Block][preload_sound] -Anschließend wird der Sound unter **Erstellen** als **definiere … als Audio …** hinzugefügt. +Anschließend wird der Sound unter **Erstellen** als **definiere … als Audio …** +hinzugefügt. -![][preload_sound_example] +![Preload Sound Example][preload_sound_example] -Nun könnt Ihr mit dem Block **spiele Audio …** an jeder beliebigen Stelle den enstprechenden Sound abspielen. +Nun könnt Ihr mit dem Block **spiele Audio …** an jeder beliebigen Stelle den +enstprechenden Sound abspielen. -![][input_play_audio] +![Input Player Block][input_play_audio] -## Game verschönern -Zum Schluss verschönern wir das Spiel noch, indem wir zusätzliche Grafiken hinzufügen oder aber einen Start bzw. End Bildschirm. +Game verschönern +----------------- -## Komplettes Spiel -![][full_game] +Zum Schluss verschönern wir das Spiel noch, indem wir zusätzliche Grafiken +hinzufügen oder aber einen Start bzw. End Bildschirm. +Komplettes Spiel +----------------- + +![Full Game][full_game] [empty_game]: images/empty_game.png [game_name_dimension]: images/game_name_dimension.png @@ -275,7 +365,6 @@ Zum Schluss verschönern wir das Spiel noch, indem wir zusätzliche Grafiken hin [game_restart]: images/game_restart.png [update_collision_example]: images/update_collision_example.png - [preload_sound]: images/preload_sound.png [preload_sound_example]: images/preload_sound_example.png [input_play_audio]: images/input_play_audio.png