Add Modifier to Scene

Question

I followed this example

https://famo.us/examples/0.2.0/core/scene/example

I tried to reference a Modifier but not sure how.

var myScene = new Scene({
    id: "root",
    opacity: 1,
    target: [
        {
            transform: Transform.translate(10, 10),
            target: {id: "foo"}
        },
        {
            transform: [
                {rotateZ: 0.1},
                {scale: [0.5, 0.5, 1]}
            ],
            origin: [0.5, 0.5],
            target: {id: "bar"}
        }
    ]
});

So if I want to change transform: Transform.translate(10, 10),, how do I do that dynamically?

johntraver · Accepted Answer · 2014-05-23T21:02:16.517

You can add an ID above the transform attribute that will give you a reference to the modifier and not just the target. Here is an example that changes that modifier when you click on 'surface'

Hope this helps!

var Engine     = require("famous/core/Engine");
var Surface    = require("famous/core/Surface");
var Scene      = require("famous/core/Scene");
var Transform  = require("famous/core/Transform");

var mainContext = Engine.createContext();

var myScene = new Scene({
    id: "root",
    opacity: 1,
    target: [
        {
            id: "mod1",
            transform: Transform.translate(10, 10),
            target: {id: "foo"}
        },
        {
            transform: [
                {rotateZ: 0.1},
                {scale: [0.5, 0.5, 1]}
            ],
            origin: [0.5, 0.5],
            target: {id: "bar"}
        }
    ]
});

var surface = new Surface({
    size: [200, 200],
    content: "Hello World",
    classes: ["red-bg"],
    properties: {
        lineHeight: "200px",
        textAlign: "center"
    }
});

surface.on('click',function(){
    myScene.id["mod1"].transformFrom(function(){
        return Transform.translate(50,50,0);
    });
});

var surfaceTwo = new Surface({
    size: [200, 200],
    content: "Secondary",
    classes: ["grey-bg"],
    properties: {
        lineHeight: "200px",
        textAlign: "center"
    }
});

myScene.id["foo"].add(surface);
myScene.id["bar"].add(surfaceTwo);

mainContext.add(myScene);

How does `Scene` work in term of nesting? From what I see, it's just `scene -> modifier -> surface`. Is it possible to do something like `container -> view -> modifier -> surface` ... You know what I mean! — HP., May 28 '14 at 18:07
Looks like Scene is only meant to contain RenderNodes and Modifiers.. Even Surface gets explicitly added in the end. Scene is meant for defining complex transforms. It is not like it sounds, which is to create complex 'scenes' that include renderables — johntraver, May 28 '14 at 20:09

Add Modifier to Scene

1 Answers1