2021

RIP for QianMo

一位优秀的的游戏开发者的离去今日被证实。

image.png

毛星云,网络ID「浅墨」,90后,热爱游戏开发、游戏引擎、计算机图形、实时渲染等技术,就职于腾讯互娱。

https://github.com/QianMo

https://www.zhihu.com/people/mao-xing-yun

https://blog.csdn.net/poem_qianmo

我有一个梦想,将来的某一天,大家都能玩到拥有自己本土文化的优质游戏。
我有一个梦想,有一天,西游记能出ACT,让老外去体会中国文化西游记中”斗战胜佛”的打击快感,那一定比西方的动作巅峰之作《战神》、《鬼泣》更加深邃。
我有一个梦想,有一天,上海滩能出沙盒游戏,而不是玩《GTA》感受美国梦,亦或是玩着《热血无赖》体验国外公司强行塞给我们的”中国文化“。
我有一个梦想,有一天,不少3A大作不需要汉化,因为是我们自己的游戏,配音是中国的,文化也是中国的。
我有一个梦想,将来的某一天,国产游戏能像中国的其他产业一样,以一个领跑者的姿态,面对全世界,面对全宇宙,器宇轩昂,扬眉吐气。
这会是由我们一起去完成的梦想。
等着我们的好消息。
致谢·不是一个人在战斗

–浅墨_毛星云

有幸曾经在知乎上看到过他的回答,后来也了解过他所翻译与著的书籍。

作为游戏爱好者与开发者,感到非常难过,希望他的梦想在未来能够得以实现。

记录我的第一次Game Jam经历

这次比赛很有幸遇到了两位很nice的队友,可爱的设计小姐姐 Danny和靠谱的程序小哥哥 Riven94

我们最终真的从0开始,48小时极限开发了一个2D横版的闯关游戏。

周六下午正式开始的比赛,下午讨论好了基本的策划,当晚完成基本框架,第二天进行细节、剧本和贴图的添加,到第三天早上7点,我们最终完成并且构建发布。

下面是游戏的展示。

menu.png

talk2.png

game2.png

clues1.png

true-ending.png

我感觉这次比赛还是很有趣的,不够这次比赛之后,在打包发布时,注意到了cocos creator 3在不同平台的打包下的表现会有些不同,下次一定用unity或者其他更成熟的框架来做快速开发。

最后附上我们的小队伍合影,左到右分别是 Riven94Kingfish404bigfish144

image.png

前景提取算法 GrabCut 笔记

GrabCut是一种交互式迭代前景提取算法,这个项目是对其的实践,参考opencv的源码

核心的点

  • 混合高斯模型
  • 迭代图像分割
  • Graph Cut
  • border matting: 这个不是重点

opencv mask四状态

  • 背景GCD_BGD:0
  • 前景GCD_FGD:1
  • 可能的背景GCD_PR_BGD:2
  • 可能的前景GCD_PR_FGD:3

流程 #

初始化 #

  1. 用户通过直接框选目标来得到一个初始的GCD_PR_FGD为$t_f$,即方框外的像素全部作为GCD_BGD为$t_b$

  2. 对每一像素n,初始化像素n的标签

  3. 通过像素标签来估计目标和背景的GMM,通过k-mean算法分别把属于目标和背景的像素聚类为K类,即GMM中的K个高斯模型

迭代最小化 #

  1. 对每个像素分配GMM中的高斯分量

  2. 对于给定的图像数据Z,学习优化GMM的参数

  3. 分割估计(通过1中的Gibbs能量项,建立图,并求出权值t-link和n-link,通过max flow/min cut算法来进行分割):

  4. 重复步骤1-3,直到收敛

  5. 对分割的边界进行border matting平滑处理

思考 #

如果GMM颜色模型换成颜色直方图 https://mmcheng.net/zh/salobj/,可能对视觉显著性区域有更好的切割效果

代码 #

  • main.cpp: 主要的用户交互逻辑
  • grabcut.hpp: grabcut算法的实现(含注释)及其依赖的GMM等
  • grabcut_ref.cpp: opencv中的样例的修改

目录 #

  • images: 测试用的图像文件
  • lib: 可能用到的库
  • pages: 算法的相关paper

DEMO #

框选并提取出 可能的前景GCD_PR_FGD,未被框则选为 背景GCD_BGD,按n获得初次分割结果

demo-1

左键点击选取GCD_FGD,右键点击选取GCD_BGD,按n继续迭代更新

image.png

Lib #

  • opencv Open Source Computer Vision Library
  • cmake CMake is an open-source, cross-platform family of tools designed to build, test and package software

Src #

https://github.com/Kingfish404/grabcut-apply-cpp

...

实现一个简单版vue3-like module

关于Vue,可以去看其官方文档 Vue,Evan You yyds。

ES6语法实现的vue-like,可能在部分浏览器上有兼容性问题,不过这个用Babel简单翻译一下就好,问题不大。

写的可能有点小问题,暂时还没有直接的去读过Vue的源码,只是了解其单向/双向数据原理,虚拟dom,Diff算法及更新优化算法等,我接手的前端工程化项目用的也主要是是用react来写,所以我就直接用react中组件的思想来设计这个vue-like了(所以是不是应该叫vueact?)。

程序设计 #

这个module的运行流程就是

  1. import Vue from 'base_url/vue-like.js'
  2. Vue
    .createApp({ data ,method ,template })
    .mount('选择器')
  3. loop:检测是否有method触发了set,有的话则对对应App重新render

Vue是在module中实例化的对象,其createApp方法接收一个创建参数对象,并将其保存为自身属性

mount方法根据输入的css选择器字符串(如#root表示idroothtml标签),选择对应的根对象生成并加入构造的App对象。

Vue的所有方法均支持carry化调用,也可以分行调用。

功能实现 #

单向数据绑定的实现,ES6语法的代理Proxy与反射Reflect,对data中每个对象的getset方法进行代理,有点像切面注入了。

这里的代码其实很简单,ES6为我们自带提供了Proxy对象,Reflect作为当前绑定的对象对镜像执行原有预期操作。

this.data = new Proxy(this.data, {
    get: function (target, propKey, receiver) {
        return Reflect.get(target, propKey, receiver);
    },
    set: function (target, propKey, value, receiver) {
        // console.log(arguments);
        if (target[propKey] == value) { // 非引用对象值未修时的简单优化
            return true;
        }
        if (Reflect.set(target, propKey, value, receiver)) {
            that.render();              // 重新render
            return true;
        }
        return false;
    }
})

简易dom生成我就暂时没有写复杂的虚拟domDiff算法了,而是set对象如果发现data中的元素值被修改的话,直接触发当前APPrender进行整体重新渲染。

实际的实现中,是用一个类成员函数来解析templete data,生成一个真实的dom对象。

templete data如下

Vue.h('h1', {
    onclick: 'decrease' // attribute,props 的name和对应methods中的函数/data中的值名
}, "App1: {{ counter }} click to increase") 

实际效果 #

实际部署后预览如下,放在GitHub Page上,国内可能出现加载不出来的情况:

...