layaair 3D教程

layaair 3D教程

里面模型包括摄像机默认中心点都是中心

    var camera = (scene.addChild(new Laya.Camera(0, 0.1, 100)));
        camera.transform.translate(new Laya.Vector3(0, 10, 0));
        camera.transform.rotate(new Laya.Vector3(-90, 0, 0), true, false);

上面代码是摄像机垂直向下 观看模型

如果做动画直接
运行 plane.transform.translate(new Laya.Vector3(0, 0, 0.01), false, false); 运行一次 播放一次动画

cocoscreator做嵌套动画教程

1 先做子精灵 wrapmode模式不一样的精灵动画 然后再做父精灵动画 准没错

ps:一旦创建了父精灵 wrapmode会自动给所有子精灵 wrapmode加上 这个时候 需要 给子精灵手动添加anim组件 创建个clip拖进去 刷新下就好

一般建议直接在父精灵设置 全部normal就好 不要在紫精灵设置循环动画 因为没办法设置延迟 只能代码控制延迟

cocoscreator动态修改数据教程

cocoscreator动态修改数据教程


cc.Class({
    extends: cc.Component,

    properties: {
        label: {
            default: null,
            type: cc.Label
        },
       label1: {
            default: null,
            type: cc.Label
        },        
        // defaults, set visually when attaching this script to the Canvas
        text: 'Hello, Wordd'
    },

    // use this for initialization
    onLoad: function () {
        this.label.string = this.text;
        this.label1.string = this.text;

    },

    // called every frame
    update: function (dt) {
      this.label.string = "fwe";
        this.label1.string = this.text;        

    },
});

先添加个了

 label: {
            default: null,
            type: cc.Label
        },

然后返回到UI界面 新建个label节点 然后拖进去 就好了 然后就可以 this.label.string = “fwe”;控制了

cocoscreator 播放动画

 cc.Class({
    extends: cc.Component,
    properties: {
        label: {
            default: null,
            type: cc.Label
        },
        label1: {
            default: null,
            type: cc.Label
        },
        anim: {
            type: cc.Animation,
            default: null,
        },
        // defaults, set visually when attaching this script to the Canvas
        text: 'Hello, Wordd'
    },
    // use this for initialization
    onLoad: function() {
        this.label.string = this.text;
        this.label1.string = this.text;
    },
    start: function() {
        // this.anim_com.play("anim_class");
        this.anim.play(); // 播放的是defalut clip指向的动画clip
    },
    // called every frame
    update: function(dt) {
        this.label.string = "fwe";
        this.label1.string = this.text;
    },
});

webgl shader

webgl shader
先处理顶点 再处理颜色

比方说画三角形
vs那就先弄好3个三角形顶点的坐标
fs然后设置颜色

比方说纹理贴图(方形图片)
vs 先弄好4个顶点
fs然后纹理贴图

ps:需要注意的是varying 这个东西只用于画渐变和纹理贴图需要用

javascript tofixed四舍五入的方法

javascript tofixed四舍五入的方法

Number.prototype.toFixed = function(d) {
    var s = this + "";
    if (!d) d = 0;
    if (s.indexOf(".") == -1) s += ".";
    s += new Array(d + 1).join("0");
    if (new RegExp("^(-|\\+)?(\\d+(\\.\\d{0," + (d + 1) + "})?)\\d*$").test(s)) {
        var s = "0" + RegExp.$2,
            pm = RegExp.$1,
            a = RegExp.$3.length,
            b = true;
        if (a == d + 2) {
            a = s.match(/\d/g);
            if (parseInt(a[a.length - 1]) > 4) {
                for (var i = a.length - 2; i >= 0; i--) {
                    a[i] = parseInt(a[i]) + 1;
                    if (a[i] == 10) {
                        a[i] = 0;
                        b = i != 1;
                    } else break;
                }
            }
            s = a.join("").replace(new RegExp("(\\d+)(\\d{" + d + "})\\d$"), "$1.$2");
        }
        if (b) s = s.substr(1);
        return (pm + s).replace(/\.$/, "");
    }
    return this + "";
};

jquery tweenmax时间轴动画

jquery tweenmax时间轴动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>{$title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <!-- Link Swiper's CSS -->
    <include file="commonheader" />
</head>

<body>
    <include file="jiazai" />
    <include file="commonmokuai" />
    <div class="showcontainer" style="display: block;">
      <div class="ddd1" style="position: absolute;left:10%;top:20%;">111111111</div>
    </div>
    <script src="{$yuming}/js/TweenMax.js"></script>
    <script src="{$yuming}/js/DrawSVGPlugin.min.js"></script>
    <include file="commonfooter" />
    <script type="text/javascript">
      var times=0;
    $(function() {
      var tl = new TimelineLite();

       var tm = new TimelineMax();
       // tm.to($('.ddd1'), 3, {left:300,delay:0,repeat: 1, yoyo: true,repeatDelay: 1,ease: Linear.easeNone});//将一个动画添加到时间轴
       // tl.add(tm);//将一个动画添加到时间轴
       // 
      tm.to($('.ddd1'), 3, {left:300,delay:0,repeatDelay: 1,ease: Linear.easeNone});//将一个动画添加到时间轴
       tl.add(tm);//将一个动画添加到时间轴
       // 
       tl.pause();

       setInterval(function(){
             times+=0.1;
             tl.progress(times);
       },200)
   

    })
    </script>
</body>

</html>

layaair matterjs教程

layaair matterjs教程

$(function() {
    var Browser = Laya.Browser;
    var WebGL = Laya.WebGL;
    var Matter = window.Matter;
    var LayaRender = window.LayaRender;
    var stageWidth = 750;
    var stageHeight = 1206;
  
    Laya.init(stageWidth, stageHeight, WebGL);
     Laya.stage.scaleMode = "fixedwidth";
    // module aliases
    var Engine = Matter.Engine,
        Render = Matter.Render,
        World = Matter.World,
        Bodies = Matter.Bodies;
    // create an engine
    var engine = Engine.create({
        enableSleeping: true
    });
    // engine.world.gravity.y = 0;//关闭重力
    // create a renderer
    // var render = Render.create({
    //     element: document.body,
    //     engine: engine
    // });
    
    var render = LayaRender.create({
        engine: engine,
        width: 750,
        height: 1206,
        options: {
            // background: '../../res/physics/img/background.png',
            wireframes: false //true//           
        }
    });
    // create two boxes and a ground
    var boxA = Bodies.rectangle(100, 200, 750, 10);
    var boxB = Bodies.rectangle(450, 50, 47, 47,{render:{
            sprite: {
                texture: '/fudiqixi/images/2/xiaoqiu.png'
            }
        } });
    var ground = Bodies.rectangle(750/2, 1206/2, 750, 60, {
        isStatic: true
    });
    // add all of the bodies to the world
    World.add(engine.world, [boxA, boxB, ground]);
    // run the engine
    Engine.run(engine);
    // run the renderer
    // Render.run(render);
    LayaRender.run(render);
})

ps:需要引入LayaRender.js 和matterjs.js layaair默认是不引入的

matterjs 默认中心点在中间 layaair在左上 2个结合的时候 务必保持一致