Can I serialize scene out of the box?

Help & Support
21

[Album] Imgur

I don’t know why, but I can’t post gif here…

webm - https://webm.video/XRLTwz

So really want to parse your current scene state? Like from game, runtime?

So if you want to get this structure by your own, you need to parse entities from entities:list

var entities  = {};

editor.call('entities:list').map(function(element) {
     return element._data
}).forEach(function(element) {
     entities[element.resource_id] = element;
})

Other things, such gravity, camera settings and etc you can obtain from pc.app I guess.
So if you don’t like Editor at all, you have to abstract from entities:list. I think it’s possible too.

22

I’m working without editor, so I have no access to editor.call function and it’s _data)
So, I have to write something like this


export function serializeEntity(entity) {
    var data = {
        // _guid: entity._guid,
        resource_id: entity._guid,
        enabled: entity.enabled,
        name: entity.name,
        position: entity.getLocalPosition().toArray(),
        rotation: entity.getEulerAngles().toArray(),
        scale: entity.getLocalScale().toArray(),

        tags: entity.tags._list,
        children: entity.children.map((v) => v._guid),
        parent: null,
        components: {}
    };

    if (entity.parent) {
        data.parent = entity.parent._guid;
    }

    if (entity.c && Object.keys(entity.c).length) {
        data.components = serializeComponents(entity);
    }

    return data;
}

function serializeComponents(entity) {
    var data = {};

    for (let name in entity.c) {
        let component = entity.c[name];
        let cData = data[name] = {};

        for (let name in component.data) {
            let val = component.data[name];
            let t = typeof val;
            if (t === 'boolean' || t === 'number' || t === 'string') cData[name] = val;
        }

        if (name === 'camera') {
            Object.assign(cData, {
                clearColor: component.clearColor.toArray(),
                rect: component.rect.toArray(),
            });
        }
        if (name === 'model') {
            Object.assign(cData, {
                material: component.material.id
            });
        }
        if (name === 'light') {
            Object.assign(cData, {
                // material: component.material.id
            });
        }
    }

    return data;
}


// -- utils --
pc.Vec2.prototype.toArray = function() { return Array.from(this.data); }
pc.Vec3.prototype.toArray = function() { return Array.from(this.data); }
pc.Vec4.prototype.toArray = function() { return Array.from(this.data); }
pc.Color.prototype.toArray = function() { return Array.from(this.data); }
1 Like
23

Okay, I just did the same. Now I have parser - it can parse current hierarchy, pack it just like an Editor and throw Json into your console. So you can use my method to build hierarchy back and it works pretty well.

The only thing it can’t - to get components from entity. For now I don’t know how to get it. And also it’s stinky, just a sketch.

Check SceneChange.prototype.getJsonFromCurrentState

1 Like
24

Well, pc.SceneChange is undefined

25

Where? https://playcanvas.com/project/536664/overview/test-scene-export is my project.

Open Main 2 scene, SceneChange is script asset

26

Ah, got it. Anyway, there is no serialization method out of the box. Okay.
Well, my code has component serialization, but you should also add vectors and colors there. And other fields like material, textures or entity pointers

27

Okay, now my parser is working pretty well.
But I don’t know how to parse scripts.

Since you don’t use Editor, you have to attach scripts by oneself, so just implement it somehow.

If you want to test it:

  1. go to https://playcanvas.com/project/536664/overview/test-scene-export
  2. open main 2 scene in Editor and play
  3. Press 4 to get current scene json in console and save it somewhere (newSceneJson asset for example)
  4. Press 3 to load scene from json file (newSceneJson for now)

I feel like i’ve created Frankenstein :smiley:
And I still think it’s cheating and we should use Editor for such things!

28

just wanted to say this is great information. I was looking at this myself: https://pasteboard.co/Hb3Pq1Y.png

1 Like
29

Nice. Are you making offline editor?

image
image.jpg1842×1080 82.2 KB

1 Like
30

lol, yes that was what I was working towards. Seems we are of like mind, electron was my end target too.

However I’m not sure how far I will take it, mostly exploratory, learning playcanvas/webgl/html5 game engines

playcanvas was the first game engine that worked like my brain works. Superpowers game engine is an inspiration too

At the moment, I’m looking at threejs editor as a potential importer/exporter platform for playcanvas/others. Threejs already has a playcanvas model importer, but I need to explore further

Obviously I do not want to duplicate work. I’ll share more in a few days

What tools/libs are you using for your development stack?

I always use RiotJS for UI components (minimal, build process optional), but that is all I settled on so far

1 Like
31

Any updates? I’m looking to use Playcanvas for an MMO game, and would love to hear what worked for you as a scene editor (for the backend). Was the three.js editor a good option in the end?

32

Might be worth starting a new thread with your needs @StanGatarn and start a new discussion :slight_smile:

1 Like