Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Flutter版合成大西瓜

Flutter版合成大西瓜

原创
作者头像
乂乂又又
修改于 2021-02-22 02:25:13
修改于 2021-02-22 02:25:13
2K0
举报

背景

我一直想做个小游戏,正好年前合成大西瓜火了,所以趁着这次年假,自己在家写了个plus版的合成大西瓜,前后花了大概三天三夜的时间(没错,一直写到大年三十的晚上~),现在写下这篇文章记录下这个过程。

预览

老规矩,先上图,看下这个plus版的合成大西瓜究竟长啥样😊

里面的图片素材可以自己裁剪更换,很方便。

除此之外还支持

  • 自定义背景图
  • 重力感应操控
  • 反向合成小瓜
  • 只生成小/大瓜

并且还内置了多套游戏主题(水果/表情/校徽)

这次让你轻松魔改个够😁

下载地址

网页版:http://v.idoo.top/mix

安卓/iOShttps://www.pgyer.com/Dagua

PS:iOS版安装包需要自签才能使用

开发记录

技术选型

我曾经用Flutter+Flame写过一个Forge2D的开源小游戏:《坠落》

(PS:早期作品,代码写的比较不忍直视,大佬轻喷~)

所以这次,我选择继续使用Flutter+Flame+Forge2D来开发合成大瓜.

后来证明这个选择是非常明智的:

一次开发就可以打包出Web、Android、iOS、Windows、Mac、Linux全端的安装包,非常给力!

开发环境

因为一开始我就打算支持打包成Web应用(甚至是桌面应用),所以需要先把我本地的Flutter环境从stable分支切换到dev分支

在Flutter SDK根目录执行以下命令

代码语言:txt
AI代码解释
复制
#首先把Flutter仓库地址换成清华源到镜像地址,加速下载
git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/flutter-sdk.git

#切换分支
flutter channel dev

#更新sdk
flutter upgrade

#开启web,desktop支持
flutter config --enable-web
flutter config --enable-macos-desktop

OK,现在我们就可以用Flutter愉快的开发web跟桌面应用了^^

代码规范

为了规范自己的代码,第一件事就是把 pedantic 加入 dependency

代码语言:txt
AI代码解释
复制
dependencies:
  flutter:
    sdk: flutter
  pedantic: ^1.9.2

#analysis_options.yaml
include: package:pedantic/analysis_options.yaml

pedantic是谷歌内部使用的Dart代码规范,它比 Effective Dart 还要严格一些,有了它就可以安心写代码了。

图片剪裁

这里我选用的图片裁剪插件是 crop,不过它的实现方式是 RepaintBoundary ,所以这丫在Web端不能用(PC上的浏览器可以用,但是在手机上的浏览器就不支持,很迷~),所以没办法,只能退而求其次使用 image 库直接操作图片像素点裁剪图片。

代码语言:txt
AI代码解释
复制
/// Returns a round cropped copy of [src].
Image copyCropCircle(
  Image src, {
  int radius,
  Point center,
}) {
  int min(num x, num y) => (x < y ? x : y).toInt();
  final defaultRadius = min(src.width, src.height) ~/ 2;
  radius ??= defaultRadius;
  center ??= Point(src.width ~/ 2, src.height ~/ 2);
  // Make sure center point is within the range of the src image
  center.x = center.x.clamp(0, src.width - 1).toInt();
  center.y = center.y.clamp(0, src.height - 1).toInt();
  radius = radius < 1 ? defaultRadius : radius;

  final tlx = center.x.toInt() - radius; //topLeft.x
  final tly = center.y.toInt() - radius; //topLeft.y

  var dst = Image(
    radius * 2,
    radius * 2,
    channels: Channels.rgba,
    iccp: src.iccProfile,
  );

  for (var yi = 0, sy = tly; yi < radius * 2; ++yi, ++sy) {
    for (var xi = 0, sx = tlx; xi < radius * 2; ++xi, ++sx) {
      if ((xi - radius) * (xi - radius) + (yi - radius) * (yi - radius) <=
          radius * radius) {
        dst.setPixel(xi, yi, src.getPixelSafe(sx, sy));
      }
    }
  }

  return dst;
}

条件导包

由于dart:io在web端不受支持,所以我们需要使用其它实现来替代dart:io,这就涉及到了如何在dart中实现条件导包

一个简单的文件io的例子

代码语言:txt
AI代码解释
复制
//file/file_io.dart
import 'dart:io';
import 'dart:typed_data';

import 'package:path_provider/path_provider.dart';

class FileTool {
  static Future<Uint8List> read(String path) async {
    final directory = await getApplicationDocumentsDirectory();
    var file = File(directory.path + path);
    if (!await file.exists()) return null;
    return await file.readAsBytes();
  }

  static Future<void> write(String path, Uint8List bytes) async {
    final directory = await getApplicationDocumentsDirectory();
    var file = File(directory.path + path);
    if (!await file.exists()) {
      file = await file.create(recursive: true);
    }
    await file.writeAsBytes(bytes, flush: true);
  }

  static Future<void> delete(String path) async {
    final directory = await getApplicationDocumentsDirectory();
    var file = File(directory.path + path);
    if (!await file.exists()) return;
    file.deleteSync();
  }
}

//file/file_web.dart
import 'dart:typed_data';

import '../hive_tool.dart';
import '../image/ui_image_tool.dart';

class FileTool {
  static Future<Uint8List> read(String path) async {
    if (!HiveTool().inited) await HiveTool().init();
    final value = await HiveTool().box.get(path);
    if (value == null) return null;
    return (value as String).toBytes();
  }

  static Future<void> write(String path, Uint8List bytes) async {
    if (!HiveTool().inited) await HiveTool().init();
    await HiveTool().box.put(path, bytes.toBase64());
  }

  static Future<void> delete(String path) async {
    if (!HiveTool().inited) await HiveTool().init();
    await HiveTool().box.delete(path);
  }
}

//file_tool.dart
export 'file/file_io.dart' if (dart.library.html) 'file/file_web.dart';

更新图标

在项目根目录放入1024x1024分辨率的APP图标,命名为 logo.png

代码语言:txt
AI代码解释
复制
dependencies:
  ...
  flutter_launcher_icons: ^0.8.1

flutter_icons:
  image_path: "logo.png"
  android: true
  ios: true

然后运行 flutter pub run flutter_launcher_icons:main 即可

开源地址

本项目开源地址 https://github.com/idootop/watermelon , 欢迎🌟/PR ^^

Web端生成

代码语言:txt
AI代码解释
复制
flutter build web --release

Android端生成

代码语言:txt
AI代码解释
复制
flutter build apk --split-per-abi

PS:亦可支持iOS,Mac,Windows,Linux端,请自行打包

鸣谢

Flutter https://flutter.dev/

Flame https://flame-engine.org/

Forge2D https://github.com/flame-engine/forge2d

合成大西瓜 http://www.wesane.com/game/654/

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【Flutter&amp;Flame 游戏 - 贰壹】视差组件 | ParallaxComponent
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 22 天,点击查看活动详情
张风捷特烈
2022/06/19
6170
【Flutter&amp;Flame 游戏 - 贰壹】视差组件 | ParallaxComponent
【Flutter&amp;Flame 游戏 - 陆】暴击 Dash | 文字构件的使用
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 7 天,点击查看活动详情
张风捷特烈
2022/06/19
5900
【Flutter&amp;Flame 游戏 - 陆】暴击 Dash  | 文字构件的使用
[- Flutter 技能篇 -] ui.Image加载探索
想必大家Image组件都玩得挺6的,那么如何在Canvas上画一个图片,实现图片的放大等变换又该如何操呢?如何去监听一个图片流。这些Image组件就无法完成了。 import 'dart:ui'
张风捷特烈
2020/04/30
4.7K0
[- Flutter 技能篇 -] ui.Image加载探索
Flutter与原生H5混合开发
我们知道Flutter可以跟原生Android或iOS混合开发,那Flutter能不能与原生H5混合开发呢?
乂乂又又
2021/02/21
3.8K0
Flutter与原生H5混合开发
【Flutter&amp;Flame 游戏 - 柒】人随指动 | 动画点触与移动
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 8 天,点击查看活动详情
张风捷特烈
2022/06/19
6700
【Flutter&amp;Flame 游戏 - 柒】人随指动 | 动画点触与移动
【Flutter&amp;Flame游戏 - 拾叁】碰撞检测 | CollisionCallbacks
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 14 天,点击查看活动详情
张风捷特烈
2022/06/19
1K0
【Flutter&amp;Flame游戏 - 拾叁】碰撞检测 |  CollisionCallbacks
[查缺补漏] 熟悉HTML页面架构和常用布局
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d83279b468ad42cb821177e3877e40cf~tplv-k3u1fbpfcp-zoom-1.image) flex-direction: row-reverse; `[843f13b23d5e4eeb84eb0da51056f694~tplv-k3u1fbpfcp-zoom-1.image]
程序员海军
2021/06/25
1.7K0
【Flutter&amp;Flame游戏 - 拾陆】粒子系统 | 粒子的种类
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 17 天,点击查看活动详情
张风捷特烈
2022/06/19
9480
【Flutter&amp;Flame游戏 - 拾陆】粒子系统 | 粒子的种类
【Flutter&amp;Flame游戏 - 捌】装弹完毕 | 角色武器发射
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 9 天,点击查看活动详情
张风捷特烈
2022/06/19
4800
【Flutter&amp;Flame游戏 - 捌】装弹完毕 | 角色武器发射
3.Flutter学习之Image组件
学习自: Dart Flutter教程_Dart Flutter入门实战视频教程-2019年新出. Flutter之path_provider
易帜
2022/02/09
9580
3.Flutter学习之Image组件
【Flutter&amp;Flame游戏 - 拾贰】探索构件 | 角色管理
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 13 天,点击查看活动详情
张风捷特烈
2022/06/19
5140
【Flutter&amp;Flame游戏 - 拾贰】探索构件 | 角色管理
Flutter 压缩图像的最佳方式【Flutter专题23】
作为开发者的我们,经常会做一些上传图片和和保存图片啦的功能,但是由于一些图片非常大,我们在上传或者保存的时候会占用大量的网络资源和本地资源,那么我们需要做的就是对图片进行压缩。
徐建国
2022/03/30
3K0
【Flutter&amp;Flame游戏 - 拾玖】构件特效 | 了解 EffectController 体系
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 20 天,点击查看活动详情
张风捷特烈
2022/06/19
5170
【Flutter&amp;Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系
Flutter 中怎么下载文件
本文将演示在 Flutter 应用中,怎么从网上下载文件。我们可以下载任何类型的文件,并将其存储到指定位置。有很多种方法实现,比如很受欢迎的包 flutter download 可以用来实现。然而,我们将会以最简单的方式来演示。
Jimmy_is_jimmy
2024/06/07
4810
Flutter 中怎么下载文件
【Flutter&amp;Flame游戏 - 拾壹】探索构件 | Component 使用细节
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 12 天,点击查看活动详情
张风捷特烈
2022/06/19
5340
【Flutter&amp;Flame游戏 - 拾壹】探索构件 | Component 使用细节
【Flutter&amp;Flame游戏 - 拾伍】粒子系统 | ParticleSystemComponent
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 16 天,点击查看活动详情
张风捷特烈
2022/06/19
8750
【Flutter&amp;Flame游戏 - 拾伍】粒子系统 | ParticleSystemComponent
[day-ui]基于 vue3.0 从 0-1 搭建组件库 - 环境搭建
其实之前使用 vue2 的时候就想写个开源组件库,学习交流使用。如果公司有自己的需求也可以快速上手。开始想的是能在网上找到好的教程,环境搭建 - 组件编写 - 单元测试 - 文档编写 - 打包发布,但是没有很完善的,慕课网有个 react 组件库的教程,storybook 编写文档的,vue3 的有个组件库教程是写配置表单的。实在网上找不到资料了,没办法就自己写嘛,没有困难制造困难也要上。网上也是找了一些资料指导,再配合开源的 element-plus 和 element3 组件库,想把自己的学习经验和大家分享下,不一定全对,也会有一些问题,主要是和大家一起学习,大家有什么好的意见我也会融合进来,对自己也是提升。
测不准
2021/04/07
9410
Flutter游戏引擎Flame初探,实现是男人就坚持100秒
一说到游戏开发,首先想到的是Cocos 2D 、Unity 3D 等这些强大的游戏开发引擎,市面上很多游戏都是基于这些游戏引擎开发的。我们要想开发一款游戏理所当然的想到也是从这些开发引擎中选择一款来进行开发,但是这些游戏引擎所使用的的开发语言可能跟我们所掌握的开发语言并不匹配,当然我们可以选择去学习一门新的语言来进行开发,毕竟作为一名程序猿学习能力肯定弱不了,但是作为一个 Flutter 开发人员我在想是否有一款专门针对 Flutter 的游戏开发引擎呢?Flutter 作为一个跨平台的开发框架,如果使用 Flutter 开发一款游戏岂不是天然就支持跨平台?答案是肯定的,也就是本篇文章将为大家介绍的 Flame 游戏引擎。
loongwind
2022/09/27
6.3K2
Flutter游戏引擎Flame初探,实现是男人就坚持100秒
【Flutter&amp;Flame游戏 - 拾柒】构件特效 | 了解 Effect 体系
持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第 18 天,点击查看活动详情
张风捷特烈
2022/06/19
8620
【Flutter&amp;Flame游戏 - 拾柒】构件特效 | 了解 Effect 体系
Flutter 构建完整应用手册-持久化
如果我们有一小部分我们想要保存的键值,我们可以使用shared_preferences插件。
南郭先生
2018/08/14
1.7K0
推荐阅读
相关推荐
【Flutter&amp;Flame 游戏 - 贰壹】视差组件 | ParallaxComponent
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档