Преглед на файлове

Some docs surrounding the build_web program

Karl Zylinski преди 1 месец
родител
ревизия
6564a2888a
променени са 3 файла, в които са добавени 26 реда и са изтрити 17 реда
  1. 16 4
      README.md
  2. 6 6
      build_web/build_web.odin
  3. 4 7
      examples/minimal_web/minimal_web.odin

+ 16 - 4
README.md

@@ -72,12 +72,24 @@ Join my Discord server and let me know in the #karl2d channel what you think! He
 
 ## How to make a web build of your game
 
-See the `minimal_web` example: https://github.com/karl-zylinski/karl2d/blob/master/examples/minimal_web/minimal_web.odin
+There's a build script located in the `build_web` folder. Run it like this:
 
-There's a comment at the top of that file on how to use the `build_web_example` tool (which you find in the examples folder too). You can use that tool to make your own web build as well.
+```
+odin run build_web -- your_game_path
+```
+
+The web build will end up in `your_game_path/bin/web`.
+
+It requires that you game contains a `main` procedure and a `step` procedure. The `main` procedure is called once on startup and the `step` procedure will be called every frame of your game.
+
+>[!WARNING]
+>When making web builds, make sure your `main` procedure does not have a "main loop" in it. That will hang the browser tab when your game starts.
+
+Also, see the `minimal_web` example: https://github.com/karl-zylinski/karl2d/blob/master/examples/minimal_web/minimal_web.odin
+
+The `build_web` will copy `odin.js` file from `<odin>/core/sys/wasm/js/odin.js` into the `bin/web folder`. It will also copy a HTML index file into that folder.
 
-> [!NOTE]
-> Desktop programs can have the whole program in a `main` procedure. But web builds need to be split into `main` and `step` procedures, where `step` is called each frame by the browser in order to create a "game loop"
+It will also create a `build/web` folder. That's the package it actually builds. It contains a bit of wrapper code that then calls the `main` and `step` functions of your game.
 
 ## Architecture notes
 

+ 6 - 6
build_web/build_web.odin

@@ -6,12 +6,12 @@
 // For example:
 //    odin run build_web -- examples/minimal_web
 //
-// 
-//
-// This program copies the `odin.js` from `<odin>/core/wasm/js/odin.js` to the build folder. It also
-// copies an `index.html` file there than is used to host your web program. The example itself is
-// built using the `js_wasm32` target and put next to the index file.
-package karl2d_build_web_example
+// This program copies the `odin.js` from `<odin>/core/sys/wasm/js/odin.js` to the `bin/web` folder.
+// It also copies an `index.html` file to the `bin/web` folder. It also copies a `web_entry.odin`
+// file into the `build/web` folder. That's the file which is actually built. It contains some
+// wrapper code that calls into your game. The wrapper, and your game, is built using the
+// `js_wasm32` target. The resulting `main.wasm` file is also put in the `build/web` folder.
+package karl2d_build_web_tool
 
 import "core:fmt"
 import "core:path/filepath"

+ 4 - 7
examples/minimal_web/minimal_web.odin

@@ -1,14 +1,11 @@
 // A small program that draws some shapes, some texts and a texture.
 //
-// This is the same as `../minimal`, but adapted to work on web. Compile the web version by being in
-// the examples folder (the one above this one) and run:
+// This is the same as `../minimal`, but adapted to work on web. Compile the web version using the
+// command-line. Navigate to the `karl2d` folder and run:
 //
-//    odin run build_web_example -- minimal_web
+//    odin run build_web -- examples/minimal_web
 //
-// The built web application will be in minimal_web/web/build.
-//
-// This approach of using `odin run build_web_example -- example_folder_name` works for most other
-// examples, except for the non-web `minimal` example.
+// The built web application will be in examples/minimal_web/bin/web.
 package karl2d_minimal_example_web
 
 import k2 "../.."