The hilo's discuss from hiloteam

比如

sprite.shader = myShader

然后渲染sprite的时候用myShader来代替默认shader.

在windows系统下用webpack打包，由yo hilo生成的js文件路径分隔符为“\"则出错！

如何实现y轴的旋转

rotation可以实现x轴旋转，如何实现y轴的旋转，类似css3的rotateY

new Stage 对象的时候 scale 相关的参数都没有了吗？那如何适配屏幕呢？

教程文档中<<使用Hilo快速开发Flappy Bird>>使用了老版本会产生误导

使用Hilo快速开发Flappy Bird 中示例代码和项目源文件中的hilo-standalone.js使用的是Hilo 0.1.1, 而目前官网的文档是基于1.0.0版本的.

在尝试 Stage renderType 时发现没有效果, 因此升级到Hilo 1.0.0, 然后就跑不起来了, 主要是 API 有些差别了.
例如

// OverScene.js
// v0.1.1
var whiteMask = new Hilo.View({
    id: 'mask',
    width: this.width,
    height: this.height,
    alpha: 0.0
}).setBgFill('#fff');

// v1.0.0
var whiteMask = new Hilo.View({
    id: 'mask',
    width: this.width,
    height: this.height,
    alpha: 0.0
});
whiteMask.background = '#fff';

// Holdbacks.js
// v0.1.1
this.moveTween.time = (this.x - targetX) * 4;
// v1.0.0
this.moveTween.duration = (this.x - targetX) * 4;

因此请更新下 Flappy Bird 示例的文档, 以免其他小伙伴出现同样的疑惑.

hilo的npm包是否有计划发布

CMD那一片的代码加上一个入口文件的话就可以作为npm包使用了，相应的包的构建和上传可以在项目的gulpfile中对cmd代码生成处做一些修改是实现，不知道是否有这样的计划

var countdown = new H.Graphics();
countdown.beginFill('#f00');
countdown.drawRect(100,10,400,30);
countdown.endFill();
console.log(countdown);
this.addChild(countdown);
Main.ticker.addTick(H.Tween);
H.Tween.to(countdown,{
width : 10,
rotation : 20,
height : 10,
alpha : 5
},{
duration : 1000
});
我尝试去改变图形的宽高,但是发现没有效果,alpha和rotation都是可以改变,是系统设定就这样的么

请问,Hilo在内存管理提高性能渲染性能方面采用的方案是什么呢

一个Container的场景使用一次以后不在需要将其visible属性设置为false是否意味着资源还存在,只是不处于渲染的队列中了,那么把他从舞台中移除,并且其实力指向null是否可以释放内存提高效率呢,此外还有其他的一些提高性能方面的经验么,感觉文档中并未提及这一部分

Asset 可否支持预加载语音、视频资源。

请问Text setFont 如果使用啊，还有设置背景等

文档写的都特别模糊，试了几次都不对，还有请问能设置边框吗？

setFont(font:String):Text
parameters
font:String — 要设置的字体CSS样式。

招募api文档翻译

下面列表是目前正在翻译的api文档，欢迎认领，提交pull request。有想认领的在下方回复认领哪个文件哈, 我会随时更新列表。这里是翻译方式，翻译样例view.js，翻译好后，提交到doc-translation 分支上

Please, use english in code comments, not chinese

It's impossible to read, guys, i beg you, use english.

能否官网的demo提供下载

提供一个移动端的适配建议

用Hilo有一段时间了,发现Hilo并没有提供太多的适配方案,目前我们在使用的适配方案如下
//定义常量
var WINDOW_WIDTH = $(window).width()
var WINDOW_HEIGHT = $(window).height()
var STANDARD_RATIO = 750 / 1206
var DEVICE_RATIO = WINDOW_WIDTH / WINDOW_HEIGHT
var CANVAS_WIDTH = DEVICE_RATIO >= STANDARD_RATIO ? WINDOW_HEIGHT * STANDARD_RATIO : WINDOW_WIDTH
var CANVAS_HEIGHT = DEVICE_RATIO >= STANDARD_RATIO ? WINDOW_HEIGHT : WINDOW_WIDTH / STANDARD_RATIO
var SCALE = DEVICE_RATIO >= STANDARD_RATIO ? WINDOW_HEIGHT / 1206 : WINDOW_WIDTH / 750 //我们公司的设计稿是750 * 1206的

var stageDom = document.getElementById('stage')
stageDom.style.backgroundColor = '#64acff'
stageDom.style.height = CANVAS_HEIGHT + 'px'
stageDom.style.width = CANVAS_WIDTH + 'px'
stageDom.style.minHeight = CANVAS_HEIGHT + 'px'
$('body').css('min-height',WINDOW_HEIGHT + 'px')//处理微信输入框问题

var stage = new Hilo.Stage({
container: stageDom,
width: CANVAS_WIDTH,
height: CANVAS_HEIGHT,
scale: SCALE
})
然后在less层把stage这个舞台元素上下左右居中即可,这样适配属于等比例拉伸,并填充手机其中一边.接下来所有的元素在设置x,y,width,height的时候都需要乘以缩放比即可

为什么点击游戏画面会停顿一下

这个是canvas的问题吗，有没有解决方案？

如例子中的 Flappy Bird

游戏方式是点击屏幕，小鸟会上升一点。

但触摸或点击事件触发的那一刻，画面会停顿一下，停顿时间估计不到1S。

另外自己编写的例子在chrome浏览器中测试时偶尔会有一个超卡的情况。

比如刷新后，舞台上的元素动画都正常，但是点击或触摸事件触发时动画会好卡，大概会卡2秒左右，期间动画也是断断续续的播放，然后再过几秒钟后自然就恢复了，再怎么点击也不会卡了，只是这个情况是偶尔出现的。

四高一

TextureAtlas在DOMElement中无法实现适配

请问一下，如何做手机屏幕适配。

Hilo 的文档好少啊，还有好些不全，什么时候更新下

游戏超时判断如何实现

应用场景：游戏倒计时30s结束给出游戏结果，在游戏中用户可能会切换到其他页面再回到游戏页面，不知道具体的实现步骤是怎样的，希望指点一下

so amazing

Hilo.Bitmap setImage 貌似有bug

Hilo.Bitmap setImage 貌似有bug，setImage之后这图片对象就不见了，更改rect 也会出现同样的问题

Hilo WebGL下的性能和 pixi 比差了好多啊。

建议你们开发一个和 pixi的小兔子类似的性能压力测试用例

http://www.goodboydigital.com/pixijs/bunnymark/

然后好好测试优化一下。

我看了下代码，总体思路都差不多，都是能批量就批量，但是不知道为啥性能差那么多。
我也不是很懂webgl ，所以建议啥的我也给不了。

Flappy Bird示例在部分手机上“频繁抖动”的问题

教程中提供的Flappy Bird代码没有禁止web页面上下拉，在部分手机上会出现抖动。

可以通过下面的方法解决：

$(document).ready(function() {
function stopScrolling(touchEvent) {
touchEvent.preventDefault();
}
document.addEventListener('touchstart', stopScrolling, false);
document.addEventListener('touchmove', stopScrolling, false);
});

参考：http://zhihu.com/question/29502345/answer/44612517

测试用例 BitmapText 报错

86 passing (6s)
4 failing

view BitmapText setText:
Error: diff image error:BitmapText-new
at utils.js:37:34
at HTMLImageElement.img.onload (utils.js:76:25)
view BitmapText textAlign center:
Error: diff image error:BitmapText-center
at utils.js:37:34
at HTMLImageElement.img.onload (utils.js:76:25)
view BitmapText textAlign left:
Error: diff image error:BitmapText-left
at utils.js:37:34
at HTMLImageElement.img.onload (utils.js:76:25)
view BitmapText textAlign right:
Error: diff image error:BitmapText-right
at utils.js:37:34
at HTMLImageElement.img.onload (utils.js:76:25)

Receiving support?

Hi there! This isn't a issue but I didn't know where to ask!
Are you accepting donations or supports? Because may you got some money hilo, but there is no donate button o something like that.
I don't trying to spam you, but I want to invite you to beerpay.io, a simple platform to monetize open source projects, like Bulma.
I know that the open source is free, but it's okay if someone want to contribute in other way.

Thanks for this work!

DOMElement 显示文本框的问题。

为啥文本框不能输入呀? 是不支持交互吗？

var x = document.createElement("INPUT");
x.setAttribute("type", "text");
x.setAttribute("value", "Hello World!");

        //dom element
        var UsernameText = new Hilo.DOMElement({
            id: 'userNameText',
            element: x,
            width: 100,
            height: 100,
            pointerEnabled:true,
            x: 10,
            y: 80
        });

Tween 文档中缺少对属性 stagger 的介绍。

http://hiloteam.github.io/Hilo/docs/api/symbols/Tween.html
Tween 文档中缺少对属性 stagger 的介绍。

在Demo中可以查看到有此属性。
https://github.com/hiloteam/Hilo/blob/master/examples/Tween.html#L62

文档太旧

比如 TextureAtlas 、createSpriteFrames

有篇文章中说到的赛车demo相关文章可以在哪里看到

看了Hilo的一些例子，然后用的时候上手还是有些不顺，希望能看到更多的demo

请问可否多开源几个演示作品？

只有愤怒的小鸟吗？

Text性能极差

我基于examples的text.html改写了一个例子，用来测试hilo的text的性能，代码如下：

   function init(){
            var stage = new Hilo.Stage({
                renderType:renderType,
                container: gameContainer,
                width: stageWidth,
                height: stageHeight
            });

            //start stage ticker
            var ticker = new Hilo.Ticker(60);
            ticker.addTick(stage);
            ticker.start();

            var font = "14px arial";
            var content = "Hello World! Hilo是一款HTML5 2D游戏引擎，欢迎使用。";

            var arr = [];
            for(var i = 0; i < 1000; i++){
                var text = new Hilo.Text({
                    font: font,
                    text: content,
                    lineSpacing: 0,
                    width: 250,
                    height: 100,
                    x: Math.random() * stageWidth,
                    y: Math.random() * stageHeight
                });

                // set cache for better performance
                text.cache(true);
                text.addTo(stage);
                arr.push(text);
            }

            ticker.addTick({
                tick: function(){
                    for(var i = 0, len = arr.length; i < len; i++){
                        arr[i].x += 1;
                    }
                }
            })
        }

测试发现，hilo的text相比pixi来说性能差非常多，hilo在渲染5000个字体的时候平均只有5-6fps，而pixi可以稳定在15-20fps。后来我查看了代码发现，在代码的_draw方法中，如果renderType == "canvas"则永远不会用到cache，因此我修改后，性能与pixi一致。

 var me = this;

        /**
         * 修改后5000个文字10-20fps
         * renderer.draw(me)
         * return;
         *
         */

        if(renderer.renderType === 'canvas'){
            me._draw(renderer.context);
        }
        else if(renderer.renderType === 'dom'){
            var drawable = me.drawable;
            var domElement = drawable.domElement;
            var style = domElement.style;

            style.font = me.font;
            style.textAlign = me.textAlign;
            style.color = me.color;
            style.width = me.width + 'px';
            style.height = me.height + 'px';
            style.lineHeight = (me._fontHeight + me.lineSpacing) + 'px';

            domElement.innerHTML = me.text;
            renderer.draw(this);
        }
        else{
            // canvas永远走不到
            me.cache();
            renderer.draw(me);
        }

是基于什么原因，text在canvas下不使用cache么？

clipChildren:Boolean
指示是否裁剪超出容器范围的子元素。默认为false。

没有效果阿。
容器范围是不是指Container宽高？

hiloteam / hilo Goto Github PK

hilo's Issues

Recommend Projects

Recommend Topics

Recommend Org