eepp - Entropia Engine++

eepp is an open source cross-platform game and application development framework heavily focused on the development of rich graphical user interfaces.

Features

Cross platform functionality

• Official support for Linux, Windows, macOS, FreeBSD, Haiku, Android and iOS.

• Exports to HTML5 using emscripten with some minor limitations.

UI Module

• Base widgets to manage the app/game objects as nodes, with all basic input interaction events ( clicks, keypress, mouser over, focus, etc ).

• Fully featured UI system, animation support, scaling, rotating, clipping, events, messages, etc.

• Themes and skins/decorations support.

• Pixel density support ( scaling of UI elements defined by the pixel density of the screen ).

• All the basic widgets are implemented ( button, textbox, combobox, inputbox, menu, listbox, scrollbars, etc ).

• Draw invalidation support. It can be used to make real apps, with low resource usage ( only redraws when is needed ).

• Layout system similar to Android layouts ( LinearLayout, RelativeLayout, GridLayout ).

• Advanced features as text selection, copy and paste, and key bindings.

• Load and style layouts from XMLs

• Styling with Cascading Style Sheets

Graphics Module

• Renderers for OpenGL 2 ( fixed-pipeline ), OpenGL 3 ( programmable-pipeline ), OpenGL ES 2, OpenGL ES 1, and OpenGL Core Profile.

• Batch Renderer ( all the rendering is automatically batched by the engine ).

• Fonts support ( TrueType, BMFont and XNA Fonts ).

• Frame Buffer support.

• Shaders support ( with automatic fixed pipeline shaders to programmable conversor ).

• Vertex Buffer Object support.

• Particle System.

• Extendable Console.

• Animated Sprites.

• Texture Atlas support ( automatic creation and update of the texture atlas, editor included ).

• Clipping Masks ( stencil, scissors, planes )

• Nine Patch resizable bitmaps support.

• Primitives drawables.

• Many image formats supported ( included rasterized SVG ), compressed textures support ( direct upload to the GPU when possible ).

Window Module

• Backend based module, this means that you can easily create a backend for the window/input handling.

• Currently supports SDL 2 as backend.

• Clipboard support.

• Hardware cursors.

• Display Manager

• Joystick support.

Audio Module

• OpenAL audio engine with extendable file format support. Read and write support for OGG and Wav, and read support for MP3 and FLAC.

System Module

• Provides all the basics stuffs for the full multi-threading support of the library, file formats support for packing, clocks, resource manager, translator, and much more.

• Virtual File System class ( abstract assets providers into a single virtual file system, abstracting zip files and local file system into one for transparent load of resources, similar to PhysicsFS ).

Core Module

• Customizable Memory Manager. Used by default in debug mode to track memory leaks.

• UTF8, UTF-16, UTF-32, Ansi, Wide Char support.

• String class using UTF-32 chars internally.

• Debug macros

Math Module

• General purpose functions and templates ( vector, quad, polygon, etc ).

• Interpolation classes with easing.

• Some minor math utilities, include Mersenne Twister random number generator implementation, perlin noise and more.

Network Module

• Web Requests with HTTP client, with TLS support ( provided by mbedtls or openssl ).

• Asynchronous HTTP requests.

• File Transfers with FTP client and FTPS client ( FTP with explicit TLS ).

• TCP and UDP sockets.

• HTTP Content-Encoding and Transfer-Encoding support.

• HTTP Proxy Support.

• HTTP Compressed response support.

• Also HTTP resume/continue download support and automatic follow redirects.

Scene Module

• Node based system for easy management of scenes.

• Full control of node events ( clicks, mouse over, focus, etc ).

• Event system.

• Node Message system.

• Programmable actions for nodes ( fade, rotate, move, scale, etc ).

Physics Module (optional)

• Full OOP chipmunk physics wrapper.

Maps Module (optional)

• Tiled Maps with software dynamic lights.

• Full featured map editor.

Tools

• Very simple UI Editor. Load layouts from an XML file and see the changes being made in real time.

• Texture Atlas Editor. A very simple tool to allow the developer to create and edit texture atlases.

• Map Editor: A advanced but simple map editor for the game engine. It lacks several features since I didn't have the time to work on it, this particular tool will probably die in favor of TMX map support in the near future ( but i'm not a fan of TMX maps, so there's no decision for the moment ).

General Features

• Support for multi-threaded resource loading ( textures, sounds, fonts, etc ).

Documentation

Documentation is located here. I'm currently working on improving it. About 50% of the project is currently documented so still needs a lot of work. Please check the code examples located in src/examples and you can also check out the test ( src/test ) and tools ( src/tools ).

I'm putting my efforts on improving the documentation on the UI module since currently is the most important and complex module but lacks of proper documentation. If you have any question you can contact me anytime.

Getting the code

The repository uses git submodules so you'll need to clone the repository and its submodules, in order to achieve this easily you can simply clone with:

git clone --recurse-submodules https://github.com/SpartanJ/eepp.git

UI Screenshots

ecode - Code Editor

ecode is a code editor inspired in lite. It's using the newest pure CSS theme based on the default Plasma dark theme: Breeze Dark.

UI Editor

Editor that displays in real-time the changes on any layout and CSS to help speed up the development of user interfaces. In the screenshot is displaying some of the default widgets available in eepp.

Texture Atlas Editor

Small tool, used to create and edit texture atlases.

Map Editor

2D map editor using the default skinned theme (using a single texture atlas with 9-patch images).

UI Layout XML example

It should look really familiar to any Android developer. This is a window with the most basic widgets in a vertical linear layout display.

<window layout_width="300dp" layout_height="300dp" window-flags="default|maximize|shadow">
  <LinearLayout id="testlayout" orientation="vertical" layout_width="match_parent" layout_height="match_parent" layout_margin="8dp">
    <TextView text="Hello World!" gravity="center" layout_gravity="center_horizontal" layout_width="match_parent" layout_height="wrap_content" backgroundColor="black" />
    <PushButton text="OK!" textSize="16dp" icon="ok" gravity="center" layout_gravity="center_horizontal" layout_width="match_parent" layout_height="wrap_content" />
    <Image src="https://github.com/SpartanJ/eepp/raw/eepp-3.0.0/thecircle" layout_width="match_parent" layout_height="32dp" flags="clip" />
    <Sprite src="https://github.com/SpartanJ/eepp/raw/eepp-3.0.0/gn" />
    <TextInput text="test" layout_width="match_parent" layout_height="wrap_content" />
    <DropDownList layout_width="match_parent" layout_height="wrap_content" selectedIndex="0">
      <item>Test Item</item>
      <item>@string/test_item</item>
    </DropDownList>
    <ListBox layout_width="match_parent" layout_height="match_parent" layout_weight="1">
      <item>Hello!</item>
      <item>World!</item>
    </ListBox>
  </LinearLayout>
</window>

UI introduction can be found here.

UI Widgets with C++ example

How does it look with real code?

UITextView::New()->setText( "Text  on  test  1" )
         ->setCharacterSize( 12 )
         ->setLayoutMargin( Rect( 10, 10, 10, 10 ) )
         ->setLayoutSizePolicy( SizePolicy::MatchParent, SizePolicy::WrapContent )
         ->setParent( layout );

UI Styling

Element styling can be done with a custom implementation of Cascading Style Sheets, most common CSS2 rules are available, plus several CSS3 rules (some examples: animations, transitions, custom properties, media queries, @font-face at rule, :root element). Here is a small example on how the CSS looks like:

@font-face {
  font-family: "OpenSans Regular";
  src: url("https://raw.githubusercontent.com/SpartanJ/eepp/develop/bin/assets/fonts/OpenSans-Regular.ttf");
}

@import url("assets/layouts/imported.css") screen and (min-width: 800px);

:root {
  --font-color: black;
  --background-input-color: rgba(255, 255, 255, 0.7);
  --border-color: black;
  --border-width: 1dp;
}

.screen TextView {
  color: var(--font-color);
}

.form {
  background-image: @drawable/back;
  background-repeat: no-repeat;
  background-size: cover;
}

.form .form_inputs {
  background-color: var(--non-existent, var(--background-input-color));
  margin-left: 100dp;
  margin-right: 100dp;
  padding-top: 72dp;
  padding-left: 57dp;
  padding-right: 57dp;
  padding-bottom: 115dp;
}

.screen TextView.input,
.screen TextInput.input {
  font-family: AkzidenzGroteskBQ-Cnd;
  layout-width: match_parent;
  layout-height: 80dp;
  border-color: var(--border-color);
  border-width: var(--border-width);
  color: var(--font-color);
  padding-left: 40dp;
  padding-right: 40dp;
  margin-bottom: 32dp;
  skin: none;
  hint-font-family: AkzidenzGroteskBQ-Cnd;
  hint-font-size: 46dp;
  hint-color: #818285;
  background-color: #FFFFFF00;
  transition: all 0.125s;
}

.screen TextInput.input:focus {
  background-color: #FFFFFF66;
  border-color: #796500;
}

.screen TextInput.input:hover {
  background-color: #FFFFFF66;
}

@media screen and (max-width: 1024px) {

.form .form_inputs {
  background-color: red;
}

}

The complete CSS specification can be found in the docs: here.

You can also check how a pure CSS theme looks like in eepp: here.

Live demos (using emscripten)

Since eepp supports emscripten you can take a quick look on some of the examples, demos and tools that the library currently provides. Please be aware that you'll find some differences based on the limitations that emscripten have at the moment (no access to the file system, no custom cursors, etc) and also demos are not optimized for size and they're bigger than they should be. Note: Please use a modern browser with good WebGL and WASM support (Chrome/ium 70+ or Firefox 80+).

• ecode - Code Editor

• UI Editor

• UI Hello World

• Texture Atlas Editor

• Map Editor

• Fonts example

• Physics module demo

• Sprites example

• Full Test

7GUIs Examples

7GUIs is known as a "GUI Programming Benchmark" that it's used to compare different GUI libraries and explore each library approach to GUI programming. All the 7 tasks proposed in 7GUIs has been implemented for eepp. The tasks are very good representative of