标签: sprite

你可以为webkit-mask-box-image使用CSS精灵(或剪辑吗?)

我正在玩-webkit-mask-box-imagecss属性.

<div style="
    background-color: red;
    -webkit-mask-box-image: url('images/cards/set1.png');
"></div>
Run Code Online (Sandbox Code Playgroud)

这非常有效.我最终得到了蒙版图像形状的红色元素.

唯一的问题是我需要大约25个不同的图像.我可以加载25个不同的蒙版图像,但如果我只加载一个图像然后使用它类似于CSS精灵,我重新定位或剪辑它会很棒.

但我想不出用掩码属性做到这一点的好方法.它可行吗?

我想出的一个解决方案是使用类似于此的标记:

<div style="
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
    position: relative;">
    <div style="
        background-color: red;
        -webkit-mask-box-image: url('images/cards/set1.png');
        position: absolute;
        top: -400px
    "></div>
</div>
Run Code Online (Sandbox Code Playgroud)

我没有像使用精灵那样使用背景图像并将其定位,而是使用DIV并将其定位在用于裁剪它的父div中.我认为这是一个不错的选择,但是想知道是否有一个以webkit为中心的CSS属性已经设计好了.

css sprite css3 webkit-mask

5
推荐指数
1
解决办法
4047
查看次数

如何使用数组协调基于2D平铺的游戏中的图形和逻辑位置?

我正在用像Bomberman(我的第一个游戏)编写一个基于Java平铺的Java游戏.

我使用2D数组来表示我跟踪墙壁,步行空间等的地图.到现在为止,我能够让玩家根据他按下的方向键(但不与背景/地图交互)平滑地交换精灵,它可以随机走动并走出屏幕).

当我想跟踪玩家在阵列中的位置时,我的问题出现了.从逻辑上讲,角色总是只属于一个瓷砖,但在图形上它可以在两个瓷砖之间.我该如何解决这个问题?

我已经尝试过了:

currentTileArrayX = x/tileWidth;

currentTileArrayY = y/tileHeight;

其中x和y是精灵的左上角坐标.但是一切都变得非常多,因为玩家的精灵与瓷砖的尺寸不同.

我有另一个选项可以解决上一个问题:当玩家按下一个方向键时,将该角色移动到下一个方块,就像动画一样.这不会让玩家停在两块瓷砖的中间......但是如果他用另一台按键打断它呢?如何在动画执行时停止用户的操作?我认为这是最简单的解决方案,但我不知道如何实现它.

我已经尝试在其他问题中找到解决方案,但我没有运气.我希望你能帮助我.

非常感谢.

java 2d sprite multidimensional-array

5
推荐指数
1
解决办法
2614
查看次数

Java CSS spriting库

我正在寻找一个纯Java CSS spriting库,我可以将其集成到我的Maven构建中,这样就可以为每个新构建自动完成spriting.(我目前正在使用http://code.google.com/p/wro4j/进行JavaScript和CSS最小化)

我首先考虑了http://csssprites.org/,但需要CSS注释工作有点让我失望.那里还有其他图书馆我应该看看吗?

css java sprite

5
推荐指数
1
解决办法
909
查看次数

用两种颜色在Spritekit中绘制矩形/圆形和三角形...

我可以使用简单的SKSpriteNode绘制Rectangle.但我无法在其中绘制其他类型的图纸,如Triangle,Circle等,具有TWO SPLIT COLORS.有人建议和CGPath一起去.但我是新手,不知道画这种复杂的东西.任何人都可以通过SPRITEKIT中的MULTICOLOR说明使用这些图纸的简单方法.意思是它们的上部是一种颜色而下部是第二种颜色.更简洁地说,Shape分为两种颜色,无论是星形,矩形,三角形还是其他颜色.任何帮助将不胜感激.

谢谢 .

core-graphics sprite cgpath ios7 sprite-kit

5
推荐指数
1
解决办法
1万
查看次数

CSS Image Sprites与社交图标的UI字体 - 从页面加载速度的角度来看

我很好奇使用CSS图像精灵为我的社交媒体图标与使用自定义UI字体的利弊.

哪一个在页面加载速度方面会提供卓越的性能?

在我看来,CSS精灵可能更好 - 因为只有一个HTTP请求,文件大小可能保持小于社交图标的自定义UI字体.

有人对此有所了解吗?

css fonts sprite page-load-time

5
推荐指数
1
解决办法
2041
查看次数

Xcode SpriteKit - 删除Sprite并停止动作 - repeatActionForever

我是Swift和SpritKit的新手,对我的游戏有一些问题.

在我didMoveToView(view: SKView) { }的代码部分中,我调用下面的语句来填充屏幕上的怪物.在我func addMonster() { } 的怪物中,然后动画从右侧移动到屏幕的左侧.一旦他们离开屏幕的另一侧,精灵就会被移除.

代码A.

    runAction(SKAction.repeatActionForever(
        SKAction.sequence([
            SKAction.runBlock(addMonster),
            SKAction.waitForDuration(1.0),SKAction.
            ])
        ))
Run Code Online (Sandbox Code Playgroud)

在添加Mons†er功能中,我调用以下代码将Monster移动到屏幕上.

    let actualDuration = random(min: CGFloat(6.0), max: CGFloat(10.0))
    let actionMove = SKAction.moveTo(CGPoint(x: -monster.size.width/2, y: actualY), duration: NSTimeInterval(actualDuration))
    let actionMoveDone = SKAction.removeFromParent()
    monster.runAction(SKAction.sequence([actionMove, actionMoveDone]))
Run Code Online (Sandbox Code Playgroud)

上面的所有代码都运行正常.

当用户杀死了X量的怪物时,我希望屏幕上的所有其他怪物都消失并停止产卵.

我的问题是,我如何a)停止产生怪物的代码A和b)如何获取视图中的任何怪物,被删除?

谢谢,

Ryann

xcode sprite ios swift ios8

5
推荐指数
1
解决办法
5709
查看次数

在java中跳跃球物理,引力

我做了一个简单的代码来获得跳球位置,但我肯定错过了一些东西,因为我得到了这个: http://i60.tinypic.com/2guxibn.png

这是获取x和y位置的代码:

public Vector2f[] draw() {
    float x = 0, y = height; // height - float value from class constructor;
    ArrayList<Vector2f> graphic = new ArrayList<Vector2f>();
    for(;;){
        Vector2f a = new Vector2f(x, y);
        graphic.add(a);
        ySpeed -= 10;
        y += ySpeed*Math.cos(angle);
        x += xSpeed*Math.sin(angle);
        if(y <= 0){
            // float coef = -10 * y / ySpeed;
            // ySpeed = ((ySpeed + coef) * (-1) ) * bouncyness;
            ySpeed = (ySpeed * (-1)) * bouncyness;
            System.out.println(ySpeed + " " + y);
            y …
Run Code Online (Sandbox Code Playgroud)

java animation sprite game-physics

5
推荐指数
1
解决办法
256
查看次数

SpriteKit - 确定A方碰撞的A方

所以对于我正在研究的App,我有两个立方体碰撞.我以标准方式检查这个.该应用程序告诉我他们何时在我的"didBeginContact"方法中发生碰撞.

-(void)didBeginContact:(SKPhysicsContact *)contact {
    if (contact.bodyA.categoryBitMask == WALL_CATEGORY && contact.bodyB.categoryBitMask == CHARACTER_CATEGORY) {
        CGPoint point = contact.contactPoint;
    }
}
Run Code Online (Sandbox Code Playgroud)

所以我知道碰撞发生在哪里,但因为它是两个正方形,它可以在包括角落在内的任何一点.那么我该如何检查左/右/上/下的碰撞?

编辑:正确答案:可能不是最干净的方法,但它的工作原理.希望它能帮助将来的某个人.

m_lNode = [SKNode node];
m_lNode.position = CGPointMake(-(CHARACTER_SIZE / 2), 0);
m_lNode.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:CGSizeMake(1, m_character.size.height)];
m_lNode.physicsBody.allowsRotation = NO;
m_lNode.physicsBody.usesPreciseCollisionDetection = YES;
m_lNode.physicsBody.categoryBitMask = CHARACTER_L_CATEGORY;

m_rNode = [SKNode node];
m_rNode.position = CGPointMake((CHARACTER_SIZE / 2), 0);
m_rNode.physicsBody = [SKPhysicsBody bodyWithRectangleOfSize:CGSizeMake(1, m_character.size.height)];
m_rNode.physicsBody.allowsRotation = NO;
m_rNode.physicsBody.usesPreciseCollisionDetection = YES;
m_rNode.physicsBody.categoryBitMask = CHARACTER_R_CATEGORY;

m_tNode = [SKNode node];
m_tNode.position = CGPointMake(0, (CHARACTER_SIZE / 2)); …
Run Code Online (Sandbox Code Playgroud)

collision-detection sprite ios

5
推荐指数
1
解决办法
882
查看次数

Unity Resources.Load <Sprite> vs Sprite

我试图用这段代码改变我的对象的图像(用作Sprite强制转换):

GetComponent<SpriteRenderer>().sprite = Resources.Load("GameObjects/Tiles/Hole") as Sprite;
Run Code Online (Sandbox Code Playgroud)

它不起作用,但这工作(使用<Sprite>):

GetComponent<SpriteRenderer>().sprite = Resources.Load<Sprite>("GameObjects/Tiles/Hole");
Run Code Online (Sandbox Code Playgroud)

有什么不同?

resources load renderer sprite unity-game-engine

5
推荐指数
1
解决办法
9433
查看次数

重新审视css背景图案精灵

使用css sprite作为图标风格的图像是最好的做法,现在非常简单.

在一个图像中使用多个重复背景传统上只有在它们仅使用垂直或水平重复时才可能.

或者是吗?与css3和html5以及所有东西相比,有没有办法在一个css精灵中组合多个背景图像来制作背景图案并使用垂直和水平重复?

编辑/注意:我知道这不是第一次提出这样的问题.但我发现的大多数/所有答案都是前一段时间.我只是想知道今天是否有解决方案.

编辑:说明我正在寻找的内容:http://ibin.co/21LqyJvnGdMB

html css sprite

5
推荐指数
1
解决办法
245
查看次数