hmn
/
orca
5
Fork 2
Code Issues 21 Pull Requests 1 Packages Projects Releases Wiki Activity

Update the README and quick start for launch #107

Merged
MartinFouilleul merged 1 commits from quick-start-updates into main 2023-09-16 15:56:57 +00:00
Conversation 0 Commits 1 Files Changed 4 +108 -63
4 changed files with 108 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
Readme.md
View File

@ -15,6 +15,8 @@ Orca is a development platform and runtime environment for cross-platform, sandb
- Build user interfaces using our UI API and default widgets.
- Read and write files using a capability-based API.
To learn more about the project and its goals, read the [announcement post](https://orca-app.dev/posts/230607/orca_announcement.html).
## Installing
The Orca command-line tools must be installed to your system in order to use them in your own projects.
@ -61,7 +63,7 @@ orca version
If you encounter any errors, see the FAQ below.
Once the `orca` tools are installed, you can use them from anywhere to
Once the `orca` tools are installed and on your PATH, you can use them from anywhere.
### Building the sample Orca apps
@ -88,7 +90,7 @@ For a more thorough overview, please read the [Quick Start Guide](./doc/QuickSta
The following additional resources may also help you familiarize yourself with Orca and its APIs:
- The [samples folder](./samples) contains sample applications that show various aspects of the Orca API and support library:
- The [samples folder](./samples) contains sample applications that show various aspects of the Orca API and core library:
- [`breakout`](./samples/breakout) is a small breakout game making use of the vector graphics API.
- [`clock`](./samples/clock) is a simple clock showcasing vector graphics and the time API.
- [`triangle`](./samples/triangle) shows how to draw a spinning triangle using the GLES API.
@ -98,18 +100,22 @@ The following additional resources may also help you familiarize yourself with O
## FAQ
**What platforms does Orca supports?**
**What platforms does Orca support?**
We currently support Windows 10 and up, and macOS 10.15 and up.
We currently support Windows 10 and up, and macOS 10.15 and up. We plan to expand to more platforms in the future.
**What languages can I use with Orca?**
In principle, you can use any language and toolchain that can produce a WebAssembly module and bind to the Orca APIs. However, several important parts of Orca, such as the UI, are provided as part of the support library, which must be compiled to WebAssembly with you app, and is written in C. Therefore, at this early stage, it may be difficult to use any language other than C.
In principle, you can use any language and toolchain that can produce a WebAssembly module and bind to the Orca APIs. However, several important parts of Orca, such as the UI, are provided as part of the core library, which must be compiled to WebAssembly with your app, and is written in C. Therefore, at this early stage, it may be difficult to use any language other than C.
C-style C++ is possible but requires compiling the support library in C as a separate object file, and then adding that object to your compile command when building your app.
C-style C++ is possible but requires compiling the core library in C as a separate object file, and then adding that object to your compile command when building your app.
We're currently working with contributors to add support for Odin and Zig, and we look forward to expanding the number of officially-supported languages in the future.
**Which WebAssembly features does Orca support?**
We currently use [wasm3](https://github.com/wasm3/wasm3) for our interpreter. We therefore support whatever features wasm3 supports. In practice this means all WebAssembly 1.0 features, bulk memory operations, and a couple other small features.
**I am getting errors about atomics when building the runtime on Windows.**
Please ensure that you have the latest version of Visual Studio and MSVC installed. The Orca runtime requires the use of C11 atomics, which were not added to MSVC until late 2022.

153
doc/QuickStart.md
View File

@ -6,51 +6,86 @@
--------
# Orca Quick Start Guide
---
This is a short introduction to developping an application that can be run by the Orca runtime. We'll present the basic structure of an Orca application, and walk through a simple example in C.
This is a short introduction to developing an application that can be run by the Orca runtime. We'll present the basic structure of an Orca application, and walk through a simple example in C.
## What is an Orca app?
An Orca app is a WebAssembly module designed for the Orca runtime. Your app interacts with the Orca runtime via WebAssembly imports and exports. For example, you can import functions from the Orca runtime to get user input, and export functions to the Orca runtime to draw to the screen.
Orca also ships with a core library, written in C, which facilitates interaction with the Orca runtime and provides features like UI. This library should be compiled along with your app as part of producing your WebAssembly module.
You can, in principle, write an Orca app in any programming language that supports WebAssembly. However, at this early stage, C is the only officially supported language.
![Basic structure of a C app](images/app_c.png)
Once you have compiled your WebAssembly module, you can bundle this module into an executable using the `orca bundle` command. The application bundle can include images, fonts, or any other private data that the app needs in order to function. These files can be read or written from the app without asking the user for permission. The resulting Orca executables are therefore self-contained.
![Example Orca application bundle](images/app_bundle.png)
## Basic structure
Orca exposes a number of types and functions to applications. In order to use them the first thing to do is to include `orca.h`.
```
```c
#include<orca.h>
```
The Orca runtime manages the application's window and event loop. In order to receive a specific kind of event, you can define an associated _event handler_ and export it to the runtime. For instance, to be notified when your application's window is resized, you should define the `oc_on_resize()` handler:
```
```c
ORCA_EXPORT void oc_on_resize(u32 width, u32 height)
{
// handle the window resize event
}
```
The `ORCA_EXPORT` macro makes the handler visible to the orca runtime, which automatically binds it to the window resize event.
The `ORCA_EXPORT` macro makes the handler visible to the Orca runtime, which automatically binds it to the window resize event.
Handlers are optional. If you don't care about an event, you can just omit the associated handler. You probably want to define at least two important handlers:
Handlers are optional. If you don't care about an event, you can just omit the associated handler. However, you will almost certainly want to define at least two important handlers:
- `oc_on_init()` is called once when your application starts and can be use to initialize your application's resources
- `oc_on_init()` is called once when your application starts and can be use to initialize your application's resources.
- `oc_on_frame_refresh()` is called when your application needs to render a new frame, typically tied to the refresh rate of the monitor.
For a list of available handlers and their signatures, see the [app cheatsheet](../doc/cheatsheets/cheatsheet_app.h).
## Clock Example
## Clock example
Let's look at the [clock example](../samples/clock). This is a simple app that shows an analog clock and showcases a couple of interesting Orca APIs.
Open [`main.c`](../samples/clock/src/main.c) and look at the definition of `oc_on_init()`. This handler is called when the applications starts, right after the application window has been created.
Open [`main.c`](../samples/clock/src/main.c) and look at the definition of `oc_on_init()`. This handler is called when the application starts, right after the application window has been created.
The first thing we do here is set the title and dimensions of the window. We then create the graphics resources that we'll use to draw the clock onto the window.
```c
ORCA_EXPORT void oc_on_init(void)
{
oc_window_set_title(OC_STR8("clock"));
oc_window_set_size((oc_vec2){ .x = 400, .y = 400 });
// ...
}
```
### Graphics surfaces
The next line of `oc_init()` creates a _graphics surface_. A surface represents a destination you can draw into using a specific API. In this sample, we're going to use a canvas surface, which allows drawing with a 2D vector graphics API. Other samples use a GLES surface to draw with the OpenGL ES API.
The next line of `oc_on_init()` creates a _graphics surface_. A surface represents a destination you can draw into using a specific API. In this sample, we're going to use a canvas surface, which allows drawing with a 2D vector graphics API. Other samples use a GLES surface to draw with the OpenGL ES API.
Before drawing into it, the surface must be selected as the current surface by calling `oc_surface_select()`. Once all drawing is done you can display the result by calling `oc_surface_present()`.
```c
oc_surface surface = { 0 };
oc_canvas canvas = { 0 };
ORCA_EXPORT void oc_on_init(void)
{
// ...
surface = oc_surface_canvas();
canvas = oc_canvas_create();
// ...
}
```
### Canvas
After creating the surface, we create a _canvas_. A canvas holds some context for drawing commands, like the current color or stroke width, as well as a command buffer that records all drawing commands. All canvas drawing functions use an implicit _current canvas_. You can select a canvas to be the current canvas by calling `oc_canvas_select()`, as seen at the begining of `oc_on_frame_refresh()`.
@ -59,14 +94,17 @@ Canvas drawing functions like `oc_fill()` or `oc_stroke` merely add to the curre
To summarize, the general structure of canvas drawing code is like the following:
```
oc_canvas_select(canvas); // make the canvas current
```c
ORCA_EXPORT void oc_on_frame_refresh(void)
{
oc_canvas_select(canvas); // make the canvas current
//... add commands to the canvas command buffer using drawing functions
//... add commands to the canvas command buffer using drawing functions
oc_surface_select(surface); // select the canvas surface
oc_render(canvas); // render the canvas commands into it
oc_surface_present(surface); // display the result
oc_surface_select(surface); // select the canvas surface
oc_render(canvas); // render the canvas commands into it
oc_surface_present(surface); // display the result
}
```
### Drawing
@ -74,17 +112,16 @@ oc_surface_present(surface); // display the result
Canvas drawing functions can be roughly divided into three groups:
- Path functions like `oc_line_to()` or `oc_cubic_to()` are used to specify paths using lines and curves.
- Attributes setup functions like `oc_set_color()` or `oc_set_width()` are used to set attributes used by subsequent commands.
- Attribute setup functions like `oc_set_color()` or `oc_set_width()` are used to set attributes used by subsequent commands.
- Command functions like `oc_stroke()` and `oc_fill()` encode commands into the canvas command buffer using the current path and attributes.
Some helpers combine a path specification and a command, like `oc_circle_fill()`.
As an example, the back of the clock is drawn using these two calls:
```
// clock backing
oc_set_color_rgba(1, 1, 1, 1);
oc_circle_fill(centerX, centerY, clockRadius);
```c
oc_set_color_rgba(1, 1, 1, 1);
oc_circle_fill(centerX, centerY, clockRadius);
```
For a list of canvas drawing functions, see the [graphics API cheatsheet](../doc/cheatsheets/cheatsheet_graphics.h).
@ -100,30 +137,30 @@ The matrix on the top of the stack at the time a command is encoded is used to t
You can see an example of using transform matrices when drawing the clock's hands:
```
// hours hand
oc_matrix_multiply_push(mat_transform(centerX, centerY, hoursRotation));
{
oc_set_color_rgba(.2, 0.2, 0.2, 1);
oc_rounded_rectangle_fill(0, -7.5 * uiScale, clockRadius * 0.5f, 15 * uiScale, 5 * uiScale);
}
oc_matrix_pop();
```c
// hour hand
oc_matrix_multiply_push(mat_transform(centerX, centerY, hoursRotation));
{
oc_set_color_rgba(.2, 0.2, 0.2, 1);
oc_rounded_rectangle_fill(0, -7.5 * uiScale, clockRadius * 0.5f, 15 * uiScale, 5 * uiScale);
}
oc_matrix_pop();
```
### Fonts and text
Going back to `oc_init()`, after creating a surface and a canvas, we create a font that we will use to draw the numbers on the clock's face:
```
oc_unicode_range ranges[5] = {
OC_UNICODE_BASIC_LATIN,
OC_UNICODE_C1_CONTROLS_AND_LATIN_1_SUPPLEMENT,
OC_UNICODE_LATIN_EXTENDED_A,
OC_UNICODE_LATIN_EXTENDED_B,
OC_UNICODE_SPECIALS
};
```c
oc_unicode_range ranges[5] = {
OC_UNICODE_BASIC_LATIN,
OC_UNICODE_C1_CONTROLS_AND_LATIN_1_SUPPLEMENT,
OC_UNICODE_LATIN_EXTENDED_A,
OC_UNICODE_LATIN_EXTENDED_B,
OC_UNICODE_SPECIALS
};
font = oc_font_create_from_path(OC_STR8("/segoeui.ttf"), 5, ranges);
font = oc_font_create_from_path(OC_STR8("/segoeui.ttf"), 5, ranges);
```
The font is loaded from a font file located in a data folder inside the app bundle. By default, Orca apps use this data folder as their "root" for file operations.
@ -132,35 +169,37 @@ Along with the path of the font file, we pass to the creation function the unico
We then use the font to draw the clock's face:
```
// clock face
for(int i = 0; i < oc_array_size(clockNumberStrings); ++i)
{
oc_rect textRect = oc_text_bounding_box(font, fontSize, clockNumberStrings[i]);
textRect.h -= 10 * uiScale; // oc_text_bounding_box height doesn't seem to be a tight fit around the glyph
```c
// clock face
for(int i = 0; i < oc_array_size(clockNumberStrings); ++i)
{
oc_rect textRect = oc_font_text_metrics(font, fontSize, clockNumberStrings[i]).ink;
const f32 angle = i * ((M_PI * 2) / 12.0f) - (M_PI / 2);
oc_mat2x3 transform = mat_transform(centerX - (textRect.w / 2), centerY + (textRect.h / 2), angle);
oc_vec2 pos = oc_mat2x3_mul(transform, (oc_vec2){ clockRadius * 0.8f, 0 });
const f32 angle = i * ((M_PI * 2) / 12.0f) - (M_PI / 2);
oc_mat2x3 transform = mat_transform(centerX - (textRect.w / 2) - textRect.x,
centerY - (textRect.h / 2) - textRect.y,
angle);
oc_set_color_rgba(0.2, 0.2, 0.2, 1);
oc_text_fill(pos.x, pos.y, clockNumberStrings[i]);
}
oc_vec2 pos = oc_mat2x3_mul(transform, (oc_vec2){ clockRadius * 0.8f, 0 });
oc_set_color_rgba(0.2, 0.2, 0.2, 1);
oc_text_fill(pos.x, pos.y, clockNumberStrings[i]);
}
```
### Logging and asserts
The runtime has a console overlay whose visiblity can be toggled on and off with `Shift + Cmd + D` on macOS, or `Shift + Ctrl + D` on Windows. Your application can log messages, warnings or errors to that console using the following functions:
The runtime has a console overlay whose visiblity can be toggled on and off with `⌘ + Shift + D` on macOS, or `Ctrl + Shift + D` on Windows. Your application can log messages, warnings, or errors to that console using the following functions:
```
```c
void oc_log_info(const char* fmt, ...); // informational messages
void oc_log_warning(const char* fmt, ...); // warnings, displayed in orange.
void oc_log_error(const char* fmt, ...); // errors, displayed in red.
void oc_log_error(const char* fmt, ...); // errors, displayed in red.
```
If you started the application from a terminal, the log entries are also duplicated there.
You can assert on a condition using `OC_ASSERT(test, fmt, ...)`. If the test fails, the runtime displays a message box including your message, and terminates the application.
You can assert on a condition using `OC_ASSERT(test, fmt, ...)`. If the test fails, the runtime displays a message box and terminates the application.
You can unconditionally abort the application with a message box using `OC_ABORT(fmt, ...)`.
@ -169,9 +208,9 @@ You can unconditionally abort the application with a message box using `OC_ABORT
For more examples of how to use Orca APIs, you can look at the other [sample apps](../samples):
- [breakout](./samples/breakout) is a mini breakout game making use of the vector graphics API. It demonstrates using input and drawing images.
- [triangle](./samples/triangle) shows how to draw a spining triangle using the GLES API.
- [fluid](./samples/fluid) is a fluid simulation using a more complex GLES setup.
- [ui](./samples/ui) showcases the UI API and Orca's default UI widgets.
- [triangle](./samples/triangle) shows how to draw a spining triangle using the GLES API.
- [fluid](./samples/fluid) is a fluid simulation using a more complex GLES setup.
- [ui](./samples/ui) showcases the UI API and Orca's default UI widgets.
For a list of Orca APIs, you can look at the [API cheatsheets](../doc/cheatsheets).

BIN
doc/images/app_bundle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
doc/images/app_c.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB