CodePen view

A simple example showing how to use hotpots animated sprite texture.

configuration.json

{
    "story":
    {
        "uid": "hotspots-sprite",
        "name": "Hotspots Sprite",
        "slug": "hotspots-sprite",
        "description": "This is sample of hotspots with animated sprite texture",
        "default": "scene-0",

        "scenes":
        [
            {
                "uid": "scene-0",
                "name": "First scene",
                "slug": "first-scene",
                "description": "This scene demonstrate different use cases of hotspot sprite",
                "background": "#202040",

                "media":
                {
                    "uid": "media-0",
                    "type": "grid",

                    "options":
                    {
                        "color": "#7F7FFF"
                    }
                },

                "hotspots":
                [
                     {
                        "uid": "hotspot-sprite-0",
                        "facingCenter": true,

                        "transform":
                        {
                            "position":
                            {
                                "radius": 200,
                                "theta": -30,
                                "phi": 0
                            }
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 56,
                                "height": 80
                            }
                        },

                        "material":
                        {
                            "sprite":
                            {
                                "url": "sprite.png",
                                "frames": "frames.json",
                                "animation": "two",
                                "animations":
                                [
                                    {
                                        "name": "two",
                                        "frameRate": 2
                                    },

                                    {
                                        "name": "sixty",
                                        "frameRate": 60
                                    }
                                ]
                            },

                            "transparent": false
                        },

                        "states":
                        {
                            "over":
                            {
                                "material":
                                {
                                    "sprite":
                                    {
                                        "animation": "sixty"
                                    }
                                }
                            }

                        }
                    },

                    {
                        "uid": "hotspot-sprite-1",
                        "facingCenter": true,

                        "transform":
                        {
                            "position":
                            {
                                "radius": 200,
                                "theta": 0,
                                "phi": 0
                            }
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 56,
                                "height": 80
                            }
                        },

                        "material":
                        {
                            "sprite":
                            {
                                "url": "sprite.png",
                                "frames": "frames.json",
                                "animation": "first",

                                "animations":
                                [
                                    {
                                        "name": "first",
                                        "start": 0,
                                        "end": 4,
                                        "frameRate": 2
                                    },

                                    {
                                        "name": "second",
                                        "start": 5,
                                        "end": 9,
                                        "frameRate": 2
                                    }
                                ]
                            },

                            "transparent": false
                        },

                        "states":
                        {
                            "over":
                            {
                                "material":
                                {
                                    "sprite":
                                    {
                                        "animation": "second"
                                    }
                                }
                            }

                        }
                    },

                    {
                        "uid": "hotspot-sprite-2",
                        "facingCenter": true,

                        "transform":
                        {
                            "position":
                            {
                                "radius": 200,
                                "theta": 30,
                                "phi": 0
                            }
                        },

                        "geometry":
                        {
                            "type": "plane",
                            "options":
                            {
                                "width": 56,
                                "height": 80
                            }
                        },

                        "material":
                        {
                            "sprite":
                            {
                                "url": "sprite.png",
                                "frames": "frames.json",
                                "frameRate": 2
                            },

                            "transparent": false
                        },

                        "events":
                        {
                            "onOver": "over-action-0",
                            "onOut": "out-action-0"
                        }
                    }
                ]
            }
        ]
    },

    "actions":
    [
        {
            "uid": "out-action-0",
            "target":
            {
                "identifier": "hotspot-sprite-2",
                "accessor": "material.displayObject"
            },
            "method":
            {
                "name": "resume"
            }
        },

        {
            "uid": "over-action-0",
            "target":
            {
                "identifier": "hotspot-sprite-2",
                "accessor": "material.displayObject"
            },
            "method":
            {
                "name": "pause"
            }
        }
    ]
}

frames.json

{
    "frames":
    [
        {
            "filename": "0.png",
            "frame": {"x":0,"y":0,"w":112,"h":160},
            "rotated": false,
            "trimmed": false,
            "spriteSourceSize": {"x":0,"y":0,"w":112,"h":160},
            "sourceSize": {"w":112,"h":160},
            "pivot": {"x":0.5,"y":0.5}
        },
        {
            "filename": "1.png",
            "frame": {"x":0,"y":160,"w":112,"h":160},
            "rotated": false,
            "trimmed": false,
            "spriteSourceSize": {"x":0,"y":0,"w":112,"h":160},
            "sourceSize": {"w":112,"h":160},
            "pivot": {"x":0.5,"y":0.5}
        },
        {
            "filename": "2.png",
            "frame": {"x":0,"y":320,"w":112,"h":160},
            "rotated": false,
            "trimmed": false,
            "spriteSourceSize": {"x":0,"y":0,"w":112,"h":160},
            "sourceSize": {"w":112,"h":160},
            "pivot": {"x":0.5,"y":0.5}
        },
        {
            "filename": "3.png",
            "frame": {"x":0,"y":480,"w":112,"h":160},
            "rotated": false,
            "trimmed": false,
            "spriteSourceSize": {"x":0,"y":0,"w":112,"h":160},
            "sourceSize": {"w":112,"h":160},
            "pivot": {"x":0.5,"y":0.5}
        },
        {
            "filename": "4.png",
            "frame": {"x":0,"y":640,"w":112,"h":160},
            "rotated": false,
            "trimmed": false,
            "spriteSourceSize": {"x":0,"y":0,"w":112,"h":160},
            "sourceSize": {"w":112,"h":160},
            "pivot": {"x":0.5,"y":0.5}
        },
        {
            "filename": "5.png",
            "frame": {"x":0,"y":800,"w":112,"h":160},
            "rotated": false,
            "trimmed": false,
            "spriteSourceSize": {"x":0,"y":0,"w":112,"h":160},
            "sourceSize": {"w":112,"h":160},
            "pivot": {"x":0.5,"y":0.5}
        },
        {
            "filename": "6.png",
            "frame": {"x":0,"y":960,"w":112,"h":160},
            "rotated": false,
            "trimmed": false,
            "spriteSourceSize": {"x":0,"y":0,"w":112,"h":160},
            "sourceSize": {"w":112,"h":160},
            "pivot": {"x":0.5,"y":0.5}
        },
        {
            "filename": "7.png",
            "frame": {"x":0,"y":1120,"w":112,"h":160},
            "rotated": false,
            "trimmed": false,
            "spriteSourceSize": {"x":0,"y":0,"w":112,"h":160},
            "sourceSize": {"w":112,"h":160},
            "pivot": {"x":0.5,"y":0.5}
        },
        {
            "filename": "8.png",
            "frame": {"x":0,"y":1280,"w":112,"h":160},
            "rotated": false,
            "trimmed": false,
            "spriteSourceSize": {"x":0,"y":0,"w":112,"h":160},
            "sourceSize": {"w":112,"h":160},
            "pivot": {"x":0.5,"y":0.5}
        },
        {
            "filename": "9.png",
            "frame": {"x":0,"y":1440,"w":112,"h":160},
            "rotated": false,
            "trimmed": false,
            "spriteSourceSize": {"x":0,"y":0,"w":112,"h":160},
            "sourceSize": {"w":112,"h":160},
            "pivot": {"x":0.5,"y":0.5}
        }
    ],
    "meta": {
        "image": "sprite.png",
        "format": "RGBA8888",
        "size": {"w":112,"h":1600},
        "scale": "1"
    }
}

Back to samples

21st Apr 2017