【星蕴图】这个设计太棒了!

目录

 

一、背景

二、代码实现

1、星空背景+动物轮廓图案直接使用图片:

2、星星

3、优化

4、鼠标悬浮算法

三、总结


一、背景

游戏作为第九艺术越来越炫酷了,各种花样引领行业进步。

第一次看到某游戏的技能图时,直呼“当初设计分类、树图时,怎么就没想到这么玩呢!跟不上时代的潮流了!”

我的技能图:

别人的技能图:

(百度图片-侵删)

 

没有对比就没有伤害!

太酷了,我也要给自己的网站整一个!

(抄过来,抄过来!)

 

二、代码实现

1、星空背景+动物轮廓图案直接使用图片:

美术好的大佬可以手绘轮廓线条,这里直接反色一张动物图片:(游戏里的画不出来

2、星星

调用canvas圆形api填充实圆,从内向外渐变:

            var canvas = document.getElementById('canvas'),
				ctx = canvas.getContext('2d');
				function drawArc(size) {
					var gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
					gradient2.addColorStop(0.05 + size, '#fff');
					gradient2.addColorStop(0.2 + size * 2, 'hsl(' + hue + ', 61%, 33%)');
					gradient2.addColorStop(0.5 + size * 5, 'hsl(215, 80%, 32%)');
					gradient2.addColorStop(1, 'transparent');
					ctx.fillStyle = gradient2;
					ctx.beginPath();
					ctx.arc(half, half, half, 0, Math.PI * 2);
					ctx.fill();
				}

效果不符合预期,层次过于分明且不能直接调整最外圈渐变渲染

3、优化

每颗星星由背景圆到中心圆颜色不变,透明度逐渐加深,在线参考

            function rgba(triplet, opacity) {
				let args = triplet.map(a => Math.round(Math.max(0, Math.min(a, 255))));
				return `rgba(${args.join()},${opacity})`;
			}

			function gradient(opts) {
				let gradient = context.createRadialGradient(opts.x, opts.y, opts.r, opts.x, opts.y, 0);
				gradient.addColorStop(0, rgba(opts.color, 0));
				gradient.addColorStop(1, rgba(opts.color, opts.opacity || 1));
				context.fillStyle = gradient;
				context.fillRect(opts.x - opts.r, opts.y - opts.r, opts.r * 2, opts.r * 2);
			}
            
            function star(opts) {
				gradient({
					x: opts.x,
					y: opts.y,
					r: opts.r * 8 * Math.random(),
					color: opts.color,
					opacity: opts.opacity * 0.1,
				});
				gradient({
					x: opts.x,
					y: opts.y,
					r: opts.r * 4,
					color: opts.color,
					opacity: opts.opacity * 0.25,
				});
				gradient({
					x: opts.x,
					y: opts.y,
					r: opts.r,
					color: opts.color,
					opacity: opts.opacity,
				});
			}

效果还不错:

白色中心圆​效果:

4、鼠标悬浮算法

也就是鼠标到圆心的距离小于半径.....

 

三、总结

大型游戏的设计太棒了,​很多创意值得借鉴!

canvas的绘图api相对后端语言比较“傻瓜”式,绘图元素不宜过多,否则会卡顿​;

在线预览

完整代码GitHub

posted @ 2020-10-24 18:17  Zdelta  阅读(30)  评论(0编辑  收藏  举报