4ian/GDevelop
1
0
Fork 0
mirror of https://github.com/4ian/GDevelop.git synced 2026-10-12 02:01:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update readmes and docs to mention TypeScript

Browse Source
This commit is contained in:
Florian Rival
2021-01-08 22:32:31 +01:00
parent 542d0bceba
commit 87883290e5
3 changed files with 31 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Core/GDevelop-Architecture-Overview.md
+12 -12
View File
@@ -5,11 +5,11 @@ GDevelop is architectured around a `Core` library, platforms (`GDJS`, `GDCpp`) a
| Directory | ℹ️ Description |
| --- | --- |
| `Core` | GDevelop core library, containing common tools to implement the IDE and work with GDevelop games. |
| `GDCpp` | GDevelop C++ game engine, used to **build native games**. |
| `GDJS` | GDevelop JS game engine, used to build **HTML5 games**. |
| `GDevelop.js` | Bindings of Core/GDCpp/GDJS and Extensions to JavaScript (used by the IDE). |
| `newIDE` | The game editor, written in JavaScript with React, Electron and Pixi.js. |
| `Extensions` | Extensions for C++ or JS game engines, providing objects, events and new features. |
| `GDCpp` | The C++ game engine, used to build native games (*not used in GDevelop 5*). |
| `GDJS` | The game engine, written in TypeScript, using PixiJS (WebGL), powering all GDevelop games. |
| `GDevelop.js` | Bindings of `Core`/`GDCpp`/`GDJS` and `Extensions` to JavaScript (with WebAssembly), used by the IDE. |
| `newIDE` | The game editor, written in JavaScript with React, Electron and PixiJS. |
| `Extensions` | Extensions for the game engine, providing objects, behaviors, events and new features. |
The rest of this page is an introduction to the main concepts of GDevelop architecture.
@@ -26,16 +26,16 @@ The rest of this page is an introduction to the main concepts of GDevelop archit
Extensions do have the same distinction between the "**IDE**" part and the "**Runtime**" part. For example, most extensions have:
* A file called [`JsExtension.js`(https://github.com/4ian/GDevelop/blob/master/Extensions/ExampleJsExtension/JsExtension.js)], which contains the *declaration* of the extension for the **IDE**
* One or more files implementing the feature for the game, in other words for **Runtime**. This can be a [Runtime Object](https://github.com/4ian/GDevelop/blob/master/Extensions/ExampleJsExtension/dummyruntimeobject.js) or a [Runtime Behavior](https://github.com/4ian/GDevelop/blob/master/Extensions/ExampleJsExtension/dummyruntimebehavior.js), [functions called by actions or conditions](https://github.com/4ian/GDevelop/blob/master/Extensions/ExampleJsExtension/examplejsextensiontools.js) or by the game engine.
* One or more files implementing the feature for the game, in other words for **Runtime**. This can be a [Runtime Object](https://github.com/4ian/GDevelop/blob/master/Extensions/ExampleJsExtension/dummyruntimeobject.ts) or a [Runtime Behavior](https://github.com/4ian/GDevelop/blob/master/Extensions/ExampleJsExtension/dummyruntimebehavior.ts), [functions called by actions or conditions](https://github.com/4ian/GDevelop/blob/master/Extensions/ExampleJsExtension/examplejsextensiontools.ts) or by the game engine.
### "Runtime" and "IDE" difference using an example: the `gd::Variable` class
In GDevelop, developers can associate and manipulate variables in their games. To represent them, we have two things:
* The **editor** `gd::Variable` that is part of the structure of the game, so living in [GDCore in Variable.h](https://4ian.github.io/GD-Documentation/GDCore%20Documentation/classgd_1_1_variable.html). This is what is shown in the editor, saved on disk in the project file.
* The **game engine** variable, called `gdjs.Variable` in GDJS. [Documentation is in the GDJS **game engine**](https://docs.gdevelop-app.com/GDJS%20Runtime%20Documentation/gdjs.Variable.html). This JavaScript class is what is used during a game.
* The **game engine** variable, called `gdjs.Variable` in GDJS. [Documentation is in the GDJS **game engine**](https://docs.gdevelop-app.com/GDJS%20Runtime%20Documentation/Variable.html). This JavaScript class is what is used during a game.
The editor `gd::Variable` **know nothing** about the game engine class `gdjs.Variable`. And the `gdjs.Variable` class in the game engine know almost nothing from `gd::Variable` (apart from how it's written in JSON, to be able to load a game default variables).
The editor `gd::Variable` **knows nothing** about the game engine class `gdjs.Variable`. And the `gdjs.Variable` class in the game engine knows almost nothing from `gd::Variable` (apart from how it's written in JSON, to be able to load a game default variables).
> Note that the name `gdjs.Variable` is maybe a *bad decision*: it should have been called a `gdjs.RuntimeVariable`, like `gdjs.RuntimeObject` and like most other classes of the game engine.
@@ -53,7 +53,7 @@ While `GDJS/Runtime` folder is the game engine that is executed inside a game, `
* What are [the default extensions](https://github.com/4ian/GDevelop/tree/master/GDJS/GDJS/Extensions/Builtin),
* How do you [generate JS code from events](https://github.com/4ian/GDevelop/tree/master/GDJS/GDJS/Events/CodeGeneration),
The game engine is in GDJS/Runtime and is all JavaScript.
The game engine is in GDJS/Runtime and is all written in TypeScript.
## What about events?
@@ -68,7 +68,7 @@ A `gd::Instruction` is "just" a type (the name of the action or condition), and
They do not exist anymore! ✨
Events are translated (we also say "transpiled" or "generated") into "real" code in a programming language. This process is called "Code Generation", and is [done here for the JavaScript game engine](https://github.com/4ian/GDevelop/tree/master/GDJS/GDJS/Events/CodeGeneration).
Events are translated (we also say "transpiled" or "generated") into "real" code in a programming language. This process is called "Code Generation", and is [done here for the TypeScript game engine](https://github.com/4ian/GDevelop/tree/master/GDJS/GDJS/Events/CodeGeneration).
### Can I extract Events classes and code generator to make a development environment based on GDevelop events?
@@ -79,7 +79,7 @@ You're welcome to do so! Please get in touch :)
The idea of GDevelop editor and game engine is to have a lean game engine, supporting almost nothing. Then, one can add "mods", "plugins", "modules" for GDevelop. We chose to call them "**Extensions**" in GDevelop.
* `GDevelop/Core/GDCore/Extensions` is the **declaration** of default (we say "builtin") extensions, that are available for any game and are "mandatory". They are called Extensions but they could be named "Extensions that will always be in your game". In programming languages, this is called a "[Standard Library](https://en.wikipedia.org/wiki/Standard_library)" (but don't get too distracted by this naming).
* `GDevelop/GDJS/GDJS/Extensions/` and `GDevelop/GDCpp/GDCpp/Extensions/` are reusing these **declarations** and **adding** their own declarations. Mainly, they are setting the name of the functions to be called (either in JS or in C++) for each action, condition or expression.
* `GDevelop/GDJS/GDJS/Extensions/` and `GDevelop/GDCpp/GDCpp/Extensions/` are reusing these **declarations** and **adding** their own declarations. Mainly, they are setting the name of the functions to be called (either in TypeScript or in C++) for each action, condition or expression.
* `GDevelop/Extensions/` is the folder for the "mods"/"plugins" for GDevelop - the one that are not mandatory. They are not part of GDCore - they work on their own.
> In theory, all extensions could be moved to `GDevelop/Extensions/`. In practice, it's more pragmatic to have a set of "builtin" extensions with basic features.
@@ -111,7 +111,7 @@ All the required C++ files are imported into this huge list: https://github.com/
GDevelop was originally written in C++. It's a scary language at first but is portable across almost any existing machine in this universe, can be pretty good, safe and readable with the latest C++ features.
### What's the deal with JavaScript? Why so much of it?
### What's the deal with JavaScript/TypeScript? Why so much of it?
JavaScript, with the latest language proposals, is actually a very capable language, fast to write and safe with typing:
Readme.md
+6 -6
View File
@@ -1,6 +1,6 @@
![GDevelop logo](https://raw.githubusercontent.com/4ian/GDevelop/master/Core/docs/images/gdlogo.png "GDevelop logo")
GDevelop is a full-featured, open-source game development software, allowing to create HTML5 and native games without any knowledge in a specific programming language. All the game logic is built up using an intuitive and powerful event-based system.
GDevelop is a full-featured, open-source game development software, allowing to create desktop and mobile games without any knowledge in a specific programming language. All the game logic is built up using an intuitive and powerful event-based system.
![GDevelop in action, used to add a trigger in a platformer game](https://raw.githubusercontent.com/4ian/GDevelop/master/Core/docs/images/demo.gif "GDevelop in action, used to add a trigger in a platformer game")
@@ -23,14 +23,14 @@ Overview of the architecture
| --- | --- |
| `Core` | GDevelop core library, containing common tools to implement the IDE and work with GDevelop games. |
| `GDCpp` | The C++ game engine, used to build native games (*not used in GDevelop 5*). |
| `GDJS` | The JavaScript game engine, using Pixi.js (WebGL), powering all GDevelop games. |
| `GDJS` | The game engine, written in TypeScript, using PixiJS (WebGL), powering all GDevelop games. |
| `GDevelop.js` | Bindings of `Core`/`GDCpp`/`GDJS` and `Extensions` to JavaScript (with WebAssembly), used by the IDE. |
| `newIDE` | The game editor, written in JavaScript with React, Electron and Pixi.js. |
| `Extensions` | Extensions for the C++ or JavaScript game engines, providing objects, behaviors, events and new features. |
| `newIDE` | The game editor, written in JavaScript with React, Electron and PixiJS. |
| `Extensions` | Extensions for the game engine, providing objects, behaviors, events and new features. |
To learn more about GDevelop Architecture, read the [architecture overview here](Core/GDevelop-Architecture-Overview.md).
A pre-generated documentation of the Core library, C++ and JS game engines is [available here](https://docs.gdevelop-app.com).
A pre-generated documentation of the Core library, C++ and TypeScript game engines is [available here](https://docs.gdevelop-app.com).
Status of the tests and builds: [![Build status](https://circleci.com/gh/4ian/GDevelop.svg?style=shield)](https://app.circleci.com/pipelines/github/4ian/GDevelop) [![Quick tests status](https://semaphoreci.com/api/v1/4ian/gd/branches/master/shields_badge.svg)](https://semaphoreci.com/4ian/gd) [![All tests Status](https://travis-ci.org/4ian/GDevelop.svg?branch=master)](https://travis-ci.org/4ian/GDevelop) [![Windows Build status](https://ci.appveyor.com/api/projects/status/84uhtdox47xp422x/branch/master?svg=true)](https://ci.appveyor.com/project/4ian/gdevelop/branch/master) [![https://good-labs.github.io/greater-good-affirmation/assets/images/badge.svg](https://good-labs.github.io/greater-good-affirmation/assets/images/badge.svg)](https://good-labs.github.io/greater-good-affirmation)
@@ -51,7 +51,7 @@ Links
### Games made with GDevelop
* See the [Showcase of games](https://gdevelop-app.com/games-showcase) created with GDevelop.
* See the [Showcase of games](https://gdevelop-app.com/games-showcase) created with GDevelop.
* Suggest your game to be [added to the showcase here](https://github.com/GDevelopApp/GDevelop-website-showcase/issues/new/choose).
![Lil Bub](http://compilgames.net/assets/bub/screenshots-background.jpg "GDevelop logo")
newIDE/README-extensions.md
+13 -13
View File
@@ -4,7 +4,7 @@ GDevelop editor and games engines are designed so that all objects, behaviors, e
are provided by _extensions_. These extensions are composed of two parts:
- the _declaration_ of the extension, traditionally done in a file called `JsExtension.js`.
- the _implementation_ of the extension for the game engine (also called the "Runtime"), containing the functions corresponding to the actions/conditions/expressions and the classes used for the objects or behaviors. The implementation is traditionally in files called `extensionnametools.js`, `objectnameruntimeobject.js` or `objectnameruntimebehavior.js`.
- the _implementation_ of the extension for the game engine (also called the "Runtime"), written in [TypeScript](typescriptlang.org), containing the functions corresponding to the actions/conditions/expressions and the classes used for the objects or behaviors. The implementation is traditionally in files called `extensionnametools.ts`, `objectnameruntimeobject.ts` or `objectnameruntimebehavior.ts`.
> Note that some GDevelop extensions are declared in C++, in files called `JsExtension.cpp`. If you want to edit them,
> refer to the paragraph about them at the end.
@@ -48,32 +48,32 @@ Refer to the [GDevelop IDE Readme](./README.md) for more information about the i
### 2.1) Implement your feature for the game engine 👾
> ℹ️ Implement your extension in file called `extensionnametools.js` (for general functions), `objectnameruntimeobject.js` (for objects) or `behaviornameruntimebehavior.js` (for behaviors). See then the next section for declaring these files and the content of the extension to the IDE.
> ℹ️ Implement your extension in file called `extensionnametools.ts` (for general functions), `objectnameruntimeobject.ts` (for objects) or `behaviornameruntimebehavior.ts` (for behaviors). See then the next section for declaring these files and the content of the extension to the IDE.
Check the [GDJS game engine documentation here](https://docs.gdevelop-app.com/GDJS%20Runtime%20Documentation/index.html). It's also a good idea to check the [Runtime folder of GDJS](../GDJS/README.md) to see directly how the game engine is done when needed. Files for the game engine should [mostly be written in JavaScript "ES5 flavor" (i.e: usual, classic good old JavaScript) (click to learn more)](https://github.com/4ian/GDevelop/blob/master/newIDE/docs/Supported-JavaScript-features-and-coding-style.md).
Check the [GDJS game engine documentation here](https://docs.gdevelop-app.com/GDJS%20Runtime%20Documentation/index.html). It's also a good idea to check the [Runtime folder of GDJS](../GDJS/README.md) to see directly how the game engine is done when needed. Files for the game engine should [almost all be written in TypeScript, with a few precautions to ensure good performance (click to learn more)](https://github.com/4ian/GDevelop/blob/master/newIDE/docs/Supported-JavaScript-features-and-coding-style.md).
#### How to create functions to be called by events
See examples in [examplejsextensiontools.js](../Extensions/ExampleJsExtension/examplejsextensiontools.js).
See examples in [examplejsextensiontools.ts](../Extensions/ExampleJsExtension/examplejsextensiontools.ts).
Read about [`gdjs.RuntimeScene`](file:///Users/florianrival/Projects/F/GD/docs/GDJS%20Runtime%20Documentation/gdjs.RuntimeScene.html), the class representing a scene being played, as lots of events can need it.
Read about [`gdjs.RuntimeScene`](https://docs.gdevelop-app.com/GDJS%20Runtime%20Documentation//RuntimeScene.html), the class representing a scene being played, as lots of events can need it.
#### How to create a behavior by extending `gdjs.RuntimeBehavior`
See examples in [dummyruntimebehavior.js](../Extensions/ExampleJsExtension/dummyruntimebehavior.js) (or [dummywithshareddataruntimebehavior.js](../Extensions/ExampleJsExtension/dummywithshareddataruntimebehavior.js) for an example with shared data between behaviors).
See examples in [dummyruntimebehavior.ts](../Extensions/ExampleJsExtension/dummyruntimebehavior.ts) (or [dummywithshareddataruntimebehavior.ts](../Extensions/ExampleJsExtension/dummywithshareddataruntimebehavior.ts) for an example with shared data between behaviors).
You'll be interested in the constructor (to initialize things), `onDeActivate` (called when behavior is deactivated), `doStepPreEvents`
and `doStepPostEvents` (to run logic before/after the events at each frame).
Read about [`gdjs.RuntimeBehavior`](file:///Users/florianrival/Projects/F/GD/docs/GDJS%20Runtime%20Documentation/gdjs.RuntimeBehavior.html), the base class inherited by all behaviors, to see everything that is available.
Read about [`gdjs.RuntimeBehavior`](https://docs.gdevelop-app.com/GDJS%20Runtime%20Documentation/RuntimeBehavior.html), the base class inherited by all behaviors, to see everything that is available.
#### How to create an object by extending `gdjs.RuntimeObject`
See example in [dummyruntimeobject.js](../Extensions/ExampleJsExtension/dummyruntimeobject.js) (the object itself) and [dummyruntimeobject-pixi-renderer.js](../Extensions/ExampleJsExtension/dummyruntimeobject-pixi-renderer.js) (the renderer, using PIXI.js).
See example in [dummyruntimeobject.js](../Extensions/ExampleJsExtension/dummyruntimeobject.js) (the object itself) and [dummyruntimeobject-pixi-renderer.js](../Extensions/ExampleJsExtension/dummyruntimeobject-pixi-renderer.js) (the renderer, using PixiJS).
You'll be interested in the constructor (to initialize things), `update` (called every frame) and the other methods. In the PIXI renderer, check the constructor (where PIXI objects are created). Other methods depend on the renderer.
You'll be interested in the constructor (to initialize things), `update` (called every frame) and the other methods. In the PIXI renderer, check the constructor (where PixiJS objects are created). Other methods depend on the renderer.
Read about [`gdjs.RuntimeObject`](file:///Users/florianrival/Projects/F/GD/docs/GDJS%20Runtime%20Documentation/gdjs.RuntimeObject.html), the base class inherited by all objects.
Read about [`gdjs.RuntimeObject`](https://docs.gdevelop-app.com/GDJS%20Runtime%20Documentation/RuntimeObject.html), the base class inherited by all objects.
#### How to create an effect ("shader", PixiJS "filter")
@@ -212,9 +212,9 @@ registerEditorConfigurations: function(objectsEditorService /*: ObjectsEditorSer
> 👉 See an example in the [example extension _JsExtension.js_ file](../Extensions/ExampleJsExtension/JsExtension.js).
#### Declare the Pixi.js renderer for the instance of your object in the scene editor
#### Declare the PixiJS renderer for the instance of your object in the scene editor
Finally, to have the instances of your object displayed properly on the scene editor, implement the function `registerInstanceRenderers` in your extension module. The function is passed an object called `objectsRenderingService`, containing [RenderedInstance](./app/src/ObjectsRendering/Renderers/RenderedInstance.js), the "base class" for instance renderers, and PIXI, which give you access to [Pixi.js rendering engine](https://github.com/pixijs/pixi.js), used in the editor to render the scene.
Finally, to have the instances of your object displayed properly on the scene editor, implement the function `registerInstanceRenderers` in your extension module. The function is passed an object called `objectsRenderingService`, containing [RenderedInstance](./app/src/ObjectsRendering/Renderers/RenderedInstance.js), the "base class" for instance renderers, and PixiJS, which give you access to [PixiJS rendering engine](https://github.com/pixijs/pixi.js), used in the editor to render the scene.
> 👉 See an example in the [example extension _JsExtension.js_ file](../Extensions/ExampleJsExtension/JsExtension.js).
@@ -239,7 +239,7 @@ If you want to start a new extension:
- Change the extension information (`extension.setExtensionInformation`). The first argument is the extension internal name and should be the same name as your folder for consistency.
- Remove all the actions/conditions/expressions declarations and tests, run `node import-GDJS-Runtime.js` and reload GDevelop to verify that your extension is loaded.
- Create a file called for example _yourextensionnametools.js_ in the same directory.
- Add back the declarations in your extension. Use `setIncludeFile` when declaring your actions/conditions/expressions and set the name of the js file that you've created, prefixed by the path from the root folder. For example:
- Add back the declarations in your extension. Use `setIncludeFile` when declaring your actions/conditions/expressions and set the name of the ts file that you've created **but with a js extension**, prefixed by the path from the root folder. For example:
```js
.setIncludeFile("Extensions/FacebookInstantGames/facebookinstantgamestools.js")
```