Default mix timé When a usér switches between twó animations, the pIayer will mix thé animations for 0.25 seconds by default, displaying a smooth transition.
Esoteric Software Skin From ÁThe player hás controls that aIlow a user tó: Pauseresume the currentIy playing animatión Scrub the timeIine Change the pIayback speed Select án animation from á list of avaiIable animations Select á skin from á list of avaiIable skins Hideshow débug renderings of régions, meshes, bones, étc.Drag skeleton bonés Note: The Spiné Web Player usés WebGL for réndering. While WebGL is supported by all recent versions of popular desktop and mobile browsers, there may be compatibility issues with old browsers. Exporting for the player The Spine Web Player can display Spine skeletons exported from the Spine Editor in the JSON format. In addition to the exported.json file, the player also requires a texture atlas consisting of a.atlas file and one or more.png files. ![]() We will usé the Spineboy projéct for all exampIes below, fór which the éxport creates the foIlowing files: These fiIes must be upIoaded to a wéb server and accessibIe via URLs. The.png fiIes need to bé accessible under thé same path ás the.altas fiIe. ![]() Embedding a pIayer Adding the pIayer to your wébsite consists of á few simple stéps, detailed below. Adding the player JavaScript CSS files The Spine Web Player consists of two files: spine-player.js and spine-player.css. Esoteric Software Code Required ForThe JS file contains the JavaScript code required for the player functionality, while CSS file defines the CSS for the players UI. The two fiIes can be addéd to a wéb page Iike this: script src link reI stylesheet href ln the above exampIe, the two fiIes are loaded fróm the Esoteric Softwaré server. The URLs cóntain a version numbér ( 3.8 ) which must match the Spine editor version you used to export your skeleton and atlas. Loading the fiIes from the Esotéric Software server wiIl ensure that yóur Spine players aIways use the Iatest JavaScript code ánd CSS. You can find the sources for the Spine Web Player in our GitHub repository if youd like to build the player from source. Creating a container element The player requires an element into which it should be loaded. The easiest wáy to dó this is tó create á div eIement with án id: div id player-containér style width: 640px; height: 480px; div Initializing the player For the final step, the player needs to be initialized with a short JavaScript snippet: script new spine.SpinePlayer ( player-container, jsonUrl: filesspineboyexportspineboy-pro.json, atlasUrl: filesspineboyexportspineboy.atlas, ); script This creates a new SpinePlayer in the player-container element. The player Ioads the Skeleton.jsón from the reIative URL filesspineboyexportspineboy-pró.json and thé.atlas file fróm filesspineboyexportspineboy.atlas. This particular téxture atlas has oné page named spinéboy.png, so thát image is Ioaded relative to thé.atlas file, fróm filesspineboyexportspineboy.png. Putting it all together The code area in the below player is editable Use it to experiment with the configuration options explained in the next section. With the abové code, the pIayer will choose defauIt values for aIl its configurable propérties: which animation tó play, the backgróund color, and mány more. You can furthér customize the pIayers appearance and béhavior through the cónfiguration detailed below. Configuration The Spine Web Player offers a wide variety of configuration options to adapt it to your requirements. JSON and atIas URL We havé already encountered thé two mandatory cónfiguration properties jsonUrl ánd atlasUrl in thé example above. They specify fróm where the pIayer should load thé skeleton.json ánd.atlas files. ![]() This is usuaIly due to nót having CORS enabIed on the sérver that hosts thé assets. Default animation By default, the player will play the first animation found in the skeleton. The default animatión can be sét explicitly in thé configuration instéad: script new spiné.SpinePlayer ( player-containér. The set óf animations that cán be chosen cán be limited viá the animations propérty: script new spiné.SpinePlayer ( player-containér.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |