你可以在这里对本站直接评论

也可以在任意日志文章内进行评论

如果你对本站的隐私保护有疑问,请参照上方“隐私政策”页面

 想说点什么吗?


 (若评论发表后未显示请耐心等待审核)

左半红印发表于2008.11.21st

这里所展示的是我近期很喜欢的B站视频,可以通过提交BV号变更视频

关于这个游戏,我曾经谈过一次,建议没看过的朋友先看一下上次玩的感受。

随着前段时间这款游戏转为正式版本,游戏内容扩充至完整的5个章节。令人高兴的是,制作组有听到玩家社群的反馈并做出了调整。也正如我上篇文章所提到的,游戏玩法在当时有点过于单调。当时游戏只放出了前三章,相比之下这次我玩完了后面两章,发现制作组在玩法上面增加了很多。特别亮点的在于第四章的直播间攻略和第五章的寻找炸弹。能在基础玩法上拓展出来确实不易,给玩家的感受也很好。说到这里,让我想起了《Hacknet》DLC的破解播音747航班的最终任务,让人惊艳。

到目前为止,《全网公敌》算是一个相当完整,内容丰富的游戏了。国产游戏在这方面的发展令人兴奋,全部玩下来。虽然稍有微词,但瑕不掩瑜,期待制作组后面的DLC以及后续作品。游戏的章节过度特别类似《逆转裁判》,给我的感受很好,因为是首次做这类游戏所以也不能给太高要求。但期待在以后的类似游戏中能够进一步丰富这个过场。

左半红印发表于2021.05.5th

《家园3》最近进行了一次开发日志更新,因为这次更新附加了一个视频,导致很多玩家看了过后都有一些不满。特别是国内玩家,这里的原因主要是国内媒体在转载的时候仅仅单独把视频搬了过来而没有转载日志的相关内容,这导致了玩家产生了误解,所以我用这篇文章来说明一下。

首先我们也先来看一下这个视频

OK,一般玩家看过这视频后都有两个疑惑,这电磁炮在开火的时候也抖动的太跨装了,还有一个问题就是这个护卫舰好丑。没错,确实如此。我本人在看过之后也有这个疑惑,所以去看了下原帖。这才发现,原贴是其实是在向玩家介绍制作组在开发家园3的新单位是一个怎样的过程,而这个视频却刚刚好是在整个日志最开始的部分,后面还有大段的介绍。那么我们先说一下电磁跑抖动的问题,在原帖中在这个视频下方有这样一段补充。

Edit: “I’m absolutely humbled by the excitement from all the fans on the teams work. You are truly passionate bunch that love and understand the franchise. Here are a few things to get out of the way.  The railgun frigate does not replace the ion frigate, stay tuned that will still come into play. Keep in mind these are all early work in progress work and we read all your feedback. We totally agree and will be removing the shaking rails when the unit is winding up. “- Karl Gryc

上面这段文字中提到两个事情,第一电磁跑护卫舰是不会取代离子炮护卫舰的,第二个就是所有人都同意取消开炮的抖动效果将。

然后是第二个问题,正如上面所说的这次开发日志,是在向玩家介绍这个新单位是如何被创造的,所以在外形部分日志也用了大量篇幅在介绍电磁跑护卫舰的外形演变。

从上面的图片可以明显看到外形的迭代,原帖中有更为详细的介绍,而目前迭代到的效果是这样的。

好吧,说实话吧,我是觉得第二个造型更好看啦。

左半红印发表于2021.04.24th

承接上一篇日志,当我们在使用setInterval来循环js方法时,会遇到一个bug。就是当用户切换网页后,再切换回来后会发现当前循环运行的js出现问题,比如动画速度发生变化或者动画卡住等。本篇日志就是来解决这个问题。

解决的思路首先是引入visibility,为网页添加这个事件的监听,就能知道网页是什么时候被切换或者正在看。mozilla的举例代码如下

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'visible') {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});

从上面的代码可以看出,先要添加visibilitychange事件监听,再通过visibilityState的值来判断当前网页的可视状态,visibilityState的状态包括以下

  • 'visible' : 此时页面内容至少是部分可见. 即此页面在前景标签页中,并且窗口没有最小化.
  • 'hidden‘ : 此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态,或者操作系统正处于 ‘锁屏状态’ .
  • 'prerender' : 页面此时正在渲染中, 因此是不可见的 (considered hidden for purposes of document.hidden). 文档只能从此状态开始,永远不能从其他值变为此状态.注意: 浏览器支持是可选的.

通过以上学习,我们来整理一下解决思路。首先当页面第一次打开后,先需要动画函数运行一遍,然后进行循环运行。随后进行网页可视状态监听,在切换网页时,要做以下事情,1、停止循环;2、所有动画停止;3、所有动画元素回到初始状态。在网页回到可视状态时,继续执行循环函数并重新启动循环。在下面代码中的border_loop()就是动画方法,也是上一篇日志中编写的动画方法。利用定义border_loop_start来控制setInterval启停。.border_top到.border_left都是动画涉及到的具体元素,用来控制动画停止和回到原来位置。

    border_loop();
    let border_loop_start = setInterval(border_loop,3300);
    document.addEventListener("visibilitychange",function () {
        if (document.visibilityState == 'hidden'){
            clearInterval(border_loop_start);
            $('.border_top').stop(true,true);
            $('.border_right').stop(true,true);
            $('.border_bottom').stop(true,true);
            $('.border_left').stop(true,true);
            $('.border_top').css({
                right: '100%',
                left: '-100px'
            });
            $('.border_left').css({
                top: '100%',
                bottom: '-40px'
            });
            $('.border_right').css({
                top: '-40px',
                bottom: '100%'
            });
            $('.border_bottom').css({
                right: '-100px',
                left: '100%'
            });
        }
        else {
            border_loop();
            border_loop_start = setInterval(border_loop,3300);
        }
    });
左半红印发表于2021.04.5th

分两种说明吧,CSS3的相对简单作为基础版,而Jquery的作为进阶版,当然进阶版的效果要更好一点。具体样式看首页的“展开网页”按钮。先说基础版吧。

基础版

也是从网上进行学习后的成果,学习代码来自:

https://github.com/code-fx/Pure-CSS3-Animated-Border

这里涉及一个CSS的基础知识,即当表层div的position为relative,里层div的position为absolute时,里层div和表层div是重复叠加在一起的。而当我们把里层div或者span的位置css(包括top,bottom,left,right)都设置成0时,里层和表层完全重叠。不仅如此,里层div可以是多个,只要position都设置为absolute就全部和表层重叠。

这时我们会发现一个情况,就是里层的div或者span其实可以用伪类来替换,这样代码更简单。

.div{
  position: relative;
}
.div:before, .div:after{
  content: '';
  position: absolute;
}

这样之后我们可以单独设置伪类的边框border和位置,再利用transition或者animation来使其运动。比如:

.div:before {
    border-top: 2px solid #00ff00;
    transition-property: all;
    transition-timing-function: linear;
    transition-duration: 2s;
    transition-delay: 0s;
    animation: border_top 2s infinite linear;
}

@keyframes border_top {
    0%{
        top: 0px;
        bottom: 0px;
        left: 0;
        right: 178px;
    }
    100%{
        top: 0px;
        bottom: 0px;
        left: 178px;
        right: 0;
    }
}

这样就可以利用div的before伪类,创建并移动了上边框border-top。animation的infinite属性是循环动画,你可以更改为其他需要的样式,比如加个:hover来达到鼠标覆盖动画的效果等等。当然我们很容易发现一个伪类只能创建一面边框,这个取决于你需要的样式,我这里需要四面边框都有各自的运动动画。所以很自然可以想到,利用after伪类再创建一面边框。可还剩下两面边框呢?很简单,在div里面套一层span或div即可,这样里层的span或者div又可以在多两个伪类。这样操作后,一个div的四面边框就都有了。做完之后,经过调整,主要是animation时间上的调整,就可以得到下面这种效果

CSS3边框

进阶版

基础版是相对简单的操作,极少代码编写就可以实现。但是这样的效果可能是你无法满意的,我们需要更加炫酷的效果,比如边框的渐变效果。那么这里就又出了问题,正如和background-image一样,如果使用border-image的话,animation是同样不会生效的,反正我这里是无法使用。所以需要和我以前的一篇文正提到的方法一样,利用jQuery来达成效果。但是立刻你会发现问题,jQuery无法选择伪类。因为伪类不是DOM元素,所以无法抓取。所以这里排除伪类的编写方式,直接写层进去即可。

<div>
    <span class="border_top"></span>
    <span class="border_right"></span>
    <span class="ui-border-element">
        <a>展开网页</a>
    </span>
    <span class="border_left"></span>
    <span class="border_bottom"></span>
</div>

和上面的操作一样,表层position是relative,里层span的position为absolute。然后给里层span加上CSS3的border-image样式,我这里很简单的使用了linear-gradient的渐变效果。接下来利用jQuery的animate()方法改变其位置即可。这里我贴出本站目前使用的function作为举例,具体样式情况各位需要根据自己的需求进行编写。同时也贴出加了渐变特效后的边框动画作为对比。

jquery边框
function border_loop() {
	$('.border_top').animate({
		right:"0px",
		left:'50px'
	}, 2000, 'linear', function () {
		$('.border_right').animate({
			top:'100%',
			bottom:'-40px'
		},2000,'linear',function () {
			$('.border_right').css({
				top: '-40px',
				bottom: '100%'
			});
		});
		$('.border_top').animate({
			right:"-100px",
			left:'100%'
		},500,'linear',function () {
			$('.border_top').css({
				right: '100%',
				left: '-100px'
			});
		});
	});

	$('.border_bottom').animate({
		right:"50px",
		left:'0px'
	}, 2000, 'linear', function () {
		$('.border_left').animate({
			top:'-40px',
			bottom:'100%'
		},2000,'linear',function () {
			$('.border_left').css({
				top: '100%',
				bottom: '-40px'
			});
		});
		$('.border_bottom').animate({
			right:"100%",
			left:'-100px'
		},500,'linear',function () {
			$('.border_bottom').css({
				right: '-100px',
				left: '100%'
			});
		});
	});
}

直接用setInterval()方法调用循环播放即可,循环的时间根据自己的情况慢慢调,说实话我非常不喜欢setInterval这个方法,用起来很不靠谱。实际上如用户切换网页的话,这个动画会出现问题。不过这个不是现在可以解决的问题了,以后再说。

左半红印发表于2021.04.4th

最近的国产之光之一,类似《异星工厂》的玩法,采集资源铺设生产线生产多级产品并最终达成目标。只不过现在的目标是建立戴森球。

《戴森球计划》

先说毛病吧,这个很重要。虽然游戏还处在EA阶段,但是有个非常明显的问题是游戏引导做的非常糟糕。如果不是老手,很可能劝退。游戏仅靠着标题写着戴森球然后把你扔在一颗卫星上就几乎没有然后了。几段简单至极的教程,告诉你基本操作之后。留给你的就是整个空空如也的星球和一堆扑面而来的待升级科技和研究。玩家最开始完全不知道为什么要建造那些建筑物,为什么要生产那些零件,为什么要继续研究升级。所有目标都只有一个遥远的戴森球。而这个目标很可能是你未来100个小时内都无法达成的终极目标。这是一个明显被忽略了的地方,制作组过于追求核心玩法而忽略了游戏的完整性,就像苍天大树枝干健壮却缺少树叶一样。相信任何玩过类似经营类游戏的玩家都曾经体会到过,一个好的引导是如何将一个庞大的系统逐步介绍给玩家。而不是上来就将海量信息直接堆在玩家面前。

不过好歹我熬过来了。游戏时间接近100小时,听网上有人说差不多60个小时就能搭好一个球,觉得纯属扯淡。目前正处于游戏的最后阶段,搭建最后的戴森球壳。游戏设计上一些供需关系的冲突设计的还是不错,造成了游戏过程中的一系列需要玩家解决的问题。而和电力的争斗也整整经历了游戏的前半部分。可以说在玩法设计上,这些内容是令人满意的。

最后说说情怀的问题。前苏联科学家戴森自己可能都没想象到,当时他如此严肃的提出的这个科学概念,如今已经成了各种宇宙科幻娱乐产品热衷的题材。因其拥有庞大的体积而存在于太空之中从而具备了非常明显的浪漫情怀。在实际游戏中,当你的戴森球搭建到一定程度之后,无论是你从行星或者卫星的角度上看着这个庞大的物体还是当你飞到戴森球附近,你都会赞叹其恢弘程度。

左半红印发表于2021.02.15th

最后一天了,今天就是游览一下这个城市吧。首先说一下,厦门植物园后面的国防园和花奔园真的是又远又没什么看的。因为季节问题,现在也没什么花。南普陀寺也比较小,里面的石刻竟然还有美国海军的,真是丢人丢到家了。世贸大厦顶层的风景不错,虽然是阴天,景色依然不错。曾安厝的感觉就像一个大片的成都锦里或者武汉的乌衣巷,小吃小喝小玩意遍布其中。亏我们前两天还一直在找当地闽菜馆,这里全都是。整个城市最后一天给我的印象改观了很多,刚下飞机的时候,怎么看都觉得这里只是一个欠发达的海边城市,楼不少但都不高,晚上也没多少亮灯。但今天一天下来,发现作为一个海边旅游城市,厦门的打造还是不错的,整体度假风格的城市打造还可以。虽然距离国际上一线的度假城市还有一段距离,但能看出来已经初具规模。无论如何,这次旅游的感受还是不错的,向所有还没有来过厦门的人推荐这里。

左半红印发表于2021.01.5th