This is a new, revamped editor for GDevelop. It is based on React, Material-UI, Pixi.js and Electron. It uses GDevelop core C++ classes compiled to Javascript to work with GDevelop games.
Make sure to have Git and Node.js installed. Yarn is optional.
git clone https://github.com/4ian/GD.git
cd GD/newIDE/app
yarn #or npm installyarn start #or npm startThis will open the app in your web browser.
Images resources, GDJS Runtime, extensions will be copied in resources, and libGD.js will be downloaded automatically. If you wish, you can build libGD.js by yourself (useful if you modified GDevelop native code like extensions).
Note for Linux: If you get an error message that looks like this:
Error: watch GD/newIDE/app/some/file ENOSPCthen follow the instructions here to fix.
You can run the app with Electron. Make sure that you've run yarn start in app folder before (see above).
cd newIDE/electron-app
yarn #or npm install
#For macOS:
./node_modules/electron/dist/Electron.app/Contents/MacOS/Electron app
#For Windows:
node node_modules\electron\cli.js app
#For Linux:
./node_modules/electron/dist/electron appYou can run a storybook that is used as a playground for rapid UI component development and testing:
cd newIDE/app
yarn storybook #or npm run storybookUnit tests and type checking can be launched with this command:
cd newIDE/app
yarn test #or npm run test
yarn flow #or npm run flowIt's possible to create new themes for the UI. See this file to declare a new theme. You can take a look at the default theme, including the styling of the Events Sheets.
Make sure to have the standalone app running with Electron.
The game engine (GDJS) is in GDJS/Runtime folder. If you modify anything, run the import-GDJS-Runtime.js script:
cd newIDE/app
cd scripts
node import-GDJS-Runtime.jsYou can then launch a preview in GDevelop (again, be sure to be using the standalone app running with Electron to be sure to have your changes reflected immediately).
If you want to go further and create/modify an extension, check the sources in Extensions folder and install GDevelop.js. You'll then be able to make changes in C++ source files and have this reflected in the editor.
Any text editor is fine, but it's a good idea to have one with Prettier (code formatting), ESLint (code linting) and Flow (type checking) integration.
👉 You can use Visual Studio Code with these extensions: Prettier - Code formatter, ESLint and Flow Language Support.
This section is only for maintainers that want to deploy the "official app" on the GDevelop website. If you're working on contributions for GDevelop, you won't need it.
First, update version number which is read in newIDE/electron-app/app/package.json.
cd newIDE/electron-app
yarn build #or npm run buildThis will build and package the Electron app for Windows, macOS and Linux (according to your OS). The output are stored inside newIDE/electron-app/dist.
To build artifacts for all platforms and publish to a draft GitHub release:
GH_TOKEN=xxx yarn build --mac --win --linux tar.gz --publish always
cd newIDE/web-app
yarn deploy #or npm run deployThis new editor is still in development and is missing some features:
- Support for translations (See an example of a component that can be translated)
- Support for native games
- More documentation about how to package for iOS/Android with Cordova/PhoneGap Build or Cocos2d-JS.
- Search in events
- More examples
- More tutorials
- Add more keyboard shortcuts
- Make drawers movable/draggable like the properties panel and the objects editor
You can contribute by picking anything here or anything that you think is missing or could be improved in GD5! If you don't know how to start, it's a good idea to play a bit with the editor and see if there is something that is unavailable and that you can add or fix.
See also the roadmap for ideas and features planned.
This project was bootstrapped with Create React App. Check out their documentation for common tasks or help about using it.