mrsoya / soya2d

Soya2D is a web interactive animation(game) engine for modern web browsers

Soya2D is a web interactive animation(game) engine for modern web browsers

Version2 is in beta now

Entry

<script>
    //define scene
    var scene = {
        onPreload:function(game){
            //set scale mode
            game.stage.scaleMode = soya2d.SCALEMODE_NOSCALE;
            //set align mode
            game.stage.alignMode = soya2d.ALIGNMODE_CENTER;

            //load assets
            game.load.baseUrl = 'assets/image/';
            game.load.image(['soya.png','logo.png']);

            game.load.atlas({'imgFont':['font.png','font.ssheet']});

            game.load.baseUrl = 'assets/xml/';
            game.load.xml({
                ui:'ui.xml'
            });
        },
        onInit:function(game){
            //set background
            game.stage.background('#000');
            //apply ui
            this.setView(game.assets.xml('ui'));


            //add a text to world
            game.add.text({
                text:'Hello Soya2D',
                font:game.assets.atlas('imgFont')//use image font
            });
        }
    }

    //render all
    soya.render('#stage',1024,768,scene);
</script>

Website

http://soya2d.com

Local Examples

1. npm install http-server -g
2. http-server ./examples/ -p30760 -o

Gen API doc

1. npm -g install yuidocjs
2. yuidoc

License

base on MIT

soya2d's Issues

loader的show为false的时候调用start的错误

自行调用load.start，如果在show为false的情况下的确会报错。但是在show为true的时候显示是正常的

soya2d.Sound 这个对象是如何使用的?

var StartScene_BGM=new soya2d.Sound();
StartScene_BGM.play() 的参数是什么?
调试发现play方法好像没有参数,音频参数是在new的时候就传入?
那么又如何传入音频参数?

请问下有没有对纹理加入滤镜的计划？

首先先对大大的引擎点个赞，已经用到了公司的项目里。
最近有对图片进行对图片填充颜色的需求，类似于那种剪影的效果。但是从引擎的API上面没有找到对应的方法，再查引擎也没有响应的实现。
针对这个问题我参照纹理fromColor的实现，在原型dispose方法下面新建了一个fillColor方法，原理是把纹理图片转成canvas再进行像素处理，希望大大可以考虑一下更好的实现。

    fillColor: function(RGBA, repaint) {
        var data = document.createElement('canvas'),
            ctx = data.getContext('2d'),
            imageData,
            brightness;
        repaint = _.isUndefined(repaint) ? true : repaint;
        data.width = this.__data.width;
        data.height = this.__data.height;
        ctx.drawImage(this.__data, 0, 0, data.width, data.height, 0, 0, data.width, data.height);
        imageData = ctx.getImageData(0, 0, data.width, data.height);
        for (i = 0; i < imageData.data.length; i += 4) {
            brightness = repaint ? 1 :
            ((0.34 * imageData.data[i] + 0.5 * imageData.data[i + 1] + 0.16 * imageData.data[i + 2]) / 255);
            imageData.data[i] = brightness * RGBA[0]; // r
            imageData.data[i + 1] = brightness * RGBA[1]; // g
            imageData.data[i + 2] = brightness * RGBA[2]; // b
            imageData.data[i + 3] = imageData.data[i + 3]; // alpha
        }
        ctx.putImageData(imageData, 0, 0);
        this.__data = data;
    }

点击事件出不来

刚开始用正常，来回点了几次就这样了，然后接结束进程，重新打开还是这样。

'CanvasRenderingContext2D.webkitImageSmoothingEnabled'的问题

'CanvasRenderingContext2D.webkitImageSmoothingEnabled' is deprecated. Please use 'CanvasRenderingContext2D.imageSmoothingEnabled' instead.

Studio崩溃

打开一个代码窗口，先关闭主窗口，再关闭代码窗口就能重现。

关于滚动的更好实现方式

最近碰到一个问题，我需要在一个容器范围内实现滚动文字的效果，以前拿其他引擎实现的时候会使用一个clip的方法，可以直接在显示区域内裁剪容器，使得容器内的子元素不会“溢出”。

在soya2d中还没有找到直接的方法可以使用，如果直接设置子元素x,y为负值的话就会显示在父容器的外面（左/上）去。看了下示例发现可以使用卷轴精灵来实现，但是觉得有些奇怪，如果我给某个容器设置了宽高和坐标，然后在里面添加一个卷轴精灵，宽高继承容器，xy都为0，卷轴精灵里面放一张图，坐标xy都是0，按照想法来说应该是可以了，但是此时的效果是背景图只显示了部分，看起来效果就是背景图xy是在左上角坐标原点，而我期待的是xy坐标在父容器的左上角上，后来尝试将背景图xy坐标调整的和父容器一致，结果符合预期了。

我没有来得及仔细研究过卷轴精灵的源码，但是还是希望大大可以出个支持滚动容器，不需要太多的属性调整就OK了。

getBounds计算的宽度或text的宽度不包括里面的空格

如果text中间包含多个空格text的宽度保持不变，用getBounds计算宽度时效果一样，中间空格的增加不影响宽度，（是多个空格只加上一个空格的宽度）

http://soya2d.com/lessons/0.php 页面代码有误

然后，你需要定义一个容器，用来显示soya2d，通常是一个DIV元素，比如:

文档这里的闭合div标签应该是 /div

soya2d官网无法访问

另外impexjs有无意向提供一个lite版，考虑到seo需要，仅提供“数据绑定/DOM操作/事件响应”

按需的单个文件加载

引擎能不能提供单个资源的按需加载接口呢？也只监听这个资源加载成功后的回调。比如游戏里面的头像需要按需加载。但是现在我快速加载两个头像，执行了两次load.start。然后监听end的事件，有可能会出现只加载好一个的时候就触发了end事件，这样在没有加载好资源的end回调里面就可能报错

找到一个文本这边计算每行内容的问题

在有一大段包括\n换行的文本里，会有吞字的情况出现，我看了下源码，只显示了在src/text/Text.js11行的lineString = text.substr(currCharPos, charNum + 1 + j); 这边得到的lineString

反复试了很多遍，后来在138行 if(lineWidth > this.w) 这个判断之后 又加了一个下面的判断

if (currCharPos + lineString.length == l) {
    lines.push(lineString);
    currCharPos += lineString.length;
    break;
}

文本就齐了。。

画扇形的时候startAngle为360时为弯弧

在画扇形的时候，startAngle为其他值都没问题，但为360的时候显示为弯弧，为360.1的时候就没问题

path属性支持太少

SVG中path的d属性有以下几种：



M/m = moveto(M X,Y) ：将画笔移动到指定的坐标位置
L/l = lineto(L X,Y) ：画直线到指定的坐标位置
H/h = horizontal lineto(H X)：画水平线到指定的X坐标位置
V/v = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
C/c = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S/s = smooth curveto(S X2,Y2,ENDX,ENDY)：平滑曲率
Q/q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
T/t = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
A/a = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径
// m, l, h, v, c, s, q, t, a小写的话是相对位置
但是在：soya2d.path仅仅支持：
M, L, Q, C, Z
M/m = moveto | | x y | M 50 50 
L/l = lineto | L/l | (x y)+ | L 50 50 100 100 
Q/q = quadraticCurveTo | Q/q | (cpx cpy x y)+ |
C/c = bezierCurveTo | | (cp1x cp1y cp2x cp2y x y)
Z/z = closepath | | 无 | 关闭路径

由于复杂的矢量图形是由图形编辑器生成的，所以会产出很多不支持的属性，导致路径无法使用。希望尽快解决一下

手机上click事件和input类型被阻断

在手机上绑定click事件，或需要input输入的时候发现无法触发，后发现proxy里面有个else{e.preventDefault}去掉后就好了

多个元素绑定同一事件

现在如果需要多个元素绑定同一事件需要每个ID都写一行绑定，可否类似jquery里面的$(".class")一次绑定多个元素执行同一事件呢？

XML里面的元素JS需要调用它需要初始化

现在XML里面的元素需要做JS操作需要设置ID然后用findView来实现绑定，这样的话如果需要操作的元素多了findView也写的比较多，可否里面有某个属性可以直接映射到JS呢