HTML5游戏总结：分辨率对游戏布局设计的影响

最新推荐文章于 2024-07-24 14:29:22 发布
最新推荐文章于 2024-07-24 14:29:22 发布
阅读量2.4k 收藏 1
点赞数
分类专栏： html5 tangide 游戏制作记录 文章标签： tangide html5 游戏制作记录 游戏 七巧板
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhhkhhh333/article/details/46969551
版权
本文探讨了HTML5游戏在不同分辨率和屏幕比例设备上的自适应设计，通过分析iPhone和Android手机的主流分辨率，指出在微信环境中实际可用区域的分辨率和比例。建议避免使用固定位置属性，采用顶部/底部位置不变、左侧/右侧位置不变以及缩放等方法，以确保游戏在不同设备上良好显示。
摘要由CSDN通过智能技术生成

使用tangide已经制作了近10款游戏应用了. 


在制作的过程中渐渐了解到了做好屏幕自适应的重要性.

如何让游戏,应用在不同分辨率 不同屏幕比的设备上均能拥有较好的表现力直接影响到了产品的可用性.

于是对场景的分割和设计就是一门必须要研究的课题了. 本文就来分享下我的经验.



1: 目标群体分析

现在做的游戏和应用都是为了在手机端运行的, 先来了解一下各种主流手机分辨率与屏幕比例.


IPhone屏幕分辨率分好多种, 但主要比例就分2种,

一类是4S的 3:2分辨率

IPhone 4S (960x640)


一类是16:9 和伪16:9(5S)

IPhone 5S( 1136x640), 

IPhone6(

最低0.47元/天 解锁文章
diwy
关注
专栏目录
原生js实现h5游戏，本项目已提供分辨率适配解决方案，pc和移动端需要调部分参数，技术栈vue。
12-16
原生js实现h5游戏，本项目已提供分辨率适配解决方案，pc和移动端需要调部分参数，技术栈vue。exchangeweb.rar
html 游戏心得,HTML5游戏总结：分辨率对游戏布局设计的影响
weixin_39984403的博客
05-31 236
使用tangide已经制作了近10款游戏应用了. 在制作的过程中渐渐了解到了做好屏幕自适应的重要性.如何让游戏,应用在不同分辨率 不同屏幕比的设备上均能拥有较好的表现力直接影响到了产品的可用性.于是对场景的分割和设计就是一门必须要研究的课题了. 本文就来分享下我的经验.1: 目标群体分析现在做的游戏和应用都是为了在手机端运行的, 先来了解一下各种主流手机分辨率与屏幕比例.IPhone屏幕分辨率分好...
Unity游戏开发屏幕分辨设置
最新发布
weixin_42069404的博客
07-24 1169
在Unity手游开发中，选择合适的屏幕分辨率是一个重要的环节，它直接影响到游戏的视觉效果和用户体验。
微信小游戏之CocosCreator多分辨率场景适配方案
星期一的博客
06-24 3249
前言：小游戏开发过程中大家如何进行多分辨率适配的？ 回顾一下官方文档对分辨率适配的介绍：https://docs.cocos.com/creator/manual/zh/ui/multi-resolution.html。 以前读完后总是有一种似懂非懂的感觉，所以实践后总结关于小游戏适配三要素：Canvas + Widget + Scale 。 一、cocosCreater窗口大小/设计分辨率/视图边框尺寸/试图中canvas尺寸等和之间关系。 let winSize = cc.winSi
游戏的自适应分辨率
游戏数学与算法
11-05 2626
今天在工作中遇到一个问题，游戏如何自适应分辨率。我们的游戏的素材是1600*900的，如果用户电脑不支持1600*900分辨率，应该怎么处理呢？    如果不处理好，就会出现游戏黑屏，或者游戏变形。    首先游戏黑屏的问题，需要谋举显示器的分辨率，判断显示器的最大分辨率，在用户自己设置游戏的分辨率的时候，不能让客户使用，显示器不能支持的分辨率。    其次游戏变形的问题，游戏的变形与分辨率
移动端尺寸基础知识
一片枫叶的专栏
11-25 5508
初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所有细节。由于是写给初学者的，所以不要嫌我啰嗦。现象首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720x1280
H5游戏源码 贱人配对游戏.zip
10-15
总结来说，“贱人配对游戏”的H5源码涵盖了前端开发的多个方面，从基础的HTML、CSS到复杂的JavaScript编程，再到游戏设计和优化。通过深入研究这个游戏的源码，开发者不仅可以提升自己的技能，也能从中获得构建其他...
基于html5 canvas的中国象棋游戏.zip
02-13
总结，基于HTML5 Canvas的中国象棋游戏开发涉及到Canvas API的深度运用，包括图形绘制、交互处理、游戏逻辑等多个方面。通过这种方式，开发者可以创建出具有丰富交互性和视觉效果的网页游戏，提供给用户沉浸式的在线...
基于Cocos2d-JS的手机网页游戏的设计与实现
04-16
总结来说，基于Cocos2d-JS的手机网页游戏设计与实现是一个涵盖了游戏引擎技术、游戏设计原理、多分辨率适配策略以及性能优化等多个方面的综合工程。通过深入理解和熟练应用这些知识，开发者可以创造出既有趣又有教育...
龟兔再跑HTML5游戏源码
06-25
8. **响应式设计**：为了适应不同屏幕尺寸和分辨率，游戏通常需要响应式设计。"龟兔再跑"可能会根据窗口大小调整布局，保证在手机、平板和桌面设备上都有良好的视觉体验。 总结，"龟兔再跑HTML5游戏源码"揭示了...
ui入门基础知识：像素和分辨率的认识
weixin_30298497的博客
02-18 621
像素和分辨率 像素 中文全称是图像元素，英文为Pixel，简写为PX.我们人眼所看到的图像都是由一个个尺寸微小的色点组成的，例如下图，就是由一个个色点（纯色）组成的，这些色点就是像素。也就是说像素是记录图像的基本单位。像素点非常的小，只有放大到很高的层级才能看到像素点。像素的大小是会变的，会随着分辨率的大小改变（不懂的看下面分辨率概念） 分辨率 分辨率分为图像分辨率和显示/屏幕分辨率 ...
HTML5游戏实战：计时拼图游戏制作
hhhkhhh333的专栏
07-13 3692
这次使用www.tangide.com制作了一款推广类用的拼图游戏  这游戏复杂点在各种拖动, 滑动的动画实现上. 下面我主要分享下动画部分的实现方法. 0 在线运行:  http://www.tangide.com/apprun.html?appid=previewupyunosgames1-241435729564104 1: 确认界面布局 首
CocosCreator H5小游戏屏幕适配解决方案
Mr_JiaTao的博客
09-17 4634
基础概念 1 物理分辨率 物理分辨率简单理解就是硬件所支持的分辨率，以像素（px）为单位，所以我们称这个硬件上的每一个像素点为物理像素，也叫设备像素。将屏幕实际存在的像素以行数 × 列数这样的数学表达方式体现出来，就是物理分辨率。比如 iPhone8 的物理分辨率是1334 × 750 。而我们进行屏幕适配时，表达方式会有所不同，会以屏幕宽的像素数量 × 屏幕高的像素数量这样来体现。例如 iPhone8在默认的竖屏状态下，物理分辨率表达为750 × 1334。横屏状态下，物理分辨率表达为1334 × 750
h5游戏：适应不同尺寸屏幕的WEB2048
Goooo
08-15 2787
一、界面展示及简单介绍 先上完成后不同尺寸屏幕下的效果图，界面模仿的原版2048：                                                                                                        （768px<屏幕）                                   ...
H5适配逼疯人！这个方案或许能帮到你
H5游戏开发
05-08 3467
以往拿到一份视觉稿要做页面适配，通常都是针对不同分辨率尺寸做断点写 media query，然后看效果再微调。开发过程中视觉稿要是做了修改，修改的地方就得再走一遍分辨率测试和微调，这时想屎的心都有了。而且这些适配都是建立在已 知的分辨率尺寸库上，如果市面新出来一款分辨率尺寸机型，呵呵，又要奔跑在测试微调路上。是不是能有用一套代码就适应各种分辨率窗口，那么就不会再有上面 这些烦恼，且开发效率快和维护
CocosCreator h5游戏移动端全屏显示
热门推荐
大猪的博客
01-11 1万+
文章里的方法主要是针对creator游戏引擎的构建后项目，但是也可以由此文章中的方法，再作针对其他h5游戏引擎的修改，由此借鉴出其他h5游戏引擎的全屏显示。 先来看构建后的文件结构： 其中，红色框里的文件是需要自定义的，css、dist和img文件夹是creator不会构建出来的，需要自己加上去。index.html是creator构建出来的，我们需要对它进行修改。 再看css、d...
h5响应式布局，pc端和手机端的几种分辨率
gxr0612的博客
03-29 1212
QVGA:240*320 WQVGA:240*400 CGA:200*320 HVGA:320*480 EGA:350*640 NVGA:360*640 WVGA:480*800 FWVGA:480*854 SVGA:600*800 XGA:1024*768, WSXGA:1440*900 Retina Display：960×640 8.9寸:1024*500 10.4寸、12.1寸、14.1寸、15寸:1024*768 1280*800 1280*1024 1280*854
Android开发者经验总结：屏幕分辨率与布局指南
主要内容涵盖了屏幕分辨率适配、布局文件设计、像素密度管理以及模拟器的使用。 首先，关于屏幕分辨率部分，作者列出了不同类型的屏幕尺寸，如VGA、QVGA、HVGA、SVGA、WVGA、FWVGA等，以及iPhone和iPad的屏幕比例...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值