Progress in the development of Realm-Crafting

Dad72

It's time to talk about progress achieved in the development of Realm-Crafting.
It is a total overhaul of the publisher who was previously a MMORPG publisher that I could not take to an end.So I preferred to redo an RPG editor in the place and delete the whole part script for users who no longer have the slightest code to make to build their games. I explain it to you in more detail in this post.

The idea of this new editor and to make the interface more modern, simpler, more user -friendly, more practical to use, more intuitive ...
He will also be open-source. It is completely free. It is not created for a commercial goal, but for sharing, out of passion.
It uses the Babylonjs rendering engine (day, tracks the version> 8.1.0 at current hours). This rendering engine is also open-source.
The forum also on which I write this post is open-source. I try to keep as much as possible as an open-source thing.

Here is an overview of the publisher. I would not explain all its features in detail. Video tutorials will be available and integrate into the publisher, as well as written documentation that will cover more details.

The first image is the project manager to create and edit projects.

Project Manager

Once you have created a project and edit it, you arrive on the main interface of the editor which is the level edition:

Level Editor

Then to add objects on the scene, you can access a bookstore with 3D models ready to use. The models are stored by categories or you can display all categories or use a search.

Library

To add models, just slide on the scene at the place you wish, then edit it.

When you select objects on the stage, you have access to the right panel has the properties of the model:

Mesh Property

At the start of the subject I told you that there is no need to write scripts. Instead you have access to a list of behavior for your models. These are sort of scripts to slide that you just have to configure with an interface. This covers many possibilities:

Behaviors Property and Library

There is still the possibility for those who would like to create behaviors for them or to share to create from an SDK to create them easily. But it is optional and not compulsory. Most of the default behaviors covers many cases. You have access to a script editor of very efficient behavior, easy to use:

Behavior script editor (optional)

In the list of tools on the left of the scene, you have access to what is called to game elements.
These are kinds of areas that delimits when something is triggered. For example when the character of the game enters the area, this can perform a sound, or particles and many other things.
Here are some example:

Game Elements

Of course its game elements this show in the editor but not in the game.

Another peculiarity of the editor is that you can connect objects and game elements together to create the play logic. For example an NPC which must follow a path. Here is an example:

Connect Elements

I'm not going to cover all the editor features for the moment. I would do this with tutorials. So we will go to the other editors to see.

You have access to a fairly complete field editor. It allows you to dig the ground, raise mountains, paint up to 8 textures, create mixture of textures, paint herbs, trees, rocks, create self-texture paths ...

Terrain Editor

You have a Gui editor to create complex game interfaces:

GUI Editor

You can also create particle systems. You have the possibility of creating sub -transmitters to create a group of transmitters play simultaneously. As in the image this below.

Particles Editor

And we finish with the character editor:

Character Editor

You can change the character with a lot of possible combinations. You can even create all your unique game characters if you want, even by having more than 100th.

And of course you can do the same with female characters:

When you create your game in the publisher you can assets the moment to load the current level to verify that this corresponds to what you want. For example currently there is just a barrel. I can see in the game what it gives in developer mode. It means that your character is invincible if you want (This is useful to test your game without being killed by an enemy in ways to adjust values via the editor):

Game Test

Development is always in progress, I still have a lot to do, but it is moving well.
I would continue to show another little thing following this subject.

Dad72

Hello,

I have some news. I advance a lot on the behavior script system on editor and game. It was not an easy task, but I managed to have something super cool, powerful and very flexible.

I have already talked about a little, you can attach scripts (made by default) which represents a specific behaviors. Here is a concrete example with two test objects and two different script.
The first script is a switch (an on/off) it is attached to an object whatever for the tests that I made. But you can imagine attaching your on a switch model for example.

switch switch1916×906 249 KB

Then the second model I attach to it for example a change of texture.

changeTexture1920×911 250 KB

This script has parameters to define the texture that must be changed.
But for this logic to work, it is necessary to connect by a connection the object switch to a target.

logic logic1918×908 262 KB

There you see a single target but we can still go further and create reaction in chain by connecting the barel for the example has another object which contains another different script and so on. It will execute all the script attached to the switch to make a reaction in action chain.

Now side game, if I test, it works. Here is the result:

I click on the rock head (it’s for the test, it’s zero/bad for the example, I know)

testClick1920×910 219 KB

This executes the script on the object to which the switch is attached which changes the texture of the barel.

testChangeTexture1920×903 218 KB

You can imagine doing lots of something else with different script.
I now work on the same system but to trigger script when the player enters an area that we add in the Publisher, it can be triggered a sound, a music, a video, an images, bring up an object, or whatever you want…

For information, I plan to create around 150 scripts by default gradually. But those who wish can create others. I simplified their creation as much as possible. All the work is largely done behind the scenes.

Otherwise I did a lot of other little things, improvement, correction and the editor’s automatic language change system. But nothing more interesting to show this script behavior system that I find very cool.

I hope you will find it’s good. As I said at the beginning, it was a real breakdown to make everything work all so that everything overlaps properly, but phew, I succeeded.

See you soon for the next advances

Dad72

This system was faster to do than I thought:

Zone creation triggering something when the player character enters this perimeter (in red on the image).
He add to slide a gamesElements on the scene and the behavioral scripts is automatically assigned, ready to configure. Just add a sound file from the bookstore and that’s it. In the game, as soon as the character enters the area, the sound is playing.

The other gamesElements do the same thing but to trigger an images, a video, a text, particles, a win to offer a reward or other, a checkpoint to record …

This system is really super flexible, simple of use. Here is a complete image with explanation:

soundZone1920×914 222 KB

I think it will be a real pleasure to create a game with this editor.

See you soon.

Dad72

Small news quickly. I replaced the mouse click trigger with a message display to use the keyboard. (This is what does in most games)

We can always create scripts that use the mouse for events rather than the keyboard, but I choose the use of the keyboard which is more common and practical.

Dad72

This week, I present to you the HUD modules of the editor Gui. I will not make a great explanation, so I show you directly what it gives in images.

start start1920×912 158 KB

inventory1920×910 151 KB

tradding1920×912 240 KB

crafting1920×911 210 KB

chest chest1920×915 219 KB

player player1920×913 221 KB

Dad72

I'm still making progress, this time on behavior scripts. I have a lot to do to cover many situations.

I have so far made 30 scripts out of about 150. Here's an example of a script named Phantom.

All scripts are built on the same basis.

That is, a class that extends Behaviors This parent class groups functions common to all behavior scripts and helps to perform them (the addConfig in the init() function is a good example)
a init() function that is used to display behavior parameters in the editor.
a start() function to initialize on the game side.
a trigger() function that triggers the event (as the character enters a zone).
a execute() function to execute the behavior.

/*jshint esversion: 6 */	
/**  
 * @class Phantom 
 * @description Shows a ghost or a spectral entity with special effects.
 * @extends {Behaviors}
 */
class Phantom extends Behaviors {
    constructor(object) {
        super(object);
        this.mesh = null;
        this.hasAppeared = false;
    }

    init() {
        this.addConfig("phantomId", "input", {
            label: "Phantom Object ID",
            placeholder: "ghost01",
            type: "text",
            id: "phantomId",
            dropAviable: "Mesh",
            onChange: (v) => this.savePropertyValue("phantomId", v)
        });

        this.addConfig("appearanceMode", "input", {
            label: "Appearance Mode",
            type: "select",
            options: [
                {text: "Show-Fade/Disappear", value: "Show-Fade/Disappear"},
                {text: "Show-Approach", value: "Show-Approach"},
                {text: "Show-Face-Approach", value: "Show-Face-Approach"},
                {text: "Show-Move-Fade/Disappear", value: "Show-Move-Fade/Disappear"} 
            ],
            defaultValue: "Show-Fade/Disappear",
            id: "appearanceMode",
            onChange: (v) => this.savePropertyValue("appearanceMode", v)
        });

        this.addConfig("alphaLevel", "input", {
            label: "Transparency (0-1)",
            type: "number",
            min: 0,
            max: 1,
            step: 0.01,
            defaultValue: 0.5,
            id: "alphaLevel",
            onChange: (v) => this.savePropertyValue("alphaLevel", v)
        });

        this.addConfig("glowColor", "input", {
            label: "Emissive Color (Aura)",
            type: "color",
            defaultValue: "#ffffff",
            id: "glowColor",
            onChange: (v) => this.savePropertyValue("glowColor", v)
        });

        this.addConfig("appearanceSpeed", "input", {
            label: "Appearance Speed (s)",
            type: "number",
            defaultValue: 2,
            min: 0,
            id: "appearanceSpeed",
            onChange: (v) => this.savePropertyValue("appearanceSpeed", v)
        });

        this.addConfig("stayDuration", "input", {
            label: "Time before disappear (s)",
            type: "number",
            defaultValue: 4,
            min: 0,
            id: "stayDuration",
            onChange: (v) => this.savePropertyValue("stayDuration", v)
        });

        this.addConfig("disappearMode", "input", {
            label: "Disappearance Mode",
            type: "select",
            options: [
                {text: "FadeOut", value: "FadeOut"},
                {text: "Instant", value: "Instant"}
            ],
            defaultValue: "FadeOut",
            id: "disappearMode",
            onChange: (v) => this.savePropertyValue("disappearMode", v)
        });

        this.addConfig("moveSpeed", "input", {
            label: "Move Speed",
            type: "number",
            defaultValue: 1,
            min: 0,
            id: "moveSpeed",
            onChange: (v) => this.savePropertyValue("moveSpeed", v)
        });

        this.addConfig("idleAnim", "input", {
            label: "Idle Animation Name",
            type: "text",
            placeholder: "idle",
            id: "idleAnim",
            onChange: (v) => this.savePropertyValue("idleAnim", v)
        });

        this.addConfig("moveAnim", "input", {
            label: "Move Animation Name",
            type: "text",
            placeholder: "move",
            id: "moveAnim",
            onChange: (v) => this.savePropertyValue("moveAnim", v)
        });

        this.addConfig("moveX", "input", {
            label: "Move Distance X",
            type: "number",
            defaultValue: 0,
            id: "moveX",
            onChange: (v) => this.savePropertyValue("moveX", v)
        });

        this.addConfig("moveZ", "input", {
            label: "Move Distance Z",
            type: "number",
            defaultValue: 0,
            id: "moveZ",
            onChange: (v) => this.savePropertyValue("moveZ", v)
        });

        this.addConfig("appearanceSound", "input", {
            label: "Sound on appearance",
            type: "search",
            placeholder: "root/phantomAppear.mp3",
            id: "appearanceSound",
            dropAviable: "Sound",
            onChange: (v) => this.savePropertyValue("appearanceSound", v)
        });

        this.addConfig("moveSound", "input", {
            label: "Sound while moving",
            type: "search",
            placeholder: "root/phantomMove.mp3",
            id: "moveSound",
            dropAviable: "Sound",
            onChange: (v) => this.savePropertyValue("moveSound", v)
        });
    }

    start() {
        const id = this.getBehaviorProperty("phantomId");
        this.mesh = this.scene.getMeshById(id);

        if (!this.mesh) {
            console.warn("Phantom: mesh with ID not found:", id);
            return;
        }

        this.mesh.setEnabled(false); // invisible by défaut
    }

    trigger(event) {
        if (this.hasAppeared || !this.mesh) return;
        this.hasAppeared = true;

        this.executeAppearance();
    }

    executeAppearance() {
        const mode = this.getBehaviorProperty("appearanceMode", "Show-Fade/Disappear");
        const alphaTarget = parseFloat(this.getBehaviorProperty("alphaLevel", 0.5));
        const glow = this.getBehaviorProperty("glowColor", "#ffffff");
        const duration = parseFloat(this.getBehaviorProperty("appearanceSpeed", 2));
        const stay = parseFloat(this.getBehaviorProperty("stayDuration", 4));
        const disappearMode = this.getBehaviorProperty("disappearMode", "FadeOut");
	const soundFile = this.getBehaviorProperty("appearanceSound");
		 
        // Activation du mesh
        this.mesh.setEnabled(true);
        this.mesh.material.alpha = 0;
        this.mesh.material.emissiveColor = BABYLON.Color3.FromHexString(glow);

        // Apparition en fondu
        this.scene.beginAnimation(this.mesh, 0, 0, false); // clear anim
        BABYLON.Animation.CreateAndStartAnimation("fadeIn", this.mesh.material, "alpha", 30, duration * 30, 0, alphaTarget, 0);

        // Apparition sonore       
        if (soundFile) {
            this.game.soundEngine.addSpatialSound("zonePhantomSound", soundFile, this.mesh);
            this.game.soundEngine.attachSoundToMesh("zonePhantomSound", this.mesh, true);
            this.game.soundEngine.play("zonePhantomSound");
        }

        // Mouvement éventuel
        if (mode.includes("Move")) {
            this.movePhantom(stay);
        }

        // Disparition
        setTimeout(() => {
            if (disappearMode === "FadeOut") {
                BABYLON.Animation.CreateAndStartAnimation("fadeOut", this.mesh.material, "alpha", 30, 30, alphaTarget, 0, 0, () => {
                    this.mesh.setEnabled(false);
                });
            } else {
                this.mesh.setEnabled(false);
            }
        }, (duration + stay) * 1000);
    }

    movePhantom(stay) {
        const dx = parseFloat(this.getBehaviorProperty("moveX", 0));
        const dz = parseFloat(this.getBehaviorProperty("moveZ", 0));
        const speed = parseFloat(this.getBehaviorProperty("moveSpeed", 1));
	const moveSound = this.getBehaviorProperty("moveSound");  
		
        const from = this.mesh.position.clone();
        const to = from.add(new BABYLON.Vector3(dx, 0, dz));

        BABYLON.Animation.CreateAndStartAnimation("moveGhost", this.mesh, "position", 30, speed * 30, from, to, 0, null);
              
        if (moveSound) {
            this.game.soundEngine.addSpatialSound("zonePhantomMoveSound", moveSound, this.mesh);
            this.game.soundEngine.attachSoundToMesh("zonePhantomMoveSound", this.mesh, true);
            this.game.soundEngine.play("zonePhantomMoveSound");
        }
    }
}

BEHAVIOR.register("Phantom", Phantom);

Dad72

The editor being more than 90% complete and the game generation operational, I started the demo to validate everything that is done so far and thus see what is going well or not, what is missing and what remains to be done…

The demo will be a horror-themed scene. For the moment I made the atmosphere with a sunset where it"s almost night, I then added the relief of the terrain and then roughly textured this terrain (this will remain to be adjusted after adding the 3d models)

The result seems pretty good to me so far.

Here is the terrain editor where I activated the light mode. It"s quite practical to see the scene better when creating a night scene :

terrainEditor1920×910 155 KB

Then on the level editor side, the result of the scene without the brightness mode activated. (This mode can be enabled/disabled at any time to better see the result of what it will be on the game side.) :

demo demo1920×1080 91.1 KB

And finally the game test for the result with the player. There is the fog added on the game side that you can activate or not on the publisher side. But on the gaming side, it"s always active depending on the parameters chosen on the editor"s side.

gameDemo1920×910 156 KB

Slowly the Demo is progressing. Once done, I could start creating the website, make the video tutorials, user manual and put on the GIT repository the source code for the distribution.
This will not mean that everything will be finished and ready to produce games, it will be an early distribution, but as functional as possible, I hope. Even if I know that there will be things to correct, to improve, to complete…

I think that by this fall, or before if everything goes well, the publisher will be ready to be distributed for “testing”.

Dad72

The demo is still in progress. I have gathered all the 3d models that completes the library with more than 200 3d models at the moment.
At the moment the demo just has a house with interior to add. But I have other models now to continue the scene :

demoProgress1920×912 115 KB

At the same time, I have improved the project manager a lot. I tested it completely to correct any problems found and everything seems to work fine.

projects1920×918 149 KB

I also filled the tabs with logs, roadmap, manual, about and I tried to do something “nice” as you can see in the images below:

Logs Logs1920×908 194 KB

roadmap roadmap1920×918 118 KB

More images (Manual, AboutRC, AboutBJS)

manual manual1920×915 105 KB

aboutRC1920×917 131 KB
aboutBJS1920×917 142 KB

I hope to present next time more progress from the demo. But I expect that this demo will remain to be completed with other updates to make it a small playable game.

Dad72

One new additions, the camera modes of the editor:

- You have the default camera fly to move in free mode
- The plan camera which is a top view (it"s an orthographic camera)
- The character camera to move like an FPS character
- And the last one adds that allows you to rotate around a selected object (the orbital camera).

The different modes turn on and off. If none of the 3 modes on the image are enabled, the default fly camera is enabled. All of its camera can improve the work to be done. For example, the orbital camera can be useful for working around a target object. The character camera allows you to enter a building and arrange the interior, the camera seen from above to place the different elements as if on a 2d sheet. And the fly camera to move freely wherever you want.

I also modified the editor window to make it minimalist and thus gain more space for the interface. This removes the tabs and the bookmark bar. You can put the editor in full screen at any time to get more space.

Otherwise I"m slowly moving forward on the beginning of the game demo that will be integrated into the editor. I fixe the bugs found as the demo progresses and add a little polishing when necessary to make the editor clean, pleasant to use.

See you soon

Dad72

I made a small/big visual change to the item selection.

I had some concerns about GLTF objects that have a slightly different hierarchy, which contained multiple mesh children. Thus, by selecting an object, a mesh child is selected and a bounding box is displayed on that child, thus preventing the object from being moved complete.

What I do now, by selecting an object, I go back to the highest parent node (the root) and list all the children to display a glow to each child.

The effect is better than before:

surligner

I can now visually select the entire mesh and move it entirely by selecting the root node.

Fortunately I found this solution, because I almost gave up the gltf format because of the problems I was having, but I didn"t give up.

Dad72

New addition. I added all the most useful keyboard shortcuts.

I tried not to put too much, because it"s easier to remember 20 shortened than 50 and that 30 wouldn"t be used.

Here is the list:

Dad72

I added a new features. Tthe possibility to hide and display the side panels by paper clips.
If hide, this displays a labeled one that shows the panel on hover. Practical for working and having more space on the scene:

Once clicked, it hides the panels