BoenYang

BoenYang's Blog


  • Home

  • Archives

  • Tags
BoenYang

开始使用Hexo

Posted on 2019-09-23

Hexo的确是一个很好的博客工具,比起Jekyll以及Octopress都简单方便很多,最值得一提的是没有采用Ruby之类的,而是采用的Nodejs,环境搭建起来就简单很多了。

在我花了很短的时间搭建了博客后,我突然发现Hexo在Hexo deploy之后并没有将写过的博客源文件上传到Github上,这意味了写的博客源文件没有保存,这对于以后的博客迁移带来了困难,比如你要换台电脑,就需要拷贝好source,theme以及等等一些配置文件,看起来好像很不方便的样子。

手动的像Jekyll一样建立一个分支把要保存的文件提交到Github的非master分支是一个不错的解决方案。但是对于如此,我确认为不完美!!做为一个懒惰的程序猿,这种事情应该交给程序去完成嘛。在查看了hexo-deployer-git插件的源代码后(位于node_modules\hexo-deployer-git\lib\deployer.js)中,我发现对它进行修改,增加提交源文件的功能就可以了嘛,于是开干。

修改后的代码就成了这样子了:

添加了gitBaseDir函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 function git(){
var len = arguments.length;
var args = new Array(len);

for (var i = 0; i < len; i++){
args[i] = arguments[i];
}

return spawn('git', args, {
cwd: deployDir,
verbose: verbose
});
}

function gitBaseDir(){
var len = arguments.length;
var args = new Array(len);

for (var i = 0; i < len; i++){
args[i] = arguments[i];
}

return spawn('git', args, {
cwd: baseDir,
verbose: verbose
});
}

添加了提交source等文件的操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 function push(repo){
return git('add', '-A').then(function(){
return git('commit', '-m', message).catch(function(){
// Do nothing. It's OK if nothing to commit.
});
}).then(function(){
return git('push', '-u', repo.url, 'master:' + repo.branch, '--force');
}).then(function(){
return gitBaseDir('checkout','source');
}).then(function(){
return gitBaseDir('add','-A').then(function(){
return gitBaseDir('commit','-m',message).catch(function(){

});
});
}).then(function(){
return gitBaseDir('push','-u',repo.url,'source:source','--force')
});
}

这样就大功告成了,以后只需要

1
2
3
hexo new
hexo generate
hexo deploy

就可以把生成的静态站点和source等文件都保存到github上了,是不是很爽

在使用这段代码之前,应该先在source文件所在的文件夹执行以下命令,初始化仓库,添加服务器信息,新建source分支

1
2
3
4
5
git init 
git remote add origin git@github.com:your_name:your_repo.git
git add .
git commit -m ""
git checkout -b source

虽然实现了这个功能,但是我觉得代码还是很挫,毕竟推送的分支是直接在代码写死的,而且还要进行上面的操作,我更希望可以在_config.yml中添加一个分支配置选项,然后再hexo-deployer-git插件中实现自动初始化仓库,添加服务器信息,新建分支等功能。

BoenYang

Unity九宫格切图图片制作进度条

Posted on 2017-01-06

在Unity游戏UI开发的过程中,我们经常会用到使用到九宫格切图的图片来制作UI,对于简单的图片使用九宫格切图可以有效减少图片大小,避免UI拉伸变形,提高UI的精细度。
但是在很多种情况下九宫格切的图片就派不上用场了,比如进度条。

如果美术给了这样一张大小30x20的进度条前景图要你制作一个300*20的进度条

按照正常的逻辑,直接拉伸肯定是不行的,于是对该图片进行九宫格切图处理,然后再制作UI的时候将图片的Image Type改为Sliced,然后宽度设置为300就可以了.如果这样的话,尴尬的事情就发生了。

在设置Image Type类型类Sliced后,Image Type没办法设置成Filled,也就没办法改变fillamount来做进度条了。

下面就推荐一个简单的方案给大家,不需要代码什么的,也不需要扩展新组件就可以达到使用sliced类型的图片来做进度条了。

这个方法就是利用Mask组件:

  1. 创建一个Image命名为ProgressbarFg,将Image Type设置为sliced,然后宽度设置为300,图片为进度条前景图
  2. 然后再创建一个Image命名为Mask,将长度和宽度设置和前景图一致,图片设置为一张没有透明像素的小图片(就是整张图片都有颜色)
  3. 给Mask加上一个Mask组件,去掉Show Mask Graphic 勾选
  4. 将Mask中的Image组件的Image Type设置为Filled
  5. 强ProgressbarFg拖到Mask下
  6. 完成,改变Mask中的fillamount就是一个进度条了

创建完成之后的结构如下

Mask设置如下:

效果图:

这个简单方法的实现原理其实很简单,就是利用Mask来遮罩,但是Mask的图片fillamount是可以修改了,也算是曲线救国吧。

BoenYang

hexo-maintance插件开发

Posted on 2017-01-05

前言

2016年是比较忙碌的一年,在这过去一年里面并没有什么时间来写博客,所以2017年的一个小目标就是多写一些博客,把自己碰到的一些问题和想法记录下来。

由于我经常需要换电脑来工作,所以每次用hexo写博客都笔记麻烦,每次换电脑都需要重新配置,同步内容,主题什么的也都丢了之前写的一篇hexo的备份工具是基于已有的工具修改了,觉得源代码没有办法保存,因此去看了些hexo的API,开发了一个插件。

关于hexo-maintance

特性

  1. 自动在发布之后备份博客源文件
  2. 自动备份包括博客配置文件,主题
  3. 命令行一键恢复博客,自动恢复已安装插件

使用

自动备份博客

1
2
3
4
5
6
7
8
9
10
11
//在博客目录下
npm install hexo-maintance --save

//在_config.yml中添加备份配置
backup:
repo: repo_url
branch: repo_branch

然后调用
hexo d
在发布成功之后就会自动将博客备份至指定仓库和制定分支

恢复博客

1
2
3
4
5
6
7
8
9
10
hexo init MyBlog
cd MyBlog
npm install hexo-maintance --save

//在_config.yml中添加备份配置
backup:
repo: repo_url
branch: repo_branch

hexo restore

注:无论是备份或者恢复博客都需要github的仓库写入权限
Github SSH验证配置

实现原理

自动备份其实是利用hexo的[Event API]中的deployAfter来实现。在deployAfter之后自动在博客根目录下初始化git仓库,将博客推送到配置的git仓库中。

命令行一键恢复其实是利用hexo的[Console Extension]开增加了一个命令,调用命令后将配置的git仓库中的博客源文件拉取到本地替换掉之前的即可。

在完成之后并将插件打包发布到了npm上,利用npm install hexo-maintance –save就可以安装了,使用还是蛮方便的.

TODO

  1. hexo一键升级工具
  2. 博客同步
  3. svn等其他仓库工具支持

插件并不完善,有很多的Bug,欢迎大家使用,发现问题[点这里]!
插件地址:hexo-maintance

BoenYang

Chrome插件开发-开发环境搭建

Posted on 2016-12-20

最近喜欢上了使用RSS订阅工具来订阅自己经常阅读的一些博客和网站,因此在Chrome插件商店找到了一款RSSFeed的插件,用起来还不错,但是免费版本不支持RSS订阅的云同步,而且需要注册RSSFeed的账号才可以进行云同步,索性学习一下Chrome插件开发玩玩,顺便练习一下一直不太熟练的JS。

环境搭建

Chrome插件的开发环境搭建非常的简单,可以说不需要什么开发环境,所以你只需要下面几样东西就可以开始开发Chrome插件了

  1. 一个支持代码高亮的文本编辑器,VSCode,Sublime等
  2. Chrome浏览器,不多说。
  3. 支持翻墙的网络,Chrome插件开发需要经常到Chrome develop网站上查询API

Chrome开发概览

Chrome插件是用Html,CSS,和Javascript语言来开发的,并且可以使用类似于Bootstrap或者JQuery,AngluarJS等前端框架所以基本上写起插件来跟写前端程序比较类似。在Chrome插件发中最重要的就是manifest.json文件,这个文件中描述了Chrome插件的图标,所需要的权限,以及插件的各种配置。

第一步:编写mainifest.json文件

manifest.json是的一个json格式的文件,该文件有很多配置选项,在文件中配置chrome插件的权限,选项页等配置。

新建一个文件夹,在其中新建一个manifest.json文件然后将如下内容写入文件中

1
2
3
4
5
6
{
"name": "Chrome Extension", //插件名称
"version": "1.1", //版本信息
"description": "My First Chrome Extension", //描述
"manifest_version": 2 //配置文件版本
}

创建然后在chrome浏览器打开chrome://extensions扩展管理页面,点击加载已解压的扩展程序,

选中刚刚创建的文件夹就可以将创建的chrome插件加载到chrome中进行测试了。
成功加载后扩展管理页面会多出一个插件

并且在chrome的右上角会多出一个插件的小图标,这就代表我们已经成功创建了一个Chrome插件

仅仅使用几行代码就创建了一个chrome插件是不是很简单,但是这个小插件也没有任何的功能,在接下来的文章中,我会详细的描述一个简单的RSS订阅插件的开发过程,并解释开发过程使用到的各种API以及manifest文件的更多配置来帮助大家学习chrome插件的开发。

BoenYang

那些Unity中的坑(一)

Posted on 2016-11-20

对于Unity引擎的用户来说,大家对于Unity真的是又爱又恨,喜欢Unity的资源丰富,构建速度快,恨于Unity中的无数大坑之存在,下面就来说说Unity中的坑吧。

在Unity中,动画系统是很常用的功能,但是在这个动画系统中就有很多的坑点存在。

最近在项目中使用到了Humanoid动画,这是一个专门用于人形骨骼,对应于3DMAX中的BipedBone。在使用的过程中发现,如果在动画软件中创建了非人形骨骼主体之外的骨骼(比如:披风,头发,枪支等额外骨骼),那么在Unity的Humanoid模式下面这些骨骼将不会运动。

经过各种摸索发现,在Unity中的Humanoid模式下,这些骨骼其实是可以运动的,但是Unity默认是把人形骨骼之外的骨骼给Mask掉的,所以造成了人形骨骼之外的骨骼不运动的情况。

图一

上面就是普通的人形骨骼部分

图二

上面是除了人形骨骼额外的部分,在导入动画之后默认可能是没有勾上的,勾上之后就可以愉快的使用各种完美的人形动画了。

对于上面这种情况如果动画文件很多的话每个都勾一下挺麻烦的,可以考虑新建一个Avatar Mask,把模型的Avater拖到下面的位置Import就可以了,然后给将Mask赋予每个动画就行了。

总算是Humanoid动画可以用了。

BoenYang

BoenYang

I am a game programmer

5 posts
GitHub
© 2019 BoenYang
Powered by Hexo
Theme - NexT.Muse