舰R百科是靠无数志愿编辑者持续地建设更新完善的。编辑非常简单,无需代码知识,请勇于更新页面!
编辑入门 | 资助百科 | 留言讨论页 | 微博@舰R百科 | 百科编辑讨论Q群:366818861

微件:Live2d:修订间差异

来自舰R百科
跳转到导航 跳转到搜索
无编辑摘要
无编辑摘要
 
(未显示同一用户的13个中间版本)
第1行: 第1行:
<noinclude>
<noinclude>
WIP
WIP
<div id='live2d-container' style='display:none;'>
{{live2d|index=248_1}}
<div id='live2d-background' style='display:inline-block;'>
<canvas id='live2d-canvas' width='640' height='768'></canvas>
</div></div>
{{#widget:live2d|index=248_1}}
</noinclude><includeonly>
</noinclude><includeonly>
<button id='live2d-button' onclick='live2d_main()'>Live2D</button>
<button id='live2d-button' onclick='live2d_main()'>点击显示</button>
<script src='https://cruiseliu.github.io/live2d-demo/src/live2d.min.js'></script>
<script src='https://zjsnrwiki.github.io/live2d/src/live2d.min.js'></script>
<script src='https://cruiseliu.github.io/live2d-demo/src/Live2DFramework.js'></script>
<script src='https://zjsnrwiki.github.io/live2d/src/Live2DFramework.js'></script>
<script src='https://cruiseliu.github.io/live2d-demo/src/MatrixStack.js'></script>
<script src='https://zjsnrwiki.github.io/live2d/src/MatrixStack.js'></script>
<script src='https://cruiseliu.github.io/live2d-demo/src/ModelSettingJson.js'></script>
<script src='https://zjsnrwiki.github.io/live2d/src/ModelSettingJson.js'></script>
<script src='https://cruiseliu.github.io/live2d-demo/src/PlatformManager.js'></script>
<script src='https://zjsnrwiki.github.io/live2d/src/PlatformManager.js'></script>
<script src='https://cruiseliu.github.io/live2d-demo/src/LAppModel.js'></script>
<script src='https://zjsnrwiki.github.io/live2d/src/LAppModel.js'></script>
<script>
<script>
var l2d_url = "/wg_img/ccbResources/live2D/<!--{$index|escape:'quotes'}-->/model.model.json";
var l2d_index = "<!--{$index|escape:'quotes'}-->";
var l2d_url = '/wg_img/ccbResources/live2D/' + l2d_index + '/model.model.json';


var l2d_canvas = null;
var l2d_canvas = null;
第28行: 第25行:
var l2d_triggers = [ ];
var l2d_triggers = [ ];


function l2d_main()
var l2d_eyeY = 0.9;
 
function live2d_main()
{
{
    // I don't know how to calculate eyes' coordinate, so hard coded here
    if (l2d_index == '59_1')
        l2d_eyeY = 0.945;
    else if (l2d_index == '248_1')
        l2d_eyeY = 0.885;
    l2d_canvas = document.getElementById('live2d-canvas');
    var bg = document.getElementById('live2d-background').style;
    var vw = document.documentElement.clientWidth;
    if (l2d_canvas.width > vw * 0.9) {
        l2d_canvas.height *= vw * 0.9 / l2d_canvas.width;
        l2d_canvas.width = vw * 0.9;
        bg.height = l2d_canvas.height + 'px';
        bg.width = l2d_canvas.width + 'px';
    }
     document.getElementById('live2d-container').style.display = 'block';
     document.getElementById('live2d-container').style.display = 'block';
     document.getElementById('live2d-button').style.display = 'none';
     document.getElementById('live2d-button').style.display = 'none';


    var bg = document.getElementById('live2d-background').style;
     var time = new Date().getHours();
     var time = new Date().getHours();
    console.log(time);
     if (time < 6)
     if (time < 6)
         bg.backgroundImage = 'url(user_detail_bg1.png)';
         bg.backgroundImage = 'url(/wg_img/ccbResources/user_detail_bg1.png)';
     else if (time < 12)
     else if (time < 12)
         bg.backgroundImage = 'url(user_detail_bg2.png)';
         bg.backgroundImage = 'url(/wg_img/ccbResources/user_detail_bg2.png)';
     else if (time < 18)
     else if (time < 18)
         bg.backgroundImage = 'url(user_detail_bg3.png)';
         bg.backgroundImage = 'url(/wg_img/ccbResources/user_detail_bg3.png)';
     else
     else
         bg.backgroundImage = 'url(user_detail_bg4.png)';
         bg.backgroundImage = 'url(/wg_img/ccbResources/user_detail_bg4.png)';


    l2d_canvas = document.getElementById('live2d-canvas');
     Live2D.init();
     Live2D.init();
     Live2DFramework.setPlatformManager(new PlatformManager);
     Live2DFramework.setPlatformManager(new PlatformManager);
第91行: 第104行:
function initTriggers()
function initTriggers()
{
{
     for (let hitArea of l2d_config.hit_areas)
     for (var hitArea of l2d_config.hit_areas)
         for (let triggerData of l2d_config.trigger)
         for (var triggerData of l2d_config.trigger)
             if (hitArea.id == triggerData.id) {
             if (hitArea.id == triggerData.id) {
                 let trigger = { area: hitArea.name, gesture: triggerData.actionType };
                 var trigger = { area: hitArea.name, gesture: triggerData.actionType };
                 trigger.expressions = [ ];
                 trigger.expressions = [ ];
                 for (let action of triggerData.action) {
                 for (var action of triggerData.action) {
                     if (l2d_config.motions[action] != null) {
                     if (l2d_config.motions[action] != null) {
                         trigger.motion = action;
                         trigger.motion = action;
                     } else {
                     } else {
                         for (let exp of l2d_config.expressions)
                         for (var exp of l2d_config.expressions)
                             if (exp.name == action)
                             if (exp.name == action)
                                 trigger.expressions.push(exp.name);
                                 trigger.expressions.push(exp.name);
第138行: 第151行:
}
}


function activeTrigger(trigger, isStroke)
function activeTrigger(trigger)
{
{
     l2d_model.startMotion(trigger.motion, isStroke ? 1 : 0, trigger.area == 'head' ? 2 : 3);
     l2d_model.startRandomMotion(trigger.motion, trigger.area == 'head' ? 2 : 3);
     if (trigger.expressions.length > 0) {
     if (trigger.expressions.length > 0) {
         l2d_model.setExpression(trigger.expressions[0]);
         l2d_model.setExpression(trigger.expressions[0]);
第153行: 第166行:
     var y = transformViewY(event.clientY - rect.top);
     var y = transformViewY(event.clientY - rect.top);


     l2d_dragMgr.setPoint(x, y);
     l2d_dragMgr.setPoint(x, y - l2d_eyeY);
     l2d_dragging = true;
     l2d_dragging = true;


     l2d_dragging = true;
     l2d_dragging = true;
     for (let trigger of l2d_triggers) {
     for (var trigger of l2d_triggers) {
         if (l2d_model.hitTest(trigger.area, x * 1.5, y)) {
         if (l2d_model.hitTest(trigger.area, x * 1.5, y)) {
             l2d_curTrigger = trigger;
             l2d_curTrigger = trigger;
第164行: 第177行:
             } if (trigger.gesture == 'stroke') {
             } if (trigger.gesture == 'stroke') {
                 l2d_strokeStart = Date.now();
                 l2d_strokeStart = Date.now();
                activeTrigger(trigger);
             } else if (trigger.gesture == 'up') {
             } else if (trigger.gesture == 'up') {
                 l2d_dragFromY = y;
                 l2d_dragFromY = y;
第179行: 第191行:


     if (l2d_dragging) {
     if (l2d_dragging) {
         l2d_dragMgr.setPoint(x, y);
         l2d_dragMgr.setPoint(x, y - l2d_eyeY);


         if (l2d_strokeStart != null) {
         if (l2d_strokeStart != null) {
第185行: 第197行:
                 l2d_strokeStart = null;
                 l2d_strokeStart = null;
             else
             else
                 if (Date.now() - l2d_strokeStart > 8000)
                 if (Date.now() - l2d_strokeStart > 3000)
                     activeTrigger(l2d_curTrigger, true);
                     activeTrigger(l2d_curTrigger);
         }
         }



2016年10月8日 (六) 00:27的最新版本

WIP