Code Monkey home page Code Monkey logo

hilo's People

Contributors

06wj avatar daemonchen avatar dsouzadyn avatar gitter-badger avatar huangwenming avatar jljsj33 avatar jonham avatar journey-ad avatar ldllidonglin avatar mosaic101 avatar mrluobo avatar picacure avatar quanqqq avatar steel1990 avatar sunyin avatar vidyuthd avatar wangfulin avatar xudafeng avatar zivyangll avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

hilo's Issues

web scoket-io

怎么引入web scoket 实现与服务器通讯。

教程文档太烂

还是CMD那块的源码和API文档要来的清楚些,教程文档部分简直是在误导人。不过阿里系的文档一直是硬伤

游戏超时判断如何实现

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

关于Graphics绘制出的矩形宽高无法改变的问题

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的npm包是否有计划发布

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

测试用例 BitmapText 报错

86 passing (6s)
4 failing

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

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

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

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

Container类的clipChildren属性

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

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

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么?

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
        });

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

用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的时候都需要乘以缩放比即可

在View中的_render和render两个方法如何理解

在View中我看到有_render和render两个,请问这两个如何理解呢?
目前初步的理解是会调用_render方法然后用用户可以通过重写render方法来实现一些自己的渲染逻辑?
是这样的么?

教程文档中<<使用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 示例的文档, 以免其他小伙伴出现同样的疑惑.

招募api文档翻译

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

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

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

这个是canvas的问题吗,有没有解决方案?

如例子中的 Flappy Bird

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

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

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

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

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!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.