hiloteam / hilo Goto Github PK
View Code? Open in Web Editor NEWA Cross-end HTML5 Game development solution developed by Alibaba Group
Home Page: https://hiloteam.github.io/
License: MIT License
A Cross-end HTML5 Game development solution developed by Alibaba Group
Home Page: https://hiloteam.github.io/
License: MIT License
文档写的都特别模糊,试了几次都不对,还有请问能设置边框吗?
setFont(font:String):Text
parameters
font:String — 要设置的字体CSS样式。
rt
教程中提供的Flappy Bird代码没有禁止web页面上下拉,在部分手机上会出现抖动。
可以通过下面的方法解决:
$(document).ready(function() {
function stopScrolling(touchEvent) {
touchEvent.preventDefault();
}
document.addEventListener('touchstart', stopScrolling, false);
document.addEventListener('touchmove', stopScrolling, false);
});
这个是canvas的问题吗,有没有解决方案?
如例子中的 Flappy Bird
游戏方式是点击屏幕,小鸟会上升一点。
但触摸或点击事件触发的那一刻,画面会停顿一下,停顿时间估计不到1S。
另外自己编写的例子在chrome浏览器中测试时偶尔会有一个超卡的情况。
比如刷新后,舞台上的元素动画都正常,但是点击或触摸事件触发时动画会好卡,大概会卡2秒左右,期间动画也是断断续续的播放,然后再过几秒钟后自然就恢复了,再怎么点击也不会卡了,只是这个情况是偶尔出现的。
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)
能否官网的demo提供下载
在View中我看到有_render和render两个,请问这两个如何理解呢?
目前初步的理解是会调用_render方法然后用用户可以通过重写render方法来实现一些自己的渲染逻辑?
是这样的么?
我基于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么?
看了Hilo的一些例子,然后用的时候上手还是有些不顺,希望能看到更多的demo
It's impossible to read, guys, i beg you, use english.
找到了,在src目录下。
格式不统一显得很不专业啊。
比如 这段代码的空格加的很没有规律:
https://github.com/hiloteam/Hilo/blob/dev/src/renderer/WebGLRenderer.js#L222-L228
使用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 示例的文档, 以免其他小伙伴出现同样的疑惑.
RT
还是CMD那块的源码和API文档要来的清楚些,教程文档部分简直是在误导人。不过阿里系的文档一直是硬伤
stage的scale对DOMElement无效
CMD那一片的代码加上一个入口文件的话就可以作为npm包使用了,相应的包的构建和上传可以在项目的gulpfile中对cmd代码生成处做一些修改是实现,不知道是否有这样的计划
用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的时候都需要乘以缩放比即可
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都是可以改变,是系统设定就这样的么
一个Container的场景使用一次以后不在需要将其visible属性设置为false是否意味着资源还存在,只是不处于渲染的队列中了,那么把他从舞台中移除,并且其实力指向null是否可以释放内存提高效率呢,此外还有其他的一些提高性能方面的经验么,感觉文档中并未提及这一部分
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!
Hilo.Bitmap setImage 貌似有bug,setImage之后这图片对象就不见了,更改rect 也会出现同样的问题
rotation可以实现x轴旋转,如何实现y轴的旋转,类似css3的rotateY
例子太少了,多出几个复杂的啊,像喵星大冒险应该放出来。
比如
sprite.shader = myShader
然后渲染sprite的时候用myShader来代替默认shader.
clipChildren:Boolean
指示是否裁剪超出容器范围的子元素。默认为false。
没有效果阿。
容器范围是不是指Container宽高?
应用场景:游戏倒计时30s结束给出游戏结果,在游戏中用户可能会切换到其他页面再回到游戏页面,不知道具体的实现步骤是怎样的,希望指点一下
补充webgl用例
建议你们开发一个 和 pixi的 小兔子类似的 性能压力测试用例
http://www.goodboydigital.com/pixijs/bunnymark/
然后好好测试 优化一下。
我看了下代码, 总体思路都差不多, 都是能批量就批量, 但是不知道为啥性能差那么多。
我也不是很懂webgl ,所以建议啥的我也给不了。
http://hiloteam.github.io/Hilo/docs/api/symbols/Tween.html
Tween 文档中缺少对属性 stagger 的介绍。
在Demo中可以查看到有此属性。
https://github.com/hiloteam/Hilo/blob/master/examples/Tween.html#L62
为啥文本框不能输入呀? 是不支持交互吗?
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
});
只有愤怒的小鸟吗?
'duration' params didn't work in Tween.to methods but 'time' works well.
比如 TextureAtlas 、createSpriteFrames
dragonBones最新版本导出的数据有支持吗?
怎么引入web scoket 实现与服务器通讯。
下面列表是目前正在翻译的api文档,欢迎认领,提交pull request。有想认领的在下方回复认领哪个文件哈, 我会随时更新列表。这里是翻译方式,翻译样例view.js,翻译好后,提交到doc-translation
分支上
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.