标签: isometric

新手在这里.我正在使用phaser,特别是等距插件.

我想知道在处理实时多重连接方面是否有可能使用类似于agar.io的移相器创建游戏,生成一个包含大约300名玩家的巨大地图,所有这一切都没有在游戏中产生太大影响性能.我真的不知道如何处理多人游戏部分(可能是套接字,node.js),因为它可以很好地工作.至于生成一张非常大的地图,我也很空白.

• 在移相器中,是否有可能创建一个等距型游戏来处理当用户到达可见"地图"边缘时生成的多个实时多人游戏和巨型地图？怎么样？
• 如果没有,我应该选择什么(js和其他应用程序中的游戏引擎)才能实现我想要的目标？

我正在尝试用 Java 绘制等距图块并使用鼠标光标实现图块拾取系统。我使用我找到的这些数学公式绘制了瓷砖，并适应了我的瓷砖纹理，您可以在下面找到。瓷砖是 64x64 像素，但即使我使用 64x64 精灵绘制它们，平面瓷砖也只有 32 像素的高度。

地图是一个简单的二维数组，其中我的图块由它们的 id 表示。

这是我使用 toIso() 函数将地图坐标转换为屏幕坐标的类。我将表示屏幕上光标位置的屏幕坐标传递给 toGrid() 函数以将它们转换为地图坐标。

public class Utils {

private static int TILE_WIDTH = Tile.TILE_WIDTH;
private static int TILE_HEIGHT = Tile.TILE_HEIGHT;

private static int TILE_WIDTH_HALF = TILE_WIDTH/2;
private static int TILE_HEIGHT_HALF = TILE_HEIGHT/2;

private static int TILE_WIDTH_QUARTER = TILE_WIDTH_HALF/2;
private static int TILE_HEIGHT_QUARTER = TILE_HEIGHT_HALF/2;

public static int[] toIso(int x, int y){

    int i = (x - y) * TILE_WIDTH_HALF;
    int j = (x + y) * TILE_HEIGHT_QUARTER; …

我正在试图找出当我有"斜坡"和+1高度的瓷砖时,如何在鼠标下方获得正确的"活动"瓷砖(见下图).

当我的世界平坦时,一切都没有问题.一旦我添加了一个高度为+1的瓷砖,以及一个回到+0的斜坡,我的屏幕 - >地图例程仍然看起来好像一切都是"平坦的".

在上面的图片中,绿色的"渐变"是我要渲染的真实图块并计算鼠标 - >地图,但是您在"下方"看到的蓝色图块是计算出来的区域.因此,如果您将鼠标移动到任何深绿色区域,它会认为您正在使用另一个磁贴.

这是我的地图渲染(非常简单)

canvas.width = canvas.width; // cheap clear in firefox 3.6, does not work in other browsers
for(i=0;i<map_y;i++){
    for(j=0;j<map_x;j++){
        var xpos = (i-j)*tile_h + current_x;
        var ypos = (i+j)*tile_h/2+ current_y;

      context.beginPath();
      context.moveTo(xpos, ypos+(tile_h/2));
      context.lineTo(xpos+(tile_w/2), ypos);
      context.lineTo(xpos+(tile_w), ypos+(tile_h/2));
      context.lineTo(xpos+(tile_w/2), ypos+(tile_h));
      context.fill();

    }
}    

这是我的鼠标 - >地图例程:

ymouse=( (2*(ev.pageY-canvas.offsetTop-current_y)-ev.pageX+canvas.offsetLeft+current_x)/2 );
xmouse=( ev.pageX+ymouse-current_x-(tile_w/2)-canvas.offsetLeft );
ymouse=Math.round(ymouse/tile_h);
xmouse=Math.round(xmouse/(tile_w/2));

current_tile=[xmouse,ymouse];

我有一种感觉,我将不得不重新开始并实现一个基于世界的地图系统,而不是一个简单的屏幕 - >地图例程.

谢谢.

我正在尝试在CSS中进行等距3D,这是我现在所拥有的:http: //jsfiddle.net/AagGZ/1/(仅用于测试的webkit)

我基本上使用盒子阴影,1px x 1xx来创建3D效果,这对我来说似乎非常讨厌.动画时,我正在尝试添加1px的新图层,因此动画失败(不是很好).

有没有更好的方法来实现它？我在CSS内容之前和之后想到了CSS Matrix并添加了div.

这应该是我的项目的一个很好的添加,而不是基本功能,所以我没关系它不能在IE9下工作.

谢谢你的帮助.

编辑:我重新打开了这个问题,因为你需要有一个纯色背景的事实是一个问题,在过滤器之前和之后创建大的"invisibile"白色箭头,并且当你在不同的背景上有不同的背景时,它会非常快部分网站或当您想要在另一个元素的悬停时更改背景.我现在要回到我的版本并禁用动画.欢迎任何想法!

我是HTML5 Canvas和JavaScript的新手,但有一种简单的方法可以在HTML5 Canvas元素中进行等距投影吗？

我的意思是真正的等距投影 - http://en.wikipedia.org/wiki/Isometric_projection

谢谢大家的回复.

在这种情况下,我认为图像胜于雄辩.

我想得到这个效果:

但我能用CSS3做的最好的就是:

这个代码非常可怕:

box-shadow: 1px 1px hsl(0, 0%, 27%),
            2px 2px hsl(0, 0%, 27%),
            3px 3px hsl(0, 0%, 27%),
            4px 4px hsl(0, 0%, 27%),
            5px 5px hsl(0, 0%, 27%),
            6px 6px hsl(0, 0%, 27%),
            7px 7px hsl(0, 0%, 27%),
            8px 8px hsl(0, 0%, 27%),
            ...

有什么方法可以用纯CSS3创建这样的效果吗？我不介意它是3D,但等距是首选.

我不需要将内容放在盒子的两侧,只需放在正面,所以我只使用一个<div>元素.

这是我到目前为止所拥有的:http://jsfiddle.net/X7xSf/3/

任何帮助,将不胜感激!

我正在用canvas(&js)开发一个等距html5游戏.我的网格由列(x)和行(y)组成.

目前我的玩家可以穿过地图,但他从坐标跳到坐标.

我试图让他以平滑的方式从一个瓷砖走到另一个瓷砖,使用精灵动画.但是我不知道我怎么也找不到任何关于这个机制的文章,所以我再次向你求助!

所以,如果你知道如何做到这一点,或者知道解释这个的文章或教程,那就太棒了!

提前致谢,

Nick Verheijen

更新:我正在使用的代码来管理我的播放器

Player.move = function(direction)
{
 var newX = Player.positionX;
 var newY = Player.positionY;

 switch( direction )
 {
    case 'up':
        Player.moveDirection = 'up';
        newY--;
    break;
    case 'down':
        Player.moveDirection = 'down';
        newY++;
    break;
    case 'left':
        Player.moveDirection = 'left';
        newX--;
    break;
    case 'right':
        Player.moveDirection = 'right';
        newX++;
    break;
}

Player.positionX = newX;
Player.positionY = newY;
}

注意:我正在保存播放器移动的方向,因此我可以显示正确的图像.

此外,我没有使用像EaselJS这样的库.由于简单的原因,几乎没有任何文档或示例,所以我必须自己解决所有问题.

我正在尝试用js(canvas)编写游戏引擎.到现在为止还挺好.但我有一个问题,我的世界是菱形的,我从上到下渲染瓷砖.

问题是当我的瓷砖大于1个瓷砖(例如2x2)时会发生这种情况:

房子在瓷砖(2,1)上定义.左边的岩石放在(1,0)

首先渲染图块(1,0),然后下一个图块是(2,1),因为它位于同一行和右侧.

你怎么解决这个问题？

(抱歉我的语言不好)

我是Python的初学者,但是我没有选择,我需要它来进行项目,对于这个我必须通过编程创建ascii等量立方体.我真的不知道该怎么做,所以我开始想要找到"角落"的坐标(不是正确的词但是...)来绘制瓷砖

#what I expect really :
- for a 2 wide 
        .-?``?-.
    .-?`        `?-.
    |              |
    |              |
    `?-.        .-?`
        `?-..-?`    
- for 3 wide
            .-?``?-.
        .-?`        `?-.
    .-?`                `?-.
    |                      |
    |                      |
    `?-.                .-?`
        `?-.        .-?`
            `?-..-?`

# what I except for the beginning
- 2 wide
        .-?``?-.
    .-?`        `?-.
    `?-.        .-?`
        `?-..-?`

- 3 wide (,etc.)
            .-?``?-.
        .-?`        `?-.
    .-?`                `?-.
    `?-.                .-?`
        `?-.        .-?`
            `?-..-?`

我开始做什么

#! /usr/bin/env python
import numpy as np
x = …

我在画布上绘制了一个等距网格。它使用 30 度角偏移，我使用一些脚本来绘制基本网格。对于这个网格，我投影了一个具有 40x40 平铺尺寸的平面网格。

gridRows = 10;
gridCols = 10;
tileSize = 40;

gridWidth = gridCols * tileSize;
gridHeight = gridRows * tileSize;

canvasWidth = tileSize * (gridCols + gridRows) * Math.sqrt(3) / 2;
canvasHeight = tileSize * (gridRows + gridCols) / 2;

canvasOffset = tileSize * gridRows * Math.sqrt(3) / 2;

function carToIso(x, y) {
      // Convert cartesian (x, y) to isometric coordinates
      return [
        Math.round((x - y) * Math.sqrt(3) / 2 + canvasOffset),
        Math.round((x + y) / …