Getting started
Introduction
Implementing a Charamel Avatar into a website is very easy. Just insert three lines in your index.html and a Charamel Avatar appears.
<script src="https://vuppetmaster.de/vmapi/v4/api?key=AFMV3-KZRYV-6C263-JM78A"></script>
<style>
#webglcontainer
{
position: absolute;
width: 400px;
height: 400px;
background-color: #888888;
}
</style>
<script>
window.onload = () => {
vm = new VM.Vuppetmaster();
vm.start();
};
</script>
</html>
Sample Page
And here a minimalistic htm sample page:
<!doctype html>
<html lang="de">
<head>
<script src="https://vuppetmaster.de/vmapi/v4/api?key=AFMV3-KZRYV-6C263-JM78A"></script>
<style>
#webglcontainer
{
position: absolute;
width: 400px;
height: 400px;
background-color: #888888;
}
</style>
<script>
window.onload = () => {
vm = new VM.Vuppetmaster();
vm.api.start();
};
</script>
</head>
<button onclick="vm.api.playAnimationByName('welcome')">
Welcome
</button>
<body>
<div id="webglcontainer"></div>
</body>
</html>
The DIV with the id 'webglcontainer' is the area in which the avatar will be rendered.
Jsfiddle
To see and understand the easy implementation, please have a look in the JSFiddle Playground:
Here you are able to see a simple implementation of a Charamel Avatar and how easy it is to control the Avatar.