@FlorianRival
open-source, cross-platform game creator designed to be used by everyone
React is perfect for making complex UI
JavaScript is perfect for most applications
GUI (windows, dialogs...)
Filesystem
React.js powered interface
Node.js/browser adapters
X-platform toolkit (wxWidgets)
GDevelop C++ codebase
GDevelop C++ codebase
Core classes (game, scene, object, textures...)
Game exporter (JS "transpiler")
libGDevelop.js
JS
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk && ./emsdk install latest && ./emsdk activate latest
./emcc tests/hello_world.c
node a.out.js
For large projects, Emscripten provides replacements that swap GCC or Clang by Emscripten in build system (automake, CMake...)
class Layout : public ObjectsContainer {
public:
void setName(const gd::String & name_) { name = name_; };
const gd::String & getName() { return name; };
Object& insertObject(const Object& object, size_t position) { ... };
Object& getObject(const gd::String& name) { ... };
}
interface Layout {
void setName([Const] DOMString name);
[Const, Ref] DOMString getName();
[Ref] Object insertObject([Ref] gdObject object, unsigned long pos);
[Ref] Object getObject([Const] DOMString name);
}
"WebIDL" bindings for Emscripten WebIDL binder:
Module().then(gd => {
const layout = new gd.Layout();
layout.setName("My game level");
const object = new gd.Object();
object.setName("My character");
layout.insertObject(object, 0);
console.log(layout.getName()); // "My game level"
console.log(object.getObject("My character")); // Returns a gd.Object
});
Primitive types?
If I pass an object?
Can I debug?
const layout = new gd.Layout();
// ...
gd.destroy(layout); // Binded objects need manual destruction
> console.log(layout);
{ ptr: 6804120 }
Wasm memory
The content of gd.Layout
componentDidMount() { this._project = new gd.Project(); }
componentWillUnmount() { gd.destroy(this._project); }
or use an Effect Hook 🔥
Output files can be large (~3mb for GDevelop),
but gzip helps (down to ~1mb).
abort(16). Build with -s ASSERTIONS=1 for more info.
What can go wrong?
GUI (windows, dialogs...)
Filesystem
React.js powered interface
Node.js/browser adapters
GDevelop JS codebase
GDevelop C++ codebase
Core classes (game, scene, object, textures...)
Game exporter (JS "transpiler")
libGDevelop.js
const ObjectsList = (props) => (
<List
rowRenderer={({ ... }) => {
<ObjectRow ... />
})
/>
);
const ObjectRow = () => <div>...</div>;
const ObjectsList = (props) =>
props.map(group => <ObjectRow ... />)
react-dnd
react-virtualized
react-window
react-mosaic
react-sortable-tree
<svg
onPointerMove={...}
onPointerUp={...}
>
<polygon
stroke="rgba(255,0,0,0.5)"
points={vertices.map(vertex =>
`${vertex.getX()},${vertex.getY()}`
).join(' ')}
/>
{vertices.map((vertex, j) => (
<circle
onPointerDown={...}
key={`vertex-${j}`}
fill="rgba(255,0,0,0.75)"
cx={vertex.getX()}
cy={vertex.getY()}
r={5}
/>
))}
</svg>
Measure performance in production (React development build is way slower)
objects // list.length === N
.filter(object => {
return object.getType() !== "";
}) // N wasm calls + string conversions
.map(object => {
return object.getVariables(project)
}); // N wasm calls + object conversions
<FlatButton style={{fontSize: 12}}>
Help
</FlatButton>
<FlatButton>
Help
</FlatButton>
<HelpButton />
Avoid custom/adhoc styles, that won't scale:
Make a component for it! #DesignSystem
Well actually, do, but only for part where there is logic
Storybook
React Styleguidist
Flow
Typescript
Types shine when you or someone else is refactoring some parts of the app
GUI (windows, dialogs...)
Filesystem
React.js powered interface
Node.js/browser adapters
GDevelop JS codebase
GDevelop C++ codebase
Core classes (game, scene, object, textures...)
Game exporter (JS "transpiler")
libGDevelop.js
GUI (windows, dialogs...)
Filesystem
React.js powered interface
Node.js/browser adapters
GDevelop JS codebase
GDevelop C++ codebase
Core classes (game, scene, object, textures...)
Game exporter (JS "transpiler")
libGDevelop.js
Wow, what a difference a year can make
but I have to admit, once you worked a bit with it, it could be really more productive on many aspects than GD4
Amazing how much easier and streamlined the engine has become
The native web app is better than the native app