游戏邦在:
杂志专栏:
gamerboom.com订阅到鲜果订阅到抓虾google reader订阅到有道订阅到QQ邮箱订阅到帮看

如何创造一款太空射击游戏(一)

发布时间:2013-11-15 15:26:27 Tags:,,,,

作者:Daniel Williams

在这一教程序列中,我们将学习如何创造出像经典的《空间防御》这样的太空射击游戏。

Space Defender(from app4smart)

Space Defender(from app4smart)

系列概述

在这一版本的《空间防御》中,玩家将通过射击敌人保卫自己的空间。每当玩家成功消灭一个敌人时,他们便会获得分数点,而当玩家拥有了20或40个分数点时,他们的枪支便能升级。游戏还会发送价值5个点数的奖励包。既然对这款游戏有了初步了解,我们便可以开始创造了。

我们将使用Corona SDK创造这一太空射击游戏。以下是在这系列教程中会出现的内容:

快速介绍Corona的故事板

如何在创作功用授权下使用原图

如何使用自定义字体

如何使用像按键等小工具

如何使用Corona SDK创造一款完整的游戏

你需要什么

为了使用这一教程,你需要在自己的计算机上安装Corona SDK。如果你没有SDK,前往www.CoronaLabs.com创造一个免费的帐号并下载免费的软件。

1.创造配置

我们设置游戏的第一步便是创造一个build.settings文件。这一文件将处理我们应用中的所有创造时间属性,如面向Android和iOS平台的定位以及额外选择。创造一个名为build.settings的新文件,复制以下设置到这一文件中。

settings = {
orientation = {
default = “landscapeRight”,
supported = { “landscapeRight”, “landscapeLeft”}
},
iphone = {
plist = {
UIStatusBarHidden = false,
UIAppFonts = { “Kemco Pixel.ttf” },
}
},
}

关于Corona SDK最棒的一点便是语言自文档化以及文件中大多数的设置都很容易理解。让我们快速浏览这些设置。

定位—-这一表格储存了游戏的真正外观。在我们的情况中,我们希望游戏是基于横向方式,并同时支持左右视角。

UIStatusBarHidden—-当我们在玩自己的游戏时,我们想要隐藏状态栏。所以我们将该选择设置为默认。

UIAppFonts—-这一选择让我们能够在应用中使用自定义字体,因为我们想要在应用中使用Kemco Pixel.ttf,所以我们便在此进行设置。字体文件必须放置在你的项目的根文件夹中。我们能在http://www.dafont.com/kemco-pixel.font中下载到Kemco Pixel。

2.运行时间配置

当我们设置了创造时间配置后,我们将在config.lua文件中设置运行时间配置。在这一文件中,我们将设置游戏的宽度和高度,内容规范的类型以及每秒的帧率。创造一个名为config.lua的新文件并复制如下设置。

application = {
content = {
width = 320,
height = 480,
scale = “letterBox”,
fps = 30,
},
}

与我们的build.settings文件一样的是,config.lua也是自文档化,除了规模选择外。规模选择是Corona SDK用于调整你的应用去面对不同屏幕尺寸的功能。在letterBox选择中,我们让Corona在保持纵横比的同时在屏幕上呈现所有的内容。当内容未能覆盖整个屏幕时,应用将在该区域呈现不带有任何内容的黑栏(就像基于宽屏的电影一样)。

在我们继续创造自己的应用前,我们需要说说图像。我们可以通过许多不同的方式将图像整合到游戏中,如聘请图像设计师,寻求朋友的帮助,独自绘制,或从http://graphicriver.net/等网站上购买相关图像。

然而,如果你的经费有限,你便不能购买这些图像,或者你可能也没时间去创造它们。在这种情况下,你可以使用基于创作共用授权而发行的图像。这些创作共用授权让你能够基于一些限制条件(如告知作者归因)而免费使用图像。

对于我们的游戏,我们将基于创作共用授权使用来自OpenGameArt.org的图像。这些图像的创造者是VividRealtiy,这是其作品的链接—-http://opengameart.org/content/evolutius-gfx-pack。在继续之前,请先确保你下载了图像设置或有关该教程的文件。

尽管还有许多基于该授权的图像网站,我经常访问的网站有三个:

http://www.graphic-buffet.com/freebies/

http://creativity103.com

http://thatssopanda.com/blog/game-assets-for-corona-sdk

3.故事板设置

既然我们已经拥有了图像,我们便可以继续创造游戏了!为此我们需要创造一个名为main.lua的新文件。该文件将是我们游戏的起点,实际上它也是每款基于Corona的游戏的起点。一旦创造了文件,你可以在自己喜欢的编辑器上打开它,并输入如下代码:

– hide the status bar

display.setStatusBar( display.HiddenStatusBar )

这行代码将在iOS上隐藏状态栏。接下来我们将使用Corona的故事板功能去管理我们的游戏。故事板功能将突出游戏的两个部分作为场景,从而让开发者可以更轻松地管理代码。举个例子来说吧,我们的游戏拥有三个场景—-main.lua,菜单以及游戏屏幕。一旦设置了每个场景,Corona将提供一种简单的方式在不同场景间移动着。因为这对于那些刚开始使用Corona SDK的开发者而言可能是个巨大的障碍,所以我将呈现出我们游戏布局的图像解释:

每个蓝色框代表一个独立场景,而每个场景间的箭头呈现的是我们如何穿越场景。简单地来说,我们是从main.lua开始,并会在场景2和场景3之间来回移动。

在我们的应用中执行故事板非常简单:只需要模块便可,而你也已经准备就绪了!将以下代码放置在main.lua去整合这一伟大的功能。

– include the Corona “storyboard” module

local storyboard = require “storyboard”

接下来我们将要移动到第二个场景,我们将使用故事板变量去完成它。

– load menu screen

storyboard.gotoScene( “menu” )

现在我们便完成了main.lua文件,让我们开始处理主菜单!

4.主菜单创造

我们游戏的主菜单将呈现背景图像,游戏名称以及开始游戏按键。一开始让我们先创造名为menu.lua的新文件和Corona所突出的故事板。

local storyboard = require( “storyboard” )

local scene = storyboard.newScene()

现在我们将添加Corona的小部件功能去创造按键。小部件功能让我们能够轻松地创造像游戏中的按键等常见的GUI元素。

local widget = require “widget”

在浏览了部件库之后,我们将为游戏预先定义一些变量。这些变量将储存屏幕狂赌,高度以及屏幕中标轴的中点。

local screenW, screenH, halfW, halfY = display.contentWidth, display.contentHeight, display.contentWidth*0.5, display.contentHeight*0.5

在设置了变量之后,我们将创造名为scene:createScene()的第一个函数。这一函数会在场景首次加载或者场景在之前被删除时进行调用。一般说来,这一函数是用于添加所有图像元素到屏幕上。

function scene:createScene( event )
local group = self.view
end

故事板的一个重要功能便是处理对象的方式。所有呈现我们在这一场景中使用的对象都将被放置在变量群组中。通过在这一群租中放置我们的对象,我们便能让Corona知道这些对象属于这一场景,而当需要删除场景时,这些对象也会被删除。

在函数scene:createScene()中,我们将使用图像BKG.png(游戏邦注:该图像是来自opengameart.org)作为游戏的背景图像。当添加了该图像后,我们将把它陈列在屏幕的中间,并将其整合到群组变量中。

– display a background image
local bg = display.newImageRect(“images/BKG.png”, 480, 320)
bg.x = halfW
bg.y = halfY
group:insert(bg)

接下来我们将使用自定义字体(我们在build.settings文件中所指定的)把游戏名字放置在屏幕上。

– place a game title on the screen
local gametitle = display.newText(“Space Defender”,0,0,”Kemco Pixel”,40)
gametitle.x = halfW
gametitle.y = 100
group:insert( gametitle )

最后添加到第一个函数中的便是游戏按键。游戏按键将使用Corona的小部件功能以及一个名为onPlayBtnRelease的事件侦听器。当用户碰触到游戏按键时,事件侦听器将被触发。以下代码都是在scene:createScene()函数中。

local function onPlayBtnRelease()
storyboard.gotoScene( “game”, “slideLeft”)
end
playBtn = widget.newButton{
label=”Play Now”,
labelColor = { default={255} },
defaultFile = “images/Button.png”,   overFile = “images/Button_Purple.png”,
width=150, height=60,   left=180, top=150,
font = “Kemco Pixel”,
fontSize = 18,   onRelease = onPlayBtnRelease — event listener function
}
group:insert( playBtn )

在创造了场景函数后,我们将添加一个进入场景函数。该函数将在创造场景函数之后被触发,并删除之前的场景。

function scene:enterScene( event )
local group = self.view
if storyboard.getPrevious() ~= nil then
storyboard.removeScene(storyboard.getPrevious())
end
end

我们将添加的最后函数便是destroyScene函数。该函数将在场景被删除或被破坏时被调用。在我们的例子中,因为我们正在使用小部件,而小部件需要手动删除,所以我们将在破坏场景函数中删除小部件。

function scene:destroyScene( event )
local group = self.view
if playBtn then
playBtn:removeSelf()    — widgets must be manually removed
playBtn = nil
end
end

最后,我们将添加事件侦听器去调用我们所设置的不同函数—-enterScene,destroyScene以及createScene。

scene:addEventListener( “createScene”, scene )   scene:addEventListener( “enterScene”, scene )   scene:addEventListener( “destroyScene”, scene )

结论

这便是本系列教程的第一部分!我们已经学会了如何设置项目,如何执行Corona的故事板功能,如何开始我们的应用,以及如何创造一个菜单系统了。

本文为游戏邦/gamerboom.com编译,拒绝任何不保留版权的转载,如需转载请联系:游戏邦

Create a Space Defender Game – Game Setup

By Daniel Williams

In this tutorial series, we will be learning how to create a space shooter game just like the classic game Space Defender. Read on!

Series Overview

In this version of Space Defender, the player will have to defend his space by shooting enemies. Every time the player successfully destroys an enemy, they will earn points and when the player has reached 20 or 40 points, their gun will receive an upgrade. To mix things up, this game will send out bonus packages that are worth 5 points. To see the game in action, watch the short video above. Now that we know more about the game we are creating, let’s get started!

This space shooter game will be built using the Corona SDK. Here are some of the things you’ll learn in this tutorial series:

A quick introduction to Corona’s Storyboard

How to utilizing artwork under the creative commons license

How to use custom fonts

How to use widgets such as buttons

How to build a full game with the Corona SDK

What You’ll Need

In order to use this tutorial, you’ll need to have the Corona SDK installed on your computer. If you do not have the SDK, head over to www.CoronaLabs.com to create a free account and download the free software.

1. Build Configuration

Our first step in setting up our game is the build.settings file. This file handles all of the build time properties of our app such as the orientation and additional options for Android and iOS platforms. Create a new file called build.settings and copy the following settings into your file.

settings = {
orientation = {
default = “landscapeRight”,
supported = { “landscapeRight”, “landscapeLeft”}
},
iphone = {
plist = {
UIStatusBarHidden = false,
UIAppFonts = { “Kemco Pixel.ttf” },
}
},
}

One of the great things about Corona SDK is that the language self-documents and most of the settings in this file should be easy to understand. However, let’s quickly walk through these settings.

orientation – This table stores how the game will actually look. In our case, we want the game to be played in landscape mode and support both landscape left and right.

UIStatusBarHidden – Once we’re playing our game, we want to hide the status bar. So, we set this option to false.

UIAppFonts – This option allows us to use custom fonts within our app and since we want to use Kemco Pixel.ttf in our app, we set that here. The font file must be placed in the root folder of your project. Kemco Pixel is available for download at http://www.dafont.com/kemco-pixel.font.

2. Runtime Configuration

After we’ve set our build time configurations, we are going to set up our runtime configurations in our config.lua file. In this file, we will set up the width and height of our game, the type of content scaling, and the frames per second. Create a new file called config.lua and copy the following settings.

application = {
content = {
width = 320,
height = 480,
scale = “letterBox”,
fps = 30,
},
}

Similar to our build.settings file, the config.lua is self-documenting except for the scale option. The scale option is a feature that Corona SDK uses to adapt your application for different screen sizes. In the case of the letterBox option, we are telling Corona to display all of our content on the screen while keeping the aspect ratio.  When the content does not cover the entire screen, the app will display black bars in the areas without content (much like watching movies in widescreen mode).

Before we continue building our app, we need to talk about graphics. There are a lot of different ways that you can obtain graphics for your game – hire a graphic designer, hire a friend, draw them yourself, or even buy stock graphics from websites like http://graphicriver.net/.

However, if you are on a shoestring budget, you may not be able to purchase these graphics or you may not have the time to create them. In these kinds of situations, you can use graphics that have been released under the creative commons license. The creative commons license allows you to use graphics that are freely available under certain restrictions such as providing attribution to the author.

For our game, we are going to be using artwork under the creative commons license from OpenGameArt.org. The author that created these graphics is VividRealtiy and here’s a direct link to his work – http://opengameart.org/content/evolutius-gfx-pack. Before continuing, make sure to download the graphic set or download the file for this tutorial.

While there are a ton of websites with graphics under this license, here are three websites I visit often:

http://www.graphic-buffet.com/freebies/

http://creativity103.com

http://thatssopanda.com/blog/game-assets-for-corona-sdk

3. Storyboard Setup

Now that we have our graphics, we can continue making our game! To continue our game, we have to create a new file called main.lua. This file will be the start point of our game and in fact it’s the start point of every game made with Corona. Once the file is created, open it in your favorite editor and enter the following code:

– hide the status bar

display.setStatusBar( display.HiddenStatusBar )

This line of code will hide the status bar on iOS. Next, we will use Corona’s storyboard feature to manage our game. The storyboard feature treats different parts of the game as scenes to make it easier for developers to manage the code. For example, our game has three scenes – main.lua, the menu, and the game screen. Once each scene is set up, Corona provides a very easy way to move between scenes. Since this can be a huge hurdle for developers just starting with the Corona SDK, here’s a graphical representation of the layout of our game.

Each blue box represents an individual scene and the arrow between each scene shows how we will navigate through the scenes. Simply put, we start at main.lua and will navigate back and forth between Scene 2 and Scene 3.

Implementing the Storyboard in our app is simple: just require the module and you’re all set! Place the following code into main.lua to incorporate this great feature.

– include the Corona “storyboard” module

local storyboard = require “storyboard”

Next, we will want to move to the second scene and we will use the storyboard variable to accomplish this.

– load menu screen

storyboard.gotoScene( “menu” )

Now that we’ve completed our main.lua file, let’s tackle the main menu!

4. Main Menu Creation

The main menu of our game will display a background image, the game title, and a Play Now button. To get started, create a new file called menu.lua and Corona’s storyboard featured.

local storyboard = require( “storyboard” )

local scene = storyboard.newScene()

Now we will add Corona’s widget feature to create our button. The widget feature allows us to easily create common GUI elements such as buttons in our game.

local widget = require “widget”

After the widget library, we will pre-define some variables for our game. These variables will store the screen width, screen height, and the middle of the screen coordinates.

local screenW, screenH, halfW, halfY = display.contentWidth, display.contentHeight, display.contentWidth*0.5, display.contentHeight*0.5

After our variables, we will create our very first function called scene:createScene(). This function is called when the scene is loaded for the very first time or if the scene has been previously removed. Generally speaking, this function is used to add all of the graphical elements to the screen.

function scene:createScene( event )
local group = self.view
end

One important feature of a storyboard is the way it handles objects. All of the display objects that we use within this scene will be placed with the variable group. By placing our display objects within this group, we are letting Corona know that these objects belong to this scene and when the scene needs to be removed, these objects will also be removed.

Inside the function scene:createScene(), we will use the graphic BKG.png (this graphic came from opengameart.org) as the background for our game. Once it’s added, we will center the graphic on the screen and insert it into the group variable.

– display a background image
local bg = display.newImageRect(“images/BKG.png”, 480, 320)
bg.x = halfW
bg.y = halfY
group:insert(bg)

Next, we place our game title on the screen using the custom font that we specified in our build.settings file.

– place a game title on the screen
local gametitle = display.newText(“Space Defender”,0,0,”Kemco Pixel”,40)
gametitle.x = halfW
gametitle.y = 100
group:insert( gametitle )

Our last addition to our first function is the play button. The play button will use Corona’s widget feature and an event listener called onPlayBtnRelease. The event listener will be triggered when the play button is touched. Add the following code inside the scene:createScene() function.

local function onPlayBtnRelease()
storyboard.gotoScene( “game”, “slideLeft”)
end
playBtn = widget.newButton{
label=”Play Now”,
labelColor = { default={255} },
defaultFile = “images/Button.png”,   overFile = “images/Button_Purple.png”,
width=150, height=60,   left=180, top=150,
font = “Kemco Pixel”,
fontSize = 18,   onRelease = onPlayBtnRelease — event listener function
}
group:insert( playBtn )

After our create scene function, we will add an enter scene function. This function will be triggered after the create scene function and will remove the previous scene.

function scene:enterScene( event )
local group = self.view
if storyboard.getPrevious() ~= nil then
storyboard.removeScene(storyboard.getPrevious())
end
end

The last function we will add is the destroyScene function. This function will be called when the scene is removed or destroyed. In our case, we are using widgets and since widgets must be removed manually, we remove the widget inside our destroy scene function.

function scene:destroyScene( event )
local group = self.view
if playBtn then
playBtn:removeSelf()    — widgets must be manually removed
playBtn = nil
end
end

Finally, we add event listeners to call the different functions we set up – enterScene, destroyScene, and createScene.

scene:addEventListener( “createScene”, scene )   scene:addEventListener( “enterScene”, scene )   scene:addEventListener( “destroyScene”, scene )

Conclusion

And that’s it for Part 1! We’ve learned how to set up our project, how to implement Corona’s storyboard feature, how to start our app, and how to create a menu system. Read Part 2 of this series now!(source:tutsplus)


上一篇:

下一篇: