- 博客(64)
- 收藏
- 关注
RSS订阅
原创 十五天学习做一款模拟经营类游戏
Day01. OpenTTD游戏简介以及为什么要研究它 （计划2021.10.4推出）Day02. 搭建OpenTTD的编译环境-Linux、windows和OSX（计划2021.10.7推出）Day03. OpenTTD源代码框架分析（计划2021.10.11推出）Day04. 新建一个HelloWorld对话框（计划2021.10.14推出）Day05. OpenTTD的Sprite介绍（计划2021.10.18推出）Day06. 自己动手编译OpenGFX库（计划2021.10.21推出）
2021-10-09 13:56:20
974
原创 Day15_城镇是怎么发展起来的
返回目录上一篇文章我们看了一下工厂的产量逻辑还是比较简单的，相关逻辑直接一个函数实现。今天我们看一下相对比较复杂的城镇发展逻辑。同样，我们也可以在官网https://wiki.openttd.org/en/Manual/Towns#town-growth 看一些Tips。1.公交车和火车运送乘客对城镇的发展影响效果一致；2.转运货物的火车站一样也可以得到发展；3.玩家可以通过捐赠新建筑在短期内迅速发展城镇；4.城市比乡镇发展速度快1倍；5.玩家必须确保城镇不被火车轨道，机场和水路包围;(这个好像
2021-11-22 15:26:34
1081
原创 Day14_工厂的产量是怎么发展的
返回目录openttd 工厂的发展基本逻辑是物流越发达，运货效率越高发展越快，没有交通接入的工厂发展缓慢，最后甚至从地图消失，我们从 OpenTTD | Game Mechanics 可以了解到工厂发展的算法逻辑，简单讲就是每个月会有一定概率改变产量，交通运输服务越好的工厂，变好的概率越高，交通运输服务越差的工厂，变坏的概率越高，工厂产量变化逻辑如下：1.每个月4.5%概率发生变化2.不同交通服务变化比例：poor- 33%增产 67%减产： good 67%增产 33%减少； excellent 8
2021-11-18 10:47:32
681
原创 Day13_交通工具是怎么移动起来的
首先，我们做一个有趣的实验，在viewport.cpp 的 AddSortableSpriteToDraw() 增加一行代码viewport.cpp Line659void AddSortableSpriteToDraw(SpriteID image, PaletteID pal, int x, int y, int w, int h, int dz, int z, bool transparent, int bb_offset_x, int bb_offset_y, int bb_offset_z,
2021-11-15 11:55:22
2656
原创 Day12_OpenTTD的页面刷新原理
返回目录每次我打开游戏看到菜单背景的时候，就惊叹于这个背景动画就像进入正式的游戏界面一般细致。研究源码后，我才知道原来这个背景动画真的就是一个游戏进度，我们只需要注释一行代码，就可以像下面一样拖动菜单的背景。window.cpp Line2787static void HandleAutoscroll(){ if (_game_mode == GM_MENU || HasModalProgress()) return; <=只需要注释这一行代码...普通的存档文件以.sav作为
2021-11-12 11:32:11
2230
原创 Day11_MapTiles是怎么绘制出来的
返回目录OpenTTD的界面通过viewport.cpp 实现，界面上由相对静止的网格Tile以及不断移动的交通工具vehicle组成，在Tile上可能是各种气候条件的陆地、海洋、工业设施、城镇等，交通工具则主要包括汽车、火车、轮船和飞机四大类。我们看一下网格Tile绘制的原理。viewport.cpp ViewportAddLandscape()是绘制Tile的关键，这个函数通过双重循环，先行row再列column 实现了各种气候地形和建筑物的绘制。viewport.cpp Line1164stat
2021-11-08 11:38:57
242
原创 Day10_Linux环境下的SDL2简介
返回目录20211104_Day10_Linux环境下的SDL2简介OpenTTD在Linux环境下通过SDL2来驱动显示，./openttd -d 2 启动后，我们可以看到以下日志，验证确实使用到 sdl ，大家可以试一下在windows环境下，启动命令行，看看下面的最后一行 video driver 后面显示的是什么内容。游戏启动阶段创建窗口调用链SDL_CreateWindow()<- sdl2_v.cpp VideoDriver_SDL_Base::CreateMainWindow
2021-11-04 09:57:02
753
原创 Day09_OpenTTD的Viewport介绍
返回目录OpenTTD的视觉系统2.5D形式展现，素材都是图片，通过屏幕贴图的方式生成界面元素，因此不能像真3D游戏那样在游戏过程中旋转视角，看到3D模型侧面或者背面的情况。这种2.5D的展示方式对显卡要求较低，大量使用在手机游戏里面，比如 王者荣耀、部落冲突、三国志策略版的界面，我们都能看到这种显示模式的身影。Openttd.cpp 代码量不大（行数 3000+），函数数量多(50+)，其中对外服务函数26个，私有服务 27个。上层调用者主要包括 gui类、cmd类以及游戏初始化阶段的各种类，向下调用
2021-11-01 17:13:01
473
原创 Day08_OpenGfx源码分析
返回目录在 《Day05_OpenTTD的Sprite介绍》，我们学习了OpenTTD的资源文件以及加载内存的全过程，在ubuntu环境下，资源文件放在 ~/.openttd/baseset 目录下，我们把grf文件用16进制方式打开后，发现都是 00 00 47 52 46 82 0D 0A 1A 0A 开头，如下：通过 https://newgrf-specs.tt-wiki.net/wiki/Main_Page 的学习，我们了解到 OpenGfx使用nml进行数据压缩生成grf文件，然后压缩成
2021-10-28 09:34:18
1362
原创 Day07_Sprite是如何绘制到界面上的
返回目录前面的章节，我们讲述了Sprite加载的原理，最终是放到一个 SpriteCache这样一个数据结构里面。今天，我们继续看一下在loop里面，程序如何将这些Sprite绘制到界面上。首先 研究 SpriteCache.cpp ，在《Day05_OpenTTD的Sprite介绍》 我们了解到 游戏启动阶段，LoadNextSprite() 函数加载 SpriteCache的过程。在 spritecache.h 里面还定义了 GetRawSprite()，这个函数向外提供服务，通过SpriteI
2021-10-25 15:16:18
320
3
原创 Day06_自己动手编译OpenGFX库
返回目录OpenGFX是OpenTTD的资源库，Linux环境下，正式环境部署位置 ~/.openttd/baseset 目录下，编译后的文件扩展名 .grf 。游戏启动后，程序会搜索指定文件夹，将这些文件解码并加载到内存里面备用。$ git clone https://github.com/OpenTTD/OpenGFX从git拉取源代码后，直接 make 会报错 缺少 grfcodechttps://www.openttd.org/downloads/grfcodec-releases/l
2021-10-21 09:29:24
426
原创 Day05_OpenTTD的Sprite介绍
返回目录今天的内容终于要与游戏沾边了，sprite是游戏里面贴图的小组件，比如地形上面的每一个方块，草地、水面、道路、铁轨，以及在上面跑的汽车、火车，天上的飞机，都是属于sprite。OpenTTD里面在游戏启动阶段会扫描预设的磁盘路径，把扩展名 grf 的文件信息解密加载到内存cache里面，后面的贴图直接采用内存块拷贝的方式推送到显卡上面。我们使用 openttd -d 2 启动游戏，在主控上可以看到大量包含 Replacing sprites 关键字的信息，如下：通过这个关键字，我们可以检索
2021-10-18 17:08:31
576
原创 Day04_新建一个HelloWorld对话框
今天，我们在欢迎首页的menu增加一个button，点击后弹出一个对话框窗口，显示 HelloWorld，效果如下：要完成这个看起来很简单的小功能可没这么简单。这一篇文章，强烈建议大家动动手，对于掌握编译方法和熟悉项目的框架很有帮助，不过动手前，大家要有心理准备，可以先上一个洗手间、倒杯茶调整好心态，有任何问题欢迎评论区提出。第一步，我们增加 菜单项目，名称为 HelloWorld1、intro_gui.cpp ， _nested_select_game_widgets[] 定义了菜单选项,我们在
2021-10-14 10:21:19
809
原创 Day03_OpenTTD源代码框架分析
返回目录首先，我们找程序的主入口，根据关键字 main( ，我们可以定位到 opentpp.cpp 的 openttd_main() 是程序的主入口。我这里整理了 openttd_main() 调用的思维导图如下，可以在文章最下面下载这个文件大致流程：1.解析命令行参数（与大部分的c和c++处理初始化变量的方法类似，值得学习）;2.扫描指定路径获取文件列表（图形、音乐、音效、文字等）；3.初始化 窗口（Linux环境下是通过SDL2的方法开启窗口；4.初始化Palettes(图片画板)；
2021-10-11 17:20:37
1175
原创 Day02_搭建OpenTTD的编译环境-Linux
返回目录首先，我们配置一套舒服的源码阅读和编译环境。在这个介绍系列中，我们使用Visual Studio Code作为源码的阅读器，主要原因有两点：一、c++的函数调用查询(ctrl+鼠标左键) ；二、历史查询结点跳转(alt+键盘左右键) 。下载源代码地址：https://gitee.com/mirrors/OpenTTD使用VSC打开项目后，效果如下：编译环境 Ubuntu20.04 ，相比windows环境 openttd在Linux下的编译更加简便（windows环境下的vs201
2021-10-09 13:54:24
1128
原创 Day01_OpenTTD游戏简介以及为什么要研究它
OpenTTD是一款传奇的开源游戏项目，官网 openttd.org有它的详细介绍，他是基于1994年推出的交通大亨这款游戏改编而来，令人惊奇的是，经过近30年的社区热心群众发展，这个项目的生命力异常强韧，从最初存在大量bug和兼容性问题的小厂游戏，发展成一款跨平台、运行稳定性非常好的优秀游戏作品。游戏中，玩家扮演新成立的运输公司老板，通过建设铁路、公路、桥梁、机场、车站等设施，运输旅客、货物和各种自然资源的模拟经营游戏。游戏最终目标是通过运输赚取最大利润，经过残酷的竞争，最终打败对手，成为运输大亨。在国内
2021-10-09 13:48:23
1516
原创 Day22 行高和列宽的设置
返回目录以下知识源码位置: [Git:https://gitee.com/zhouweng/mini_sheetversion=57b9e280346579fe061b4671fbf2c7ed245fab50]源代码回滚版本，参考这里[https://blog.csdn.net/u010593516/article/details/113767587] 时间很快，一转眼就到了这个系列最后一篇文章，通过luckysheet这个优秀的前端开源项目，我们可以学习到很多前端...
2021-04-25 11:02:45
1656
原创 Day21 工具条设置单元格颜色
返回目录以下知识源码位置: [Git:https://gitee.com/zhouweng/mini_sheetversion=70263c0bec9d1e878e2042b8b545e23664ec384d]源代码回滚版本，参考这里[https://blog.csdn.net/u010593516/article/details/113767587]今天，我们首先对代码进行优化，menuButton.js文件长度 800+，我们入手这个文件的优化，把一些静态资源剥离出来。...
2021-04-22 11:07:06
131
原创 Day20 左右对齐、上下对齐
以下知识源码位置: [Git:https://gitee.com/zhouweng/mini_sheetversion=711435e2cf17f62cf3dc636e278bb0d65d04c4f9]源代码回滚版本，参考这里[https://blog.csdn.net/u010593516/article/details/113767587]首先，修正一个bug，在上一章的合并单元格中，可能存在在拖动单元格选区的时候，已经合并单元格不能全选问题，效果如下:为了修正这...
2021-04-19 13:43:57
597
原创 Day19 如何做合并单元格
返回目录以下知识源码位置: [Git:https://gitee.com/zhouweng/mini_sheetversion=172da5e714f751ce4a7de9fe38efd308fd09d382]源代码回滚版本，参考这里[ https://blog.csdn.net/u010593516/article/details/113767587 ]今天的内容非常高级，也很有难度，包括合并单元格的界面实现以及菜单项下拉选单的实现方法，具体的配置方法可以参考luckysh...
2021-04-15 15:28:16
550
原创 Day18 工具条设置字体大小
返回目录以下知识源码位置: [Git:https://gitee.com/zhouweng/mini_sheetversion=8bfef899ebe48b1cf82c71cefa4e780ed24f6c84]源代码回滚版本，参考这里[ https://blog.csdn.net/u010593516/article/details/113767587 ]上一章，我们为项目带来了工具条的支持，可以对单元格设置粗体、斜体、删除线和下划线，今天我们继续增加工具栏功能-- 字体大小...
2021-04-12 09:29:09
317
原创 Day17 工具条设置单元格样式
返回目录以下知识源码位置: [Git:https://gitee.com/zhouweng/mini_sheetversion=fdcf5ba1923fd8e193f3720ce9dfc6fdcc68bd36]源代码回滚版本，参考这里[ https://blog.csdn.net/u010593516/article/details/113767587 ]上一次的内容，项目支持了单元格的各种样式，今天我们增加工具栏以及键盘快捷键的单元格样式设置。可以看到，我们可以通过...
2021-04-08 14:11:30
104
原创 Day16 单元格样式(背景色/下划线/删除线等)
返回目录以下知识源码位置: [Git: https://gitee.com/zhouweng/mini_sheet version=deddbc44ab5083115dac689e665f3b45c15a713a]源代码回滚版本，参考这里[ https://blog.csdn.net/u010593516/article/details/113767587 ]今天，我们增加单元格样式，包括背景色、下划线、删除线等，具体的效果如下：===>>>...
2021-04-06 09:28:34
586
原创 Day15 一次规模比较大的重构
返回目录以下知识源码位置: [Git: https://gitee.com/zhouweng/mini_sheet version=0ee2546aa9a1aa13875eab94228fd1c8b8b0d007]源代码回滚版本，参考这里[ https://blog.csdn.net/u010593516/article/details/113767587 ]LuckySheet本身的项目结构存在大量的循环依赖，给源码的学习和阅读带来比较大的困惑，今天我们把相关的目录理顺一下。...
2021-04-01 11:16:32
196
原创 Day14 在页面顶部显示工具条
返回目录以下知识源码位置: [Git: https://gitee.com/zhouweng/mini_sheet version=2f6c751623afee506cea9460002502ee48d2ee59]源代码回滚版本，参考这里[ https://blog.csdn.net/u010593516/article/details/113767587 ]今天，我们为页面增加工具栏，也就是下面红框的几个按钮，具体按钮的实现不在这个版本实现：0.基础知识：我...
2021-03-29 12:10:53
427
原创 Day13 鼠标右键菜单复制粘贴
返回目录以下知识源码位置: [Git: https://gitee.com/zhouweng/mini_sheet version=ddaf43a6d4c067acf2d82550b6853d1a72731bc0]源代码回滚版本，参考这里[ https://blog.csdn.net/u010593516/article/details/113767587 ]今天，我们为单元格区域添加鼠标右键菜单，并且在菜单上增加复制、粘贴选项，由于粘贴使用的是javascript的paste事...
2021-03-24 14:45:33
733
原创 Day12 从excel文件复制粘贴(可以开始使用键盘啦!!!)
返回目录以下知识源码位置: [Git: https://gitee.com/zhouweng/mini_sheet version=01de75b205727de620966fa52c1733b9c8fb253a]源代码回滚版本，参考这里[ https://blog.csdn.net/u010593516/article/details/113767587 ]今天的知识点非常重要，我们要使用javascript响应键盘的操作，在excel文件，选定单元格，键盘ctrl+c，然后到...
2021-03-22 09:49:40
656
原创 Day11 拖动选择单元格区域
返回目录以下知识源码位置: [Git: https://gitee.com/zhouweng/mini_sheet version=530cdfd4873cbcdcf59e5884e9a67573a799c0d9]源代码回滚版本，参考这里[ https://blog.csdn.net/u010593516/article/details/113767587 ]本节概要：单元格区域鼠标左键拖动单元格，选择点亮区域内的单元格，效果如下：0.基础知识：...
2021-03-18 09:52:26
475
原创 Day10 点亮单元格行列标题
返回目录以下知识源码位置: [Git: https://gitee.com/zhouweng/mini_sheet version=3cb8856a7c1ead8226722ec225e266ec6b96b539]源代码回滚版本，参考这里[ https://blog.csdn.net/u010593516/article/details/113767587 ]本节概要：首先对项目进行两点小优化，然后介绍如何点亮单元格对应的行列标题。首先修正一个bug，在编辑单元格之后，...
2021-03-15 11:29:08
675
原创 Day 9 编辑单元格回写内存
返回目录以下知识源码位置: [Git:https://gitee.com/zhouweng/mini_sheet version=919c79132a2d0468975579176b8837e7095fd6de ]源代码回滚版本，参考这里[https://blog.csdn.net/u010593516/article/details/113767587]上一节，我们实现了双击单元格进入编辑格式的界面效果，但是输入信息后，并不会保存下来：1.修改文件：1)...
2021-03-11 14:09:38
447
原创 Day 8 双击单元格编辑
返回目录以下知识源码位置: [Git: https://gitee.com/zhouweng/mini_sheet version=055e060b7173c1d29923794698f2dac0e4dde069]源代码回滚版本，参考这里[https://blog.csdn.net/u010593516/article/details/113767587]双击某个单元格进入编辑模式，具体效果如下：0.基础知识：H5 CSS : .append() /.db...
2021-03-08 14:31:25
825
10
原创 Day 7 选择一个单元格
返回目录以下知识源码位置: [Git: https://gitee.com/zhouweng/mini_sheet version=f0c74ce3dec88ee59ca6d8be27d2872b41e73831]源代码回滚版本，参考这里[https://blog.csdn.net/u010593516/article/details/113767587]上一节，我们为项目增加了交互的能力，这一节，我们继续扩展handler.js，增加单个单元格的点选，效果如下：...
2021-03-08 10:29:13
608
原创 Day 6 让表格动起来
[Git: https://gitee.com/zhouweng/mini_sheet version=fb0b051f1c545c6b3aeeb647795b25fc097e44af]首先看一下效果，通过X和Y轴滚动栏和鼠标滑轮，可以实现表格拖动，效果如下：与滚动相关的代码 包括：0.基础知识：H5 CSS : .mousewheel() / .scroll() / .css() / .show()git: git log / git reset --hard [...
2021-03-05 11:04:26
755
2
原创 Day 5 第一个最小化系统
[Git: https://gitee.com/zhouweng/mini_sheet version=a831922b7d8fff67d11db87da55911f988f63011]第一个最小化系统看起来比较简陋，启动系统后（启动方法参考：[Day 2 Win10系统配置开发环境](https://blog.csdn.net/u010593516/article/details/113743156)），浏览器只显示下面这个简单的表格。裁剪过程，耗费了我两周时间，通过裁剪，对luck...
2021-02-24 11:26:53
414
8
原创 Day 4 编译工具说明
返回目录[Git: https://gitee.com/zhouweng/mini_sheet version=a831922b7d8fff67d11db87da55911f988f63011]0.基本知识点: npm和 gulp两款工具1.npm的package.json文件1.1.项目基本信息"name": "luckysheet",项目名称"version": "2.1.12",版本号"main": "dist/luckysheet.cjs.j...
2021-02-09 11:03:27
252
原创 Day 3 如何看源码学习
基础知识点：git回滚版本、visual studio code文件中查找关键字1.git工具回滚版本 如果不知道如何拉取项目源代码可以看这里,回滚方法参考网上资源，命令行两句话：查看提交的ID信息# git log 回滚到对应的版本# git reset --hard [ID]2.MiniSheet项目结构[Git version=a831922b7d8fff67d11db87da55911f988f63011]MiniSheet│...
2021-02-09 10:59:39
564
原创 Day 2 Win10系统配置开发环境
1. git客户端配置 git已经成为源代码管理的事实标准，开发人员必备技能，我的win10环境安装tortoisegit作为客户端。1.1.新建文件夹，我的电脑目录为D:\workspace\minisheetGit ，右键后出现如下选项，点击Git Clone...，1.2.URL：填写https://gitee.com/zhouweng/mini_sheet检查 Directory1.3.点击OK后，自动下载源代码1.4.mini_sheet的源代码格...
2021-02-07 16:25:49
228
原创 Day 1 为什么会有mini_sheet
前几年，石墨（https://shimo.im/）在国内推出类似Google Sheet的网络excel服务，我被石墨文档的强大功能深深吸引，并且迅速在自己负责的项目组推广使用，在任务分派和问题跟进方面，这种网络版本Exel实在是太好用了。 这么多年来，我一直对这项前端保持好奇，终于在2020年，开源社区的LuckySheet(https://github.com/mengshukeji/Luckysheet)让我能够有机会近距离接触到这一神奇的技术。 2021年1月份，我花了两...
2021-02-07 16:23:28
836
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人